React中向状态添加对象的更简便方法及标准写法原因解析

首先得明确React原生useState和Zustand的set函数核心逻辑差异：

1. React状态的不可变性与useState的更新逻辑 #

React要求状态必须是不可变值，直接修改原状态（比如artists.push()）会导致两个问题：

• 原数组的引用没有变化，React无法检测到状态更新，组件不会触发重渲染；
• 违反不可变原则会导致状态追溯、调试变得困难，还可能引发意料之外的bug。

而useState的更新函数是完全替换状态，不是合并：

• 如果你存的是数组状态，调用setArtists时必须传入完整的新数组。使用[...artists, newItem]就是创建了一个包含旧元素和新元素的新数组，既遵守了不可变性，又让React能检测到状态变化。
• 对比Zustand：它的set函数内部封装了状态合并逻辑，针对的是单一的状态对象，所以你只需要传入变化的部分，它会自动和原状态浅合并。但React的useState是针对独立的状态片段设计的，它不知道你要对数组执行追加、过滤还是替换操作，所以必须由开发者明确生成新的状态值。

2. 更简便的实现方式 #

函数式更新（更可靠） #

当新状态依赖旧状态时，推荐用函数式更新，避免闭包导致的旧状态引用问题：

setArtists(prevArtists => [...prevArtists, { id: nextId++, name: name }]);

封装自定义Hook #

如果频繁处理数组状态，可以封装一个useArray Hook来简化操作：

function useArray(initialValue) {
  const [array, setArray] = useState(initialValue);

  const push = (item) => {
    setArray(prev => [...prev, item]);
  };

  // 可扩展其他数组操作：removeById, update等
  return { array, push };
}

// 使用示例
const { array: artists, push: pushArtist } = useArray([]);
pushArtist({ id: nextId++, name: name });

3. 为什么现有写法是标准？ #

这种扩展运算符的写法是React社区的标准，原因在于：

• 完全符合不可变状态的要求，逻辑清晰直观；
• 适用于所有数组更新场景（追加、插入指定位置、替换部分元素等），通用性强；
• 不需要额外依赖，原生语法即可实现，学习成本低。

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