React状态更新机制与不可变性：避免直接修改数组或对象状态

在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函数中：

1. let newArray = localArray; 并没有创建一个新的数组，而是让newArray变量指向了localArray所引用的同一个数组对象。
2. newArray[Number(name)] = value; 实际上是直接修改了localArray引用的原始数组。
3. 当调用setLocalArray(newArray)时，React会比较当前的localArray状态和传入的newArray。由于它们指向的是同一个数组对象，React的浅比较机制会判断状态没有变化，因此不会触发组件的重新渲染。

这就是为什么在用户输入后，

Figma

Figma 是一款基于云端的 UI 设计工具，可以在线进行产品原型、设计、评审、交付等工作。

1371

查看详情

{localArray[0]}

正确实践：通过创建新副本更新状态

为了确保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组件能够响应状态变化并正确地重新渲染，从而构建出更稳定和可预测的用户界面。

以上就是React状态更新机制与不可变性：避免直接修改数组或对象状态的详细内容，更多请关注php中文网其它相关文章！