为什么在更改或操作React状态时需要克隆它？

Question

我被告知，每当我使用React state或更改它时，应该创建一个克隆或副本。

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

但我不确定为什么有些人建议这样做，为什么我不能直接改变状态？

为什么我不能直接使用它来完成呢？

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

- anny123

---

在您的示例中，您绝对可以使用this.setState({name：'hardik'})，因为React类组件的setState会自动执行浅合并。 - Emile Bergeron

这个回答解决了你的问题吗？为什么我不能直接修改组件的状态呢？（https://dev59.com/PFoU5IYBdhLWcg3wK0pX） - Emile Bergeron

Answer 1

React根据状态是否变化来确定是否重新渲染组件。

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

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

如果您改变了一条状态，比如说通过cloneState.name = "hardik"这样做，由于这是一个突变，状态将引用相等。

当您通过创建一个新对象“克隆”状态时，[...this.state] === this.state是假的，这会触发重新渲染。

- Spencer Bard

---

请问您能解释一下这行代码的意思吗？因为它是一个变异，所以具有引用相等性。 - Alwaysblue

抱歉！引用相等性是检查objectA是否与objectB是同一个对象。因此，如果您有一些代码const objectA = {name: "myname"}和const objectB = {name: "myname"}，尽管这些对象包含相同的信息，但它们不是同一个对象，因此objectA === objectB为false，这意味着它们不是引用相等的，因为它们不指向同一个对象。但是，如果您有const objectA = {name: "myname"}和const objectB = objectA，那么objectA === objectB为true，即使执行类似于objectA.name = "oops"的操作后，objectA === objectB仍然为true。 - Spencer Bard

Answer 2

最好使用useState钩子，要更改状态只需使用setState示例：

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

- Ahroriddin