React状态对象的不可变更新：是否为强制要求？

你当前的写法虽然看似能触发父组件重渲染，但实际上埋下了不少隐患。React之所以强制要求不可变更新，核心原因在于它的状态管理机制完全依赖引用变化来追踪更新，以下是直接修改状态再触发重渲染的几个关键陷阱：

1. 子组件优化失效，导致UI不一致 #

当你直接修改person.artwork的属性，再通过{...person}创建新的外层对象时，person.artwork的引用其实没有改变。如果有子组件接收artwork作为props，并且用React.memo做了浅比较优化，子组件会认为props没有变化，不会重新渲染，最终导致子组件显示的内容和父组件状态不一致。

代码示例 #

import { useState, memo } from 'react';

// 用React.memo优化的子组件
const ArtworkInfo = memo(({ artwork }) => {
  console.log('ArtworkInfo 渲染');
  return <p>作品标题：{artwork.title}</p>;
});

export default function App() {
  const [person, setPerson] = useState({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
    }
  });

  // 错误写法：直接修改深层属性再更新外层
  const handleWrongChange = (e) => {
    person.artwork.title = e.target.value;
    setPerson({...person});
  };

  // 正确写法：不可变更新
  const handleCorrectChange = (e) => {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        title: e.target.value
      }
    });
  };

  return (
    <div>
      <input 
        type="text" 
        value={person.artwork.title} 
        onChange={handleWrongChange}
        placeholder="错误写法输入"
      />
      <input 
        type="text" 
        value={person.artwork.title} 
        onChange={handleCorrectChange}
        placeholder="正确写法输入"
      />
      <ArtworkInfo artwork={person.artwork} />
    </div>
  );
}

测试时会发现：用错误写法输入时，ArtworkInfo不会打印“渲染”，显示的标题也不会更新；而正确写法输入时，子组件会正常渲染并同步更新内容。

2. 并发渲染下的竞态条件 #

React的并发模式（比如useTransition、useDeferredValue）允许中断和恢复渲染，直接修改状态会导致状态被意外覆盖。因为直接修改的是同一个引用，当多个更新操作同时进行时，后执行的修改会覆盖先执行的，而不可变更新是基于当前最新的状态快照，能避免这个问题。

代码示例 #

import { useState, useTransition } from 'react';

export default function App() {
  const [person, setPerson] = useState({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
    }
  });
  const [isPending, startTransition] = useTransition();

  // 错误写法：直接修改状态
  const handleWrongUpdate = () => {
    // 模拟两个异步操作同时修改title
    setTimeout(() => {
      person.artwork.title = 'First Update';
      setPerson({...person});
    }, 500);

    setTimeout(() => {
      person.artwork.title = 'Second Update';
      setPerson({...person});
    }, 1000);
  };

  // 正确写法：不可变更新
  const handleCorrectUpdate = () => {
    startTransition(() => {
      setTimeout(() => {
        setPerson(prev => ({
          ...prev,
          artwork: {
            ...prev.artwork,
            title: 'First Update'
          }
        }));
      }, 500);

      setTimeout(() => {
        setPerson(prev => ({
          ...prev,
          artwork: {
            ...prev.artwork,
            title: 'Second Update'
          }
        }));
      }, 1000);
    });
  };

  return (
    <div>
      <button onClick={handleWrongUpdate}>错误写法更新</button>
      <button onClick={handleCorrectUpdate}>正确写法更新</button>
      {isPending ? <p>更新中...</p> : <p>当前标题：{person.artwork.title}</p>}
    </div>
  );
}

错误写法中，两个定时器修改的是同一个person.artwork引用，最终标题会直接变成“Second Update”，第一个更新的效果被完全覆盖；正确写法中，每个setPerson都基于前一个状态快照更新，能保证更新的顺序和正确性。

3. 调试与时间旅行功能失效 #

React DevTools的时间旅行功能（回溯历史状态）依赖状态的不可变性。如果直接修改状态，历史状态会被污染——因为你修改的是同一个对象引用，回溯时看到的状态已经是被修改后的版本，无法还原到之前的真实状态，给调试带来极大困难。

总结 #

虽然直接修改状态再创建外层新对象的写法能触发父组件重渲染，但它破坏了React状态管理的核心原则——不可变性，会引发UI不一致、竞态条件、调试困难等问题。遵循不可变更新的方式，虽然代码看起来冗长，但能保证状态的可预测性，让React的更新机制正常工作，同时也能配合各种优化手段（如React.memo、useMemo）提升应用性能。

内容的提问来源于stack exchange，提问作者Ayush Raj