nextState 在 shouldComponentUpdate 中做了啥?

Posted

技术标签:

【中文标题】nextState 在 shouldComponentUpdate 中做了啥?【英文标题】:What does nextState do in shouldComponentUpdate?nextState 在 shouldComponentUpdate 中做了什么? 【发布时间】:2018-07-14 19:59:13 【问题描述】:

在 React 生命周期函数 shouldComponentUpdate(nextProps, nextState) 中,nextProps 是不言自明的。

但是 nextState 是做什么的呢?

在决定是否应该渲染/修改组件之前,我可以评估即将到来的状态,这听起来不对。

【问题讨论】:

【参考方案1】:

基本上此时状态已经改变,您是否认为有必要重新渲染组件并基于此返回 true 或 false

【讨论】:

【参考方案2】:

nextState 用于检测组件是否应该根据即将到来的状态进行更新,就像您提到的那样。

这有助于优化更新组件。例如:

如果状态变成具有多个属性的大对象,但特定组件只关心单个属性或状态的一小部分,您可以检查该更改以确定该组件是否需要重新渲染。此示例取自 React 文档,但很好地说明了要点:

shouldComponentUpdate(nextProps, nextState) 
    if (this.props.color !== nextProps.color) 
      return true;
    
    if (this.state.count !== nextState.count) 
      return true;
    
    return false;

【讨论】:

以上是关于nextState 在 shouldComponentUpdate 中做了啥?的主要内容,如果未能解决你的问题,请参考以下文章

React入门--------组件API

关于render渲染优化

react 的生命周期函数

vue 和react的区别

理解React生命周期的好例子

React API