区别点:
- 前者自带通过props和state的浅对比来实现 shouldComponentUpate(),而后者没有,只要props变化都会render;
PureComponent缺点
- 可能会因深层的数据不一致而产生错误的否定判断,从而shouldComponentUpdate结果返回false,界面得不到更新。
PureComponent优势
- 不需要开发者自己实现shouldComponentUpdate,就可以进行简单的判断来提升性能。
为什么PureComponent比较复杂的数据结构,可能会因深层的数据不一致而产生错误的否定判断?
JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值
,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。
- 为了解决这个问题,一般的做法是使用
shallowCopy(浅拷)
或deepCopy(深拷贝)
来避免被修改,但这样做造成了 CPU 和内存的浪费。
例如:
let foo = {a: {b: 1}};
let bar = foo;
bar.a.b = 2;
console.log(foo.a.b); // 打印 2
console.log(foo === bar); // 打印 true
如果要使用PurComponent的话,如何避免不会render的问题?
- 避免使用值可能会突变的属性或状态,而是使用副本来返回新的变量。
- 另外一种方式是使用Immutable.js。
网友评论