这个文档讲的比较好,
下面写的忽略
前置知识点
react的更新方式setstate
react的三种组件写法
- 最早的普通的class A extends React.Component
- 经过性能优化的class A extends React.PureComponent
- 函数组件
第一种普通的方式,只要调用setstate方法,不管state有没有变,就会重新渲染
第二种方式,源码里面根据isShallowEqual判断是否更新
第三种方式,只要state对象变了,就会重新渲染。也可以用react.memo包裹函数组件,但是如果对象的属性值是引用类型的话,浅比较无法对比出来,因为浅比较比较的是对象的引用是否发生变化,有的时候不同写法引用不变,所以对比方法需要改为那种深比较,要么就是如下这两种方法去让重新render
改变state对象的两种办法
-
使用拓展运算符,比如
this.setstate({ ...a, xxx: 2})
-
使用immutable库,immutable会生成一个新的state对象,和原来的state对象是不一样的对象,所以才会重新渲染。后来也可使用immer