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 的最佳实践，确保数组修改既能保持不可变性，又能触发正确的组件更新。
