shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState)
使用shouldComponentUpdate()
以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲,在大部分情况下你应该依赖于默认行为。
当接收到新属性或状态时,shouldComponentUpdate()
在渲染前被调用。默认为true
。该方法并不会在初始化渲染或当使用forceUpdate()
时被调用。
当他们状态改变时,返回false
并不能阻止子组件重渲。
当前,若shouldComponentUpdate()
返回false
,而后UNSAFE_componentWillUpdate()
,render()
, 和 componentDidUpdate()
将不会被调用。注意,在未来React可能会将shouldComponentUpdate()
作为一个线索而不是一个严格指令,返回false
可能仍然使得组件重渲。
在观察后,若你判定一个具体的组件很慢,你可能需要调整其从React.PureComponent
继承,其实现了带有浅属性和状态比较的shouldComponentUpdate()
。若你确信想要手写,你可能需要用this.props
和nextProps
以及this.state
和 nextState
比较,并返回false
以告诉React更新可以被忽略。
shouldComponentUpdate是react提供的生命周期函数,他发生在接收到新的props的时候。
简单介绍一下各个生命周期函数。
componentWillMount:组件挂载之前执行,只执行一次
componentDidMount: 组件渲染完成,只执行一次
=======================================================
componentWillRecevieProps: 组件将要接收新的props执行
shouldComponentUpdate: 判断组件是否应该重新渲染,默认是true
componentWillUpdate: 组件将要重新渲染
componentDidUpdate: 组件重新渲染完成
=======================================================
componentWillUnmount: 卸载组件
下面是简单例子
shouldComponentUpdate避免组件重复或者无意义渲染
shouldComponentUpdate(nextProps) {
if(JSON.stringify(nextProps) == JSON.stringify(this.props)) {
return false
}else {
return true
}
}