react(6) shouldComponentUpdate避免组件重复或者无意义渲染

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
    }
  }