React函数式组件中浅拷贝数组修改对象是否为反模式？

先看你提供的代码，首先有个小笔误：setPersons(newPerson)应该是setPersons(newPersons)，这个得先修正，不然代码会直接报错。

接下来逐个回答你的核心问题：

1. 这种实现是否违反不可变原则？ #

是的，严格来说违反了。React状态的不可变原则要求不能直接修改状态中的引用类型值——你虽然用[...persons]浅拷贝了数组，但数组里的person对象还是原状态的引用，修改newPersons[i].name本质上是直接修改了原状态里的对象属性，相当于绕开了状态更新的规范。

2. 有没有场景会因此出问题？ #

当然有，最典型的就是依赖旧状态快照的异步逻辑，比如含setTimeout的代码：

假设组件里有这样一段逻辑：

const handleClick = () => {
  // 保存当前状态的快照
  const snapshot = persons;
  setTimeout(() => {
    // 预期这里拿到的是点击时的姓名，但实际会是修改后的值
    console.log("点击时的姓名：", snapshot[0].name);
  }, 1000);
  // 之后执行handleNameChange修改姓名
  handleNameChange("新名字", persons, setPersons, 0);
};

因为snapshot引用的是原数组，数组里的person对象也是原引用，当handleNameChange修改了对象的name属性后，setTimeout里的snapshot[0].name会变成新值，完全不符合“保存快照”的预期，导致逻辑出错。

除此之外，如果你的组件用了React.memo、useMemo或useCallback，依赖的是person对象本身的话，也可能出现意料之外的缓存失效或不更新的问题——因为对象引用没变化，但属性变了，浅比较的依赖判断会出错。

3. [...persons]是不是严格反模式？ #

不能直接说是反模式，但结合直接修改内部对象的操作，它是一种不严谨的实现。在简单场景下（没有异步逻辑、不依赖状态快照），它能正常运行，但代码的健壮性很差，后续加功能很容易踩坑。

4. 要不要改成深拷贝？ #

不需要全数组深拷贝，那样做性能浪费。正确的做法是只拷贝需要修改的单个对象，既遵循不可变原则，又保证性能：

const handleNameChange = (newName, persons, setPersons, i) => {
  const newPersons = persons.map((person, index) => 
    index === i ? { ...person, name: newName } : person
  );
  setPersons(newPersons);
};

如果你的person对象是嵌套的复杂结构（比如{ name: '', address: { city: '' } }），那才需要对嵌套对象做深拷贝，比如用structuredClone：

const handleNameChange = (newName, persons, setPersons, i) => {
  const newPersons = persons.map((person, index) => {
    if (index === i) {
      const updatedPerson = structuredClone(person);
      updatedPerson.name = newName;
      return updatedPerson;
    }
    return person;
  });
  setPersons(newPersons);
};

尽量避免用JSON.parse(JSON.stringify(person))这种方式，它无法处理函数、Symbol、循环引用等特殊情况。

内容的提问来源于stack exchange，提问作者Stefanie Gauss