深入理解React状态管理：为何直接修改数组/对象不触发更新及解决方案

本文深入探讨react/nextjs中状态更新不生效的常见问题，特别是直接修改数组或对象状态导致组件不重新渲染的现象。我们将解释react的浅层比较机制，并提供通过创建状态副本实现不可变更新的正确方法，确保组件按预期响应状态变化，从而避免因状态未更新而引发的ui异常。

在React应用开发中，状态（State）是驱动组件渲染和行为的核心。当组件的状态发生变化时，React会重新渲染组件及其子组件以反映这些变化。然而，对于数组或对象类型的状态，开发者常会遇到一个普遍的陷阱：直接修改现有状态值而非创建新值，导致UI不更新。本文将深入剖析这一问题，并提供基于不可变性原则的解决方案。

React状态更新机制概述

React通过useState或useReducer等Hooks管理组件内部状态。当调用状态更新函数（如setLocalArray）时，React会调度一次重新渲染。在决定是否重新渲染组件时，React会对其前后状态进行比较。对于原始数据类型（如字符串、数字、布尔值），React会进行值比较。但对于非原始数据类型（如数组和对象），React进行的是浅层比较，即比较其内存地址（引用）。

直接修改数组/对象状态的问题

当开发者直接修改一个数组或对象的状态时，例如通过localArray[index] = value这样的操作，虽然数组或对象内部的值确实改变了，但它在内存中的引用地址并未改变。对于React的浅层比较机制而言，新旧状态的引用是相同的，因此React会误认为状态没有发生变化，从而跳过重新渲染过程。这就是为什么在某些情况下，状态看似更新了，但UI却无动于衷，直到其他状态更新或触发快速刷新（Fast Refresh）才得以体现。

考虑以下示例代码，它展示了直接修改数组状态的错误做法：

import { useState } from 'react';

function Test() {
    const [someState, setSomeState] = useState("");
    const [localArray, setLocalArray] = useState(["","","",""]);

    const handleArrayChanges = ({ target: { name, value } }) => {
        let newArray = localArray; // 直接引用了现有数组
        newArray[Number(name)] = value; // 修改了现有数组
        setLocalArray(newArray); // 传入的仍然是同一个数组引用
    };

    return (
        <p>
            <h4>数组状态</h4>
            <textarea name='0' onChange={handleArrayChanges} />
            <p> {localArray[0]}</p>

            <h4>其他状态</h4>
            <button onClick={() => { setSomeState("a") }}>更新其他状态</button>
        </p>
    );
}

export default Test;

登录后复制

在这个例子中，handleArrayChanges函数内部，newArray变量直接引用了localArray。随后的修改操作newArray[Number(name)] = value直接改变了localArray所指向的原始数组。当调用setLocalArray(newArray)时，React发现newArray和localArray指向的是内存中的同一个数组对象，因此它不会触发组件的重新渲染，导致p标签中的内容不更新。

解决方案：遵循不可变性原则

为了正确地触发React的重新渲染，当更新数组或对象类型的状态时，必须创建这些状态的一个全新副本，并在副本上进行修改，然后将这个新副本设置为新的状态值。这种编程范式被称为“不可变性”（Immutability）。通过创建新副本，React在进行浅层比较时会发现新旧状态的引用地址不同，从而正确识别状态变化并触发重新渲染。

标签： react js json 应用开发 常见问题 组件渲染 为什么 red