美文网首页
PurComponent和Component的区别

PurComponent和Component的区别

作者: codingQi | 来源:发表于2019-06-05 10:34 被阅读0次

    区别点:

    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

    提示

    相关文章

      网友评论

          本文标题:PurComponent和Component的区别

          本文链接:https://www.haomeiwen.com/subject/lqdjxctx.html