通过shouldComponentUpdate更新newState的最佳实践？

我已经创建了一个文本输入，当您通过onChange进行输入时，它只会更新它自己的状态，然后通过onBlurEvent向父级方向工作，以防止在用户输入时重新渲染太多的GUI。通过shouldComponentUpdate更新newState的最佳实践？

这有效，但我的缺点是，由于输入有它自己的状态，如果道具因外力而改变，并且我想更新我的文本输入作为那些新道具，我有点儿泡菜。从我一直在寻找，shouldComponentUpdate可以创建一个修复程序，我的代码工作，但只是因为它的作品并不意味着我的实施是好的。

使用时的反应，我的理解是，我们不应该做更新状态：

this.state.value = "This is a new value"

，而是做：

this.setState({ 
     value: "This is a new value" 
    });

但对于直接改变newState这在技术上是不是“ this.state“在shouldComponentUpdate里面？

我有如下的逻辑：

shouldComponentUpdate(props, newState) { 
    if (...logic 1 ... && props.value != newState.value) { 
     //keep newState 
     return true; 
    } 
    else if (...logic 2 ... props.value != newState.value) 
    { 
     newState.value = props.value; //Right Here 
     return true; 
    } 
    return false; 
};

来源

2017-04-21 user2589339

这似乎是一样糟糕的（如果不是不差）设置this.state给我。您只应通过setState更新您的状态，否则您将面临稍后更新覆盖更改的风险。

一个更好的解决办法是使用componentWillReceiveProps(nextProps)生命周期挂钩 - 文档说：

如果您需要在响应更新状态托变化（例如，复位），你可能比较this.props和nextProps并在此方法中使用this.setState（）执行状态转换。

这听起来和你想要做的一模一样！

我不知道你的逻辑，所以我不能给出一个完整的例子，但这里有一个出发点：

componentWillReceiveProps(nextProps) { 
    if (/* your condition */ && nextProps.value != this.state.value) { 
     this.setState({ 
      value: nextProps.value 
     }); 
    } 
}

来源

2017-04-21 14:37:17

通过shouldComponentUpdate更新newState的最佳实践？

回答

相关问题