react函数组件为什么要用immutable

230 阅读1分钟

这个文档讲的比较好,

www.cnblogs.com/wbxjiayou/p…

下面写的忽略

前置知识点

react的更新方式setstate

react的三种组件写法

  1. 最早的普通的class A extends React.Component
  2. 经过性能优化的class A extends React.PureComponent
  3. 函数组件

第一种普通的方式,只要调用setstate方法,不管state有没有变,就会重新渲染

第二种方式,源码里面根据isShallowEqual判断是否更新

第三种方式,只要state对象变了,就会重新渲染。也可以用react.memo包裹函数组件,但是如果对象的属性值是引用类型的话,浅比较无法对比出来,因为浅比较比较的是对象的引用是否发生变化,有的时候不同写法引用不变,所以对比方法需要改为那种深比较,要么就是如下这两种方法去让重新render

改变state对象的两种办法

  • 使用拓展运算符,比如

    this.setstate({ ...a, xxx: 2})

  • 使用immutable库,immutable会生成一个新的state对象,和原来的state对象是不一样的对象,所以才会重新渲染。后来也可使用immer