Question

我创建了一个文本输入，只有当您通过onChange键入时才更新它自己的状态，然后通过onBlurEvent在父级上方工作，以防止在用户输入时重新渲染过多的GUI。

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

使用react时，我知道我们不应该通过执行以下操作来更新状态：

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

而是：

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

但是直接更改newState，在技术上不是在shouldComponentUpdate中的“this.state”呢？

我有以下逻辑：

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

Answer 1

这似乎和{设置this.state一样糟糕（如果不是更糟）。您应该只通过setState更新您的状态，因为您冒着以后更新的风险，否则会覆盖您的更改。

更好的解决方案是使用componentWillReceiveProps(nextProps)生命周期钩子 - 文档说：

如果您需要更新状态以响应prop更改（例如，重置它），您可以比较this.props和nextProps并使用此方法中的this.setState（）执行状态转换。

听起来和你想做的完全一样！

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

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

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

1 个答案: