react如何修改数组

修改 React 数组的常见方法

在 React 中修改数组时，需要遵循不可变性原则，即避免直接修改原数组，而是创建新数组。以下是几种常见场景的解决方案：

添加元素

使用展开运算符或 concat 方法创建包含新元素的新数组：

const newArray = [...oldArray, newItem];
// 或
const newArray = oldArray.concat(newItem);

删除元素

使用 filter 方法返回不包含目标元素的新数组：

const newArray = oldArray.filter(item => item.id !== idToRemove);

更新元素

使用 map 方法遍历数组并修改特定项：

const newArray = oldArray.map(item => 
  item.id === idToUpdate ? {...item, property: newValue} : item
);

在 useState 中的使用

与 React 状态结合时，确保通过 setter 函数传递新数组：

const [array, setArray] = useState([]);

// 添加
setArray(prev => [...prev, newItem]);

// 删除
setArray(prev => prev.filter(item => item.id !== id));

// 更新
setArray(prev => prev.map(item => 
  item.id === id ? {...item, updatedProp: value} : item
));

不可变库的使用

对于复杂操作，可以使用 Immer 等库简化不可变更新：

import produce from 'immer';

setArray(prev => produce(prev, draft => {
  const item = draft.find(i => i.id === id);
  if (item) item.property = newValue;
}));

性能优化

当处理大型数组时，考虑以下优化手段：

• 对于频繁更新，使用 useReducer 代替多个 useState
• 使用 React.memo 避免不必要的子组件重渲染
• 为列表项添加稳定的 key 属性

这些方法遵循 React 的最佳实践，确保数组修改既能保持不可变性，又能触发正确的组件更新。