为什么要在更改状态或进行操作之前克隆反应状态？

Question

有人告诉我，每当我使用反应状态或对其进行更改时，都应该对其进行克隆或复制。

const cloneState = [...this.state]
cloneState.name = 'hardik'

但是我不确定为什么人们会推荐它，为什么我不能直接更改状态？

为什么我不应该只是使用它

this.setState({name: 'hardik'})

Answer 1

React根据状态是否已更改来确定是否重新渲染组件。

它通过测试其引用相等性来确定状态是否已更改。

这意味着它将检查this.state === this.state

如果您要改变一个状态，请说一遍：cloneState.name = "hardik"，因为这是一个突变，所以状态在参考上是相等的。

当通过创建新对象[...this.state] === this.state“克隆”状态为false时，将触发重新渲染。

Answer 2

最好使用useState挂钩，并仅使用setState示例来更改状态：

const [inputValue, setInputValue] = useState ("")
<input value = {inputValue} onChange = {(e) => setInputValue (e.target.value)} />