高效地使用 map 函数渲染许多 React 组件答案

【问题标题】：Efficiently using map function to render many React components高效地使用 map 函数渲染许多 React 组件
【发布时间】：2019-10-04 01:44:10
【问题描述】：

更新

我面临的问题不是组件重新渲染。我已经通过使用 shouldComponentUpdate 并检查更新组件的 ID 与当前组件的 ID 来处理这个问题。我的问题特别与表格和步骤的初始加载有关。

最终更新

这个问题是由 CKEditor 5 在每个步骤中渲染引起的

我正在编写一个 React 应用程序，该应用程序负责渲染许多表，其中包含许多步骤，其中包含许多嵌套条件表（如果，那么）。这些表的数据位于我存储在 Redux 中的 JSON 文件中。我开始使用地图功能渲染所有表格（6），效果很好；但是，在每个表组件中，我都有一个映射步骤的函数（每个表 6-28 个）。当我这样做时，React 开始需要大约 13 秒来将组件渲染到屏幕上。

我使用了 shouldComponentUpdate 来确保表格和表格步骤不会不必要地渲染多次，但它仍然很慢。在 Table 组件中，我调用了一个映射 JSON 的函数，以在我的渲染方法中渲染每个 Step 组件。

map 中的数据变量包含当前步骤的整个 JSON 结构，包括文本和嵌套条件

Table.js


  renderSteps = () => {
      const steps = this.props.currentDocument.data.items[0].tables[0][this.props.initialTableName].steps.map((data, index) =>
        <Step
          key={data.id}
          tableName={this.props.initialTableName}
          tableID={this.props.tableID}
          stepIndex={index}
          stepID={data.id}
          data={data}
        />
      );
      return steps;
    }
  };

render() {
  return (
        <table>
          <tbody>
            <tr>
              <th>Step</th>
              <th>Action</th>
            </tr>
            {this.renderSteps()}
          </tbody>
        </table>
  )
}

渲染 Table.js 组件的父组件以相同的方式设置。

有没有办法让这个初始加载更快？我知道有很多步骤包含大量数据，但我确信我缺少一些东西来提高渲染性能。

我希望页面加载速度快于 10 到 15 秒。

【问题讨论】：

标签： javascript node.js reactjs ecmascript-6

【解决方案1】：

关于性能优化的非常棒的文章 - Article about performance

希望对你有用。

您可以使用react-virtualized 来记忆您的大数据/表格/滚动。

React.memo - 对整个组件做同样的事情
reselect - 与道具相同。

【讨论】：