react中关于render渲染次数的性能优化

在普通组件里面可以使用shouldComponentUpdate钩子函数提升react性能。 (nextProps,nextState)
在内部可以判断组件外部接受的最新属性与之前的属性是否一致,从而约束render刷新的时机。
只要结果返回true,render就会立马执行渲染更新,返回false就代表render不会执行。

可以使用PureComponent来优化性能。内部机制是通过浅比较去实现的。
PureComponent代表纯组件,纯组件内部是不能再去复写shouldComponentUpdate这个钩子函数了
内部进行浅比较(进行值比较或者内部地址的比较),进行性能的优化
注意:如果是值比较的话,外部传入的属性与内部的属性不一样的话,才会进行render更新操作
如果是引用地址比较的话,例如数组,之前的属性数组的地址与更改后的新的数组的地址一致,那么就不会进行render的更新操作

对于无状态组件的话,使用 React.memo(组件) 来进行性能提升

posted @ 2020-04-18 10:14  Mine-  阅读(52)  评论(0编辑  收藏  举报