避免在 React 中重新渲染子组件答案

【问题标题】：Avoid Re-Rendering Child Components in React避免在 React 中重新渲染子组件
【发布时间】：2018-06-08 18:29:35
【问题描述】：

在我的 react 应用程序中，我正在渲染方法中渲染一个项目列表，每个项目都有其唯一且确定的键。但是，每当调用 render 时，都会再次调用每个项目的构造函数，从 DOM 中删除旧项目并添加一个新项目。为什么会这样？如何使每个子组件不会重新渲染？

<Rect key={`${i}-${j}-rect`} ...

我认为为每个项目提供唯一键可以防止这种情况发生，但列表中的每个项目仍在重新渲染。

【问题讨论】：

标签： reactjs

【解决方案1】：

没关系，原来我没有正确分配键。我将密钥更改为唯一标识符（在本例中为每个数据点的日期），现在每次调用 render 时都不会处理孩子。确保在为组件分配键时尽量避免使用数组索引。

【讨论】：

【解决方案2】：

这就是我要告诉你的。大概就是这样。如果它们具有相同的键，则仅应重新呈现列表中的项目

【讨论】：