高效使用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&nbsp;- 对整个组件做同样的事情reselect&nbsp;- 道具也是一样。