为什么我们使用 spread 运算符或 object.assign

Question

为什么我们使用/建议使用不可变方法来更改状态

例如，为什么人们在更改之前创建状态的副本

例如

this state = {
a: 'apple'
b:'ball'
}

然后更改状态

const copyState = {...this.state} 
copyState.b = bunny 
this.setState({...copyState})

比如，为什么不只是

this.setState({b:bunny})

Answer 1

因为在 React 中使用状态是完全功能的过程。这意味着状态是不可变的。如果你写this.setState({b: 'bunny'})并打印出来this.state它只会打印出b: bunny，而不是a: 'apple'。

您的示例也可以简化。您可以编写以下内容，而不是将copyState变量分配给对象：

this.setState({
...this.state,
b: 'bunny',
})

TLDR; 您不能向状态添加值，它是只读的。您需要重新分配状态。

Answer 2

假设您有一个用于编辑用户的表单。通常创建单个更改处理程序来处理对所有表单字段的更改。它可能看起来像这样：

updateState(event) {
const {name, value} = event.target;
let user = this.state.user; // this is a reference, not a copy...
user[name] = value; // so this mutates state ?
return this.setState({user});
}

问题在第 4 行。第 4 行实际上改变了状态，因为用户变量是对状态的引用。反应状态应被视为不可变。

切勿直接更改 this.state，因为之后调用 setState() 可能会替换您所做的更改。将 this.state 视为不可变的。

为什么？

• setState 批处理在后台工作。这意味着在处理 setState 时，可能会覆盖手动状态更改。
• 如果声明 shouldComponentUpdate 方法，则不能在内部使用 === 相等性检查，因为对象引用不会更改。因此，上述方法也具有潜在的性能影响。

底线：上面的示例通常工作正常，但为了避免边缘情况，请将状态视为不可变。

来源：在 React 中处理状态：要考虑的四种不可变方法

Answer 3

简短的回答是避免奇怪的错误，这会导致组件难以优化。

React 组件根据对 props 和状态的更新刷新或重新渲染视图。 setState 确保根据对状态的更改重新呈现组件。如果我们直接开始改变状态，然后调用 setState，我们最终可能会丢失组件刷新。

有关详细说明，您可以查看 - https://daveceddia.com/why-not-modify-react-state-directly/