高效使用map函数渲染多个React组件

Question

我正在编写一个 React 应用程序，它负责渲染许多表，其中包含许多步骤，其中包含许多嵌套条件表（如果，则）。这些表的数据位于我存储在 Redux 中的 JSON 文件中。我开始使用 map 函数渲染所有表 (6)，效果很好；但是，在每个 Table 组件中，我都有一个映射步骤的函数（每个表 6-28）。当我这样做时，React 开始需要大约 13 秒才能将组件渲染到屏幕上。我已经使用 shouldComponentUpdate 来确保表格和表格步骤不会不必要地多次渲染，但它仍然很慢。在 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

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

我希望它对你有用。

您可以使用react-virtualized记忆您的大数据/表格/卷轴。

• React.memo - 对整个组件做同样的事情

• reselect - 道具也是一样。