Question

更新

我面临的问题不在于组件重新渲染。我已经通过使用shouldComponentUpdate并检查更新的组件的ID与当前组件的ID进行了处理。我的问题特别与表格和步骤的初始负载有关。

最终更新

问题是由CKEditor 5在每个步骤的内部渲染造成的。

我正在编写一个React应用程序，该应用程序负责呈现许多带有许多嵌套条件表的表（如果有的话）。这些表的数据位于我存储在Redux中的JSON文件中。我开始使用map函数渲染所有表（6），并且效果很好。但是，在每个Table组件内部，我都有一个映射步骤的函数（每个表6至28个）。当我这样做时，React开始花费大约13秒的时间将组件呈现到屏幕上。

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

map中的data变量包含当前步骤的整个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秒。

Answer 1

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

我希望它对您有用。

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

React.memo-对整个组件执行相同的操作
reselect-与道具相同。

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

1 个答案: