在React开发中，直接修改状态中的数组或对象（引用类型）会导致组件无法正确重新渲染，因为React的浅比较机制无法检测到引用地址的变化。解决此问题的关键在于始终创建状态的新副本进行修改，而不是直接操作现有状态，从而确保React能识别到状态更新并触发视图刷新。
理解React的状态更新与重新渲染
React组件的UI更新依赖于其状态或属性的变化。当调用useState的setter函数时，React会调度一次重新渲染。然而，React并非简单地每次都重新渲染整个组件树，而是会进行高效的比较，判断哪些部分需要更新。对于引用类型（如数组和对象），React默认采用浅比较（shallow comparison）来判断状态是否发生变化。这意味着它只检查新旧状态的引用地址是否相同，而不会深入比较其内部内容。
如果一个数组或对象状态被直接修改，例如通过array.push()或object.property = value，即使其内部内容发生了变化，其内存地址（引用）却保持不变。当setArray(array)被调用时，React会发现新旧array变量指向的是同一个内存地址，因此认为状态没有改变，从而跳过重新渲染过程。这就是为什么在示例代码中，localArray在被修改后，UI却不更新的原因。
错误示例：直接修改引用类型状态
考虑以下场景，我们有一个localArray状态，并尝试直接修改其特定索引的值：
import { useState } from 'react';
function Test() {
const [someState, setSomeState] = useState("");
const [localArray, setLocalArray] = useState(["","","",""]);
const handleArrayChanges = ({ target: { name, value } }) => {
let newArray = localArray; // 错误：这里只是创建了一个对localArray的引用
newArray[Number(name)] = value; // 直接修改了localArray引用的数组
setLocalArray(newArray); // 传入的newArray和localArray引用相同
};
return (
<div>
<h4>Array state</h4>
<textarea name='0' onChange={handleArrayChanges} />
<p> {localArray[0]}</p> {/* 这里的显示不会立即更新 */}
<h4>Some other state</h4>
<button onClick={() => { setSomeState("a"); }}>Update some other state</button>
</div>
);
}
export default Test;在这个handleArrayChanges函数中：
- let newArray = localArray; 并没有创建一个新的数组，而是让newArray变量指向了localArray所引用的同一个数组对象。
- newArray[Number(name)] = value; 实际上是直接修改了localArray引用的原始数组。
- 当调用setLocalArray(newArray)时，React会比较当前的localArray状态和传入的newArray。由于它们指向的是同一个数组对象，React的浅比较机制会判断状态没有变化，因此不会触发组件的重新渲染。
这就是为什么在用户输入后，
{localArray[0]}
中的内容不会立即更新的原因。它只会在其他状态（如someState）更新导致整个组件重新渲染，或者在进行快速刷新（Fast Refresh）时，由于组件被重新挂载而显示正确的值。正确实践：通过创建新副本更新状态
为了确保React能够检测到状态变化并正确重新渲染，我们必须在修改引用类型状态时，始终创建一个新的副本，然后更新这个副本，最后将新副本设置为新的状态。对于数组，最常见和推荐的做法是使用展开运算符（spread operator ...）。
import { useState } from 'react';
function Test() {
const [someState, setSomeState] = useState("");
const [localArray, setLocalArray] = useState(["","","",""]);
const handleArrayChanges = ({ target: { name, value } }) => {
// 正确做法：创建localArray的浅拷贝
let newArray = [...localArray];
newArray[Number(name)] = value; // 修改新数组的元素
setLocalArray(newArray); // 传入一个全新的数组引用
};
return (
<div>
<h4>Array state</h4>
<textarea name='0' onChange={handleArrayChanges} />
<p> {localArray[0]}</p> {/* 现在这里的显示会立即更新 */}
<h4>Some other state</h4>
<button onClick={() => { setSomeState("a"); }}>Update some other state</button>
</div>
);
}
export default Test;通过let newArray = [...localArray];，我们创建了一个localArray的浅拷贝。newArray现在是一个全新的数组对象，拥有与localArray相同的内容，但位于不同的内存地址。当我们修改newArray[Number(name)] = value;时，我们是在修改这个新数组，而不是原始的localArray。最后，调用setLocalArray(newArray)时，React会发现传入的newArray与旧的localArray是不同的引用，从而正确地触发组件的重新渲染，UI也会随之更新。
适用于对象的不可变更新
同样的原则也适用于对象状态的更新。当需要更新对象中的某个属性时，也应该创建对象的新副本：
const [user, setUser] = useState({ name: 'Alice', age: 30 });
const updateUserName = (newName) => {
setUser({
...user, // 展开现有user对象的所有属性
name: newName // 覆盖或添加name属性
});
};总结与最佳实践
- 不可变性原则： 在React中，尤其是在更新数组和对象等引用类型状态时，始终遵循不可变性原则。这意味着不要直接修改现有状态，而是创建其副本，然后修改副本并用新副本更新状态。
-
浅拷贝方法：
- 数组： 使用展开运算符 [...originalArray] 或 originalArray.slice()。
- 对象： 使用展开运算符 {...originalObject} 或 Object.assign({}, originalObject)。
- 深拷贝考量： 如果数组或对象中包含嵌套的引用类型，并且需要修改这些嵌套的引用类型，那么简单的浅拷贝可能不足以满足需求。在这种情况下，您可能需要进行深拷贝（例如使用JSON.parse(JSON.stringify(originalObject))或专门的深拷贝库，但需注意性能和限制）。然而，对于大多数React状态管理，浅拷贝结合不可变更新模式已足够。
- 避免副作用： 遵循不可变性不仅有助于React的渲染机制，还能避免难以追踪的副作用，使代码更易于理解和维护。
通过养成创建新副本进行状态更新的习惯，您可以确保React组件能够响应状态变化并正确地重新渲染，从而构建出更稳定和可预测的用户界面。
