写这个的起源是因为一个echarts组件,触发父组件给予的回调函数之后总会因为父组件的重新渲染而再次渲染,而在React的diff算法中,canvas又是必定重新渲染的,再加上echarts中使用了力引导坐标系,带来的结果就是每次触发回调函数,echarts上的图像都会乱飞,所以我就想阻断子组件的重新渲染
第一种方法:React.PureComponent
class App extends React.PureComponent
PureComponent为组件提供了一个具有浅比较的ShouldComponentUpdate方法。
当props或state发生改变的时候,PureComponent会对它们进行浅比较。
不过props和state都有可能含有对象,使得PureComponent的适用范围受到很大的限制,所以这种方法,我个人不是很喜欢使用
第二种方法:ShouldComponentUpdate(类组件限定)
既然觉得PureComponent自带的ShouldComponentUpdate不适用,那我们可以自己写一个ShouldComponentUpdate方法
ShouldComponentUpdate(nextProps,nextState){
return JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data)
}
ShouldComponentUpdate的第一个参数代表更新后的props,第二个参数代表更新后的state
ShouldComponentUpdate如果返回false代表不应该更新,返回true代表应该更新
PS:JSON.stringify只是简单的深比较方法,如果对象中涉及函数/日期/正则/undefined等JSON.stringify无法字符串化的对象,就要使用另外的深比较方法了。
第三种方法:React.memo(函数组件限定,React版本16.6.0以上)
ShouldComponentUpdate确实很好用,不过它只对类组件起作用,开发过程中,函数组件也是不少的,对于函数组件,我们就要使用React.memo
React.memo是一个高阶组件,它的第一个参数代表修饰的组件,第二个参数代表判断是否和原先一样的函数
export default React.memo(FunctionComponent, isEqual)
isEqual这个函数有两个参数,第一个代表修改前的props,第二个代表修改后的props
function isEqual(prevProps, nextProps) {
return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data)
}
值得注意的是,isEqual返回为true代表前后一致,组件不重新渲染,返回为false代表前后不一致,组件重新渲染
** 和ShouldComponentUpdate的返回值完全相反 **