如何在ReactJs中正确使用shouldComponentUpdate()和componentWIllUpdate()方法?

如何在ReactJs中正确使用shouldComponentUpdate()和componentWIllUpdate()方法?,reactjs,react-redux,Reactjs,React Redux,在使用componentWillReceiveProps从redux获取数据后更新组件本地对象之前 componentWillReceiveProps(nextProps) { if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){ this.setState({user:{ name:

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

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});
        });
    }
}
但现在我想使用shouldComponentUpdate和componentWillUpdate作为react文档中的react生命周期

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或 React将嵌套更新的数量限制为 防止无限循环。”

请指导我在理解生命周期时我做错了什么

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

提前感谢。

shouldComponentUpdate
在状态更新之前运行(这就是为什么它将
nextState
作为属性提供给您的原因),因此在针对
状态进行测试时,您需要使用
nextState

shouldComponentUpdate(nextProps, nextState){
    if (nextProps.editUser && !nextProps.loading && !isEqual(nextState.user, nextProps.editUser)){
      return true;
    }
    return false;
}
但是请记住,不要在
shouldComponentUpdate
中执行深度相等性检查,因为这会影响性能

此外,将调用
组件willupdate
(在最新版本中),并声明

请注意,您不能在此处调用
this.setState()
;你也不应该这样做 任何其他可能触发 在不安全组件WillUpdate()之前更新到React组件 返回



建议的方法是在收到新的道具或状态时,在呈现之前调用。

shouldComponentUpdate()

  shouldComponentUpdate (nextProps) {
     return nextProps !== this.props
  }
componentDidUpdate()
在更新状态后立即调用


对于初始渲染,不会同时调用这两种方法

应使用ComponentUpdate
确定道具或状态的更改是否影响组件输出

组件输出上有更新时,将触发
componentdiddupdate

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


我使用的是react 16.02版本,如何防止更新本地状态这些函数中的下一个状态是什么?@hu7sy忘记我的最后一条评论。正如我在回答中提到的,不允许在组件willupdate中使用
setState
。您能告诉我为什么您使用
组件WillReceiveProps的初始解决方案不再足够了吗?我不再说不足够了,我很好奇使用react cycle,因为shouldComponentUpdate就像一个标志来呈现来自redux的新值,如果是,那么它将进一步转到componentWillUpdate来呈现来自redux的新值,并且什么是不始终重新呈现值的最佳方法让我们假设我对处于redux状态的用户对象具有值,并且想要阻止始终更新本地状态不总是重新渲染值的最佳方法是什么让我们假设我拥有将处于redux状态的用户对象的值,并且我想要阻止始终更新本地状态