在React应用中，数组是常见的state类型，它们通常用于表示列表数据。正确地更新数组状态对于避免性能问题和bug至关重要。本文将深入探讨如何在React中更新state中的数组，包括添加、删除、修改元素，以及更新数组内部的对象。
不可变性原则
在React中，state中的数组应该被视为不可变的。这意味着我们不应该直接修改数组，而是应该创建一个新的数组副本来更新state。
技巧：
- 使用数组展开运算符
...来创建新数组。 - 使用数组的非变异方法，如
map、filter和slice。
示例：
const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);
function addItem(item) {
// 使用展开运算符添加新元素
setItems([...items, item]);
}
注意事项：
- 避免使用会改变原数组的方法，如
push、pop、splice。 - 使用
slice而不是splice，因为slice不会改变原数组。
正确代码：
function removeItem(index) {
// 使用filter创建不包含特定索引的新数组
setItems(items.filter((_, i) => i !== index));
}
错误代码：
function removeItem(index) {
items.splice(index, 1); // 错误：直接修改了原数组
setItems(items);
}
更新数组中的元素
当需要更新数组中的某个元素时，我们可以使用map方法来创建一个新数组，并在其中替换特定的元素。
技巧：
- 使用
map方法遍历数组，并返回一个新数组。 - 在
map回调中，根据条件替换或保留元素。
示例：
const [counters, setCounters] = useState([0, 0, 0]);
function incrementCounter(index) {
// 使用map来创建新数组并递增特定索引的计数器
setCounters(counters.map((counter, i) => i === index ? counter + 1 : counter));
}
注意事项：
- 确保
map方法中的回调函数返回新值或原始值。 - 不要在
map回调中直接修改原数组的元素。
正确代码：
setCounters(counters.map((counter, i) => i === index ? counter + 1 : counter));
错误代码：
counters[index]++; // 错误：直接修改了原数组
setCounters(counters);
使用Immer简化数组更新
Immer是一个帮助你以不可变的方式更新复杂state的库。它允许你编写看似直接修改state的代码，但实际上它会为你处理不可变更新。
技巧：
- 使用Immer的
produce函数来处理state更新。 - 在
produce的回调中，你可以直接修改draft对象，而Immer会为你生成新的不可变状态。
示例：
import { useImmer } from 'use-immer';
const [items, updateItems] = useImmer(['Apple', 'Banana', 'Cherry']);
function addItem(item) {
updateItems(draft => {
draft.push(item); // 在Immer中，可以直接使用push
});
}
注意事项：
- 确保你的环境支持Proxy，因为Immer依赖于它。
- 使用Immer时，可以直接使用那些通常会修改原数组的方法。
不可变性是React状态管理的核心原则之一，它能够帮助你避免许多潜在的问题，如性能下降和bug的产生。
原文链接：https://juejin.cn/post/7341235774903730185 作者：辰火流光
