Преждевременная оптимизация — корень всех зол. ©
Перед тем, как рассуждать о производительности, настоятельно рекомендуется прочитать Optimization.guide.
Для начала стоит вспомнить, что виртуальный DOM — это уже оптимизация, которая позволяет React из коробки работать достаточно быстро, чтобы вы могли вообще не задумываться о производительности долгое время.
В общих чертах, React работает так:
— Монтирование вызывает рендеринг приложения.
— Получившийся DOM вставляется в реальный DOM целиком, так как там еще ничего нет. Виртуальный DOM сохраняется внутри React для последующего обновления.
— Изменение состояния приводит к вычислению нового виртуального DOM.
— Вычисляется разница между старым виртуальным DOM и новым.
— Разница применяется к реальному DOM.
⏩Согласование
Когда происходит изменение в состоянии компонента, запускается механизм «согласование» (reconciliation), который вычисляет разницу между прошлым состоянием и новым. С алгоритмической точки зрения происходит поиск отличий в двух деревьях. В общем случае алгоритм, выполняющий это вычисление, работает со сложностью O(n³).
Для решения этой проблемы React настоятельно просит для всех элементов списков использовать атрибут
key, который не меняется для конкретного элемента списка. Подобное требование позволяет оптимизировать работу алгоритма, уменьшив сложность до О(n).⏩Пропсы по умолчанию
Первая засада ожидает при неправильной работе со свойствами по умолчанию, пример кода на изображении.
Вроде безобидный код, но вызов
[] каждый раз генерирует новый объект (при условии что options равен false). Проверяется это легко: [] === [] будет ложным. То есть данные не поменялись, но <Cell> будет отрисован заново.Вывод: используйте встроенный механизм для свойств по умолчанию.
📎 Читать подробнее
@react_tg