Обновление
Проблема, с которой я сталкиваюсь, не связана с перерисовкой компонентов.Я уже имею дело с этим, используя shouldComponentUpdate и проверяя идентификатор обновленного компонента по сравнению с идентификатором текущего компонента.Мои вопросы, в частности, связаны с начальной загрузкой таблицы и шагами.
Окончательное обновление
Проблема была вызвана тем, что CKEditor 5 отображался внутрикаждый шаг
Я пишу приложение React, которое отвечает за рендеринг множества таблиц с множеством шагов внутри них со множеством вложенных условных таблиц (если, то).Данные для этих таблиц находятся внутри файла JSON, который я храню в Redux.Я начал рендерить все таблицы (6) с помощью функции map, и это прекрасно работало;однако внутри каждого из компонентов таблицы у меня есть функция, которая отображает шаги (6-28 для таблицы).Когда я сделал это, React начал отображать компоненты на экране примерно за 13 секунд.
Я использовал shouldComponentUpdate, чтобы убедиться, что таблица и шаги в таблице не выполняются без необходимости рендеринга более одного раза, но все ещеочень медленно.В компоненте Table я вызываю функцию, которая отображает JSON для отображения каждого из компонентов Step внутри моего метода render.
Переменная данных в карте содержит всю структуру 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 секунд.