列表大小更改时，如何避免重新安装列表反应组件？

Question

我有一个物品清单。数据存储在redux中。每个项目确实获取数据（http调用），并且已装入项目组件。 在每个项目中，我都可以删除该项目。

我的问题是，当我删除一个项目时，列表会重新呈现（由于大小更改），重新安装每个项目，使每个项目都进行新的http调用。

有什么方法可以防止重新安装？

Answer 1

您无需为此使用React.Memo或React.PureComponent。当组件位于要从中删除其他项目的列表中时，不应卸载这些组件，如果发生这种情况，则表明您的问题出在管理和更新列表的方式上。

Here's a quick code sandbox演示了这一点-我为console.log添加了一个componentDidMount至{{1}}，如果打开控制台，您会看到它只被其中的每个项目调用一次启动。当您移除物品时，其他物品会保持固定状态。

Answer 2

使用React.Memo或React.PureComponent对孩子的道具进行较浅的比较，并且仅在props实际变化时重新渲染

Answer 3

对于您的用例，KEYS 是 REACT 的最佳功能，您可以继续使用。

参考：

https://reactjs.org/docs/reconciliation.html#keys

https://reactjs.org/docs/lists-and-keys.html#keys