javascript - 高效地使用 map 函数渲染许多 React 组件

Question

更新

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

---

最终更新

问题是由在每一步中渲染的 CKEditor 5 引起的

---

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

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

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

表格.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 秒。

Answer 1

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

希望对你有用。

您可以使用 react-virtualized 来内存您的大数据/表格/卷轴。

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