PurComponent和Component的区别

2019-06-05  本文已影响0人  codingQi

区别点:

  1. 前者自带通过props和state的浅对比来实现 shouldComponentUpate(),而后者没有,只要props变化都会render;

PureComponent缺点

  1. 可能会因深层的数据不一致而产生错误的否定判断,从而shouldComponentUpdate结果返回false,界面得不到更新。

PureComponent优势

  1. 不需要开发者自己实现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的问题?

  1. 避免使用值可能会突变的属性或状态,而是使用副本来返回新的变量。
  2. 另外一种方式是使用Immutable.js

提示

上一篇下一篇

猜你喜欢

热点阅读