React中Component与PureComponent的区别

235 阅读2分钟

Component 与 PureComponent几乎完全相同,但PureComponent通过props和state的浅对比来实现shouldComponentUpdate()。 在PureComponent中,如果包含比较复杂的数据结构,可能会因为深层的数据不一致而产生错误的否定判断,从而导致界面得不到更新渲染。

如果定义了shouldComponentUpdate(),无论组件是否是PureComponent,它都会执行shouldComponentUpdate结果来判断是否update。如果组件未实现shouldComponentUpdate(),则会判断该组件是否是PureComponent,如果是的话,会对新旧的props, state进行shallowEqual比较,一旦新旧不一致,会触发update。

浅对比: 通过遍历对象上的键执行相等性判断,并在任何键具有参数之间不严格相等的值时返回false。当所有键的值严格相等时返回true。

区别点: 1、PureComponent几乎完全相同自带通过props和state的浅对比来实现shouldComponentUpdate(),而Component没有。

PureComponent缺点: 1、可能会因为深层的数据不一致而产生错误的否定判断,从而shouldComponentUpdate结果返回false,导致界面得不到更新渲染。

PureComponent优势: 1、不需要开发者自己实现shouldComponentUpdate,就可以进行简单数据的浅对比判断来提升性能。

为什么PureComponent比较复杂的数据结构,可能会因为深层的数据不一致而产生错误的否定判断呢?

JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。

let foo = {a: {b : 1}} let bar = foo bar.a.b = 2 console.log("foo.a.b ==", foo.a.b); // 2 console.log("foo === bar", foo === bar) // true

为了解决这个问题,一般的做法是使用shallowCopy(浅拷贝)或deepCopy(深拷贝)来避免被修改,但这样做造成了CPU和内存的浪费。