react如何修改数组

修改数组的方法

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

添加元素

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

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

删除元素

使用filter方法过滤掉不需要的元素：

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

更新元素

使用map方法遍历并修改特定元素：

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

插入元素

使用扩展运算符在特定位置插入元素：

const newArray = [
  ...oldArray.slice(0, index),
  newItem,
  ...oldArray.slice(index)
];

排序数组

使用sort方法创建排序后的新数组（注意需先复制原数组）：

const newArray = [...oldArray].sort((a, b) => a.value - b.value);

注意事项

在React中使用useState或useReducer管理数组状态时，必须通过setter函数传递新数组而非直接修改：

const [array, setArray] = useState([]);
// 正确做法
setArray(prevArray => [...prevArray, newItem]);
// 错误做法（直接修改）
array.push(newItem);
setArray(array);

性能优化

对于大型数组操作，考虑使用useMemo缓存计算结果：

const processedArray = useMemo(() => 
  bigArray.map(item => heavyComputation(item)), 
[bigArray]);