#reactjs #redux #redux-toolkit
Вопрос:
Я работаю над сложным react / redux / @reduxjs/toolkit приложением, в котором много вложенных (друг на друга) функциональных компонентов реакции (я использую крючки, и я новичок в redux)
Я заметил чрезмерное количество рендеринга этих вложенных компонентов для наименьшего/атомарного обновления данных. В качестве примера у меня есть сетка , внутри которой много столбцов и строк. Сеточная модель (данные) представляет собой своего рода массив каждой из ее строк :
[
{rowId:'001', values:{col1Id:val1, col2Id:val2, col3Id:val3}},
{rowId:'002', values:{col1Id:val4, col2Id:val5, col3Id:val6}}
]
Когда я обновляю одно из значений ячейки сетки, весь компонент сетки отображается много раз, как следствие! Сетка, которую я использую, является сторонним компонентом, который нуждается в большей стабильности там, где он используется. Сейчас у меня возникают некоторые функциональные проблемы из-за этих многочисленных визуализаций.
Чтобы попытаться лучше понять поведение redux, я создал этот codesandbox (который основан на примере задачи @reduxjs/toolkit).
Когда редактируется метка задачи , я также заметил, что TodoList она также отображается целиком (см. Журналы на консоли, как на этом скриншоте).
В моем приложении я попытался использовать memo крючок react, чтобы уменьшить количество рендерингов моего компонента сетки (так же, как shouldComponentUpdate метод жизненного цикла react), но он не работает, так как, похоже, весь набор пользователей в моем приложении также визуализируется (его родительский элемент также повторно визуализируется).
Я хочу знать , почему вместо этого отображается не только соответствующий компонент (если будет работать только сетка, а не кто-либо из ее предков memo ). Если изменяется только значение ячейки , почему, по крайней мере, отображается только компонент сетки и ничего больше?! Есть ли способ оптимизировать эти визуализации ?
Ответ №1:
Да, путем хранения массива идентификаторов (необходимых для рендеринга TodoList ) и фактических значений (необходимых для ListItem s) отдельно.
В главе учебника «Производительность и нормализация данных» подробно рассматривается эта тема.