当我更新数组时，我应该每次都复制数组吗?

Question

const [items, setItems] = useState([]);
const updateItem = (updatedItem) => {
setItems(items.map((item) => {
if (item.id === updatedItem.id) return updatedItem;
return item;
});
};

为了触发重新渲染，我像示例一样更新一个数组。

我不认为这是有效的，因为当一个项目需要更新，整个数组被复制。如果条目的长度是100,000，更新一个条目，它会复制所有的条目，对吧?

是不可避免的吗?

要添加一个项，我可以编写如下代码:

const addItem = (newItem) => {
setItems(items.concat(newItem)); // instead of [...items, newItem]
}

我不是百分之百肯定，但我认为这可能更有效率。

我怎样才能避免不必要的工作?

Answer 1

简短的回答——没有简单的选项，当我们谈论React性能时，这不是一个瓶颈。

长答案- React需要知道数据何时更改。出于性能考虑，我们决定检查对象和数组的链接是否相等。如果链接是相同的，则没有数据更改。

想象一下相反的情况——你有一个复杂的对象，你在某个地方改变了一个属性。现在需要递归地遍历树并比较每个值，包括其他对象。

然而，如果你关心React的性能-你应该看看重新渲染优化。这是性能问题的主要原因。

Answer 2

1. 所有比较函数都必须遍历所有数组，因此没有更好的优化
2. 如果你不使用诸如react-window或virtuoso之类的虚拟化列表，那么在数组中拥有100000个条目可能会非常糟糕