React--- 状态更新：何时需要拷贝，何时不需要？

遵从javascript的机制，基本类型不需要，引用类型需要

一、必须拷贝后更新的类型（引用类型）

1. 数组、对象（含多维数组、嵌套对象）

原因：它们属于引用类型，变量储存的是内存地址（存的是引用），而非实际值

javascript 复制代码

如 arr[0] = 100 或者 obj.name = 'xxx'

这样子直接修改，react不会触发更新；只有拷贝成新引用才会触发更新！

举例如下：

1. 数组拷贝示例

javascript 复制代码

const [list, setList] = useState([1,2,3]);
// 正确：拷贝后更新（生成新引用）
const handleUpdate = () => {
  const newList = [...list]; // 拷贝
  newList[0] = 100;
  setList(newList);
};
// 错误：直接修改，无更新
const handleError = () => {
  list[0] = 100;
  setList(list); // 引用未变，不渲染
};

2. 对象拷贝示例

javascript 复制代码

const [user, setUser] = useState({name:'coco'})
// 正确拷贝
const handleupdate = ()=> {
    cosnt newUser = {...user} // 扩展运算符实现浅拷贝
    newUser.name = 'cocoli'
    setUser(newUser) // 最终更新对象最新数据
}

3. 特殊场景：React.useRef 中的引用类型

如果 ref 存储的是数组 / 对象，修改时虽不触发重渲染，但为了数据一致性，也建议拷贝后更新（避免原数据被意外污染）。

二、无需拷贝的类型（基本数据类型）

数字、字符串、布尔值、null、undefined等基本数据类型直接赋值即可！

原因：它们存储的是实际值，而非引用；更新直接赋值，react会识别到值的变化，无需拷贝！

javascript 复制代码

const [count, setCount] = useState(0);
const [name, setName] = useState('张三');
// 直接更新，无需拷贝
const handleUpdate = () => {
  setCount(count + 1); // 新值是 1，直接替换
  setName('李四'); // 新值是字符串，直接替换
};

特殊情况：基本类型的「包装对象」（极少用）

如 new Number(1)、new String('a') 虽为对象，但实际开发中几乎不用，React 中更新逻辑同基本类型。

总结

1. 需要拷贝更新 ：数组、对象（含嵌套 / 多维），原因是引用类型需生成新引用让 React 检测到状态变化；

2. 无需拷贝更新 ：数字、字符串、布尔值等基本类型，原因是基本类型存储实际值，直接赋值新值就能被 React 识别；

核心原则：React 靠「引用对比」判断引用类型状态变化，靠「值对比」判断基本类型状态变化。