如何在ReactJs中正确使用shouldComponentUpdate（）和componentWIllUpdate（）方法？

Question

从redux获取数据后，在使用componentWillReceiveProps更新组件本地对象之前。

componentWillReceiveProps(nextProps) {
    if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
        this.setState({user:{
          name:nextProps.editUser.name,
          email:nextProps.editUser.email,
        }}, function(){
          this.setState({addModalUserEdit:true});
        });
    }
}

但是现在我想按照React生命周期在react文档中使用shouldComponentUpdate和componentWillUpdate。

shouldComponentUpdate(nextProps, nextState){
    if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
      return true;
    }
    return false;
}

componentWillUpdate(nextProps, nextState) {
    if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
        this.setState({user:{
          name:nextProps.editUser.name,
          email:nextProps.editUser.email,
        }}, function(){
          this.setState({addModalUserEdit:true});
        });
    }
}

但是我产生一个错误

  

“已超过最大更新深度。当组件出现这种情况   重复调用componentWillUpdate内的setState或   componentDidUpdate。 React将嵌套更新的数量限制为   防止无限循环。”

请指导我在理解生命周期方面做错的事情。

谢谢。

Answer 1

gksudo stdbuf -oL apt update | zenity --progress --pulsate --auto-close --auto-kill 在更新为状态之前运行（，这就是为什么它为您提供shouldComponentUpdate作为属性的原因），因此在对{{1 }}，您需要使用nextState。

state

请记住，advised请勿在{{1​​}}中进行深度相等性检查，因为这会损害性能。

另外，nextState（在最新版本中是 ）被称为UNSAFE_componentWillUpdate，它指出

  

请注意，您无法在此处致电shouldComponentUpdate(nextProps, nextState){ if (nextProps.editUser && !nextProps.loading && !isEqual(nextState.user, nextProps.editUser)){ return true; } return false; } ；你也不应该做   会触发其他操作的任何其他操作（例如，调度Redux操作）   在UNSAFE_componentWillUpdate（）之前更新到React组件   返回。

---

建议的方法是使用componentDidUpdate。

Answer 2

当接收到新的道具或状态时，会在渲染之前调用

shouldComponentUpdate()。

  shouldComponentUpdate (nextProps) {
     return nextProps !== this.props
  }

componentDidUpdate()在更新状态后立即被调用。

初始渲染均不调用这两种方法。

Answer 3

shouldComponentUpdate用于确定道具或状态的更改是否影响了组件的输出。

当组件输出更新时，将触发

componentDidUpdate。

shoudComponentUpdate接受2个参数，nextProps和nextState。其中包含道具和状态的新更新。并返回一个布尔值。