PureComponent

React.PureComponent это немного прокачанный React.Component, имеющий базовую реализацию метода shouldComponentUpdate().

При каждом изменении PureComponent проводит поверхностное сравнение пропсов и состояния. Если видимых изменений нет, перерендер не происходит.

#компоненты #документация #оптимизация #purecomponent

Оптимизация производительности

Документация утвержает, что React сам по себе довольно умный и производительный. Однако мы можем еще сильнее его ускорить с помощью некоторых действий.

👉 Использование production-сборки

Советы по настройке сборки для разных инструментов есть в документации: https://ru.reactjs.org/docs/optimizing-performance.html

👉 Анализ производительности с помощью Profiler

Краткий обзор компонента Profiler был в предыдущем посте.

👉 Виртуализация длинных списков

Использование метода "оконного доступа" предполагает, что все элементы списка не рендерятся сразу же. На экран выводятся только те элементы, которые пользователь может видеть в данный момент. Это улучшает производительность.

👉 Избежание ненужных согласований

Не каждое изменение пропсов или состояния требует рендерить компонент заново. Чтобы избежать ненужных перерисовок, используйте метод shouldComponentUpdate или наследуйте компонент от PureComponent, который предоставляет базовую реализацию этого метода.

#документация #оптимизация #profiler #purecomponent

PureComponent и иммутабельность данных

Мы уже говорили о том, что класс PureComponent предоставляет базовую реализацию метода shouldComponentUpdate.

Важно понимать, что в этой реализации проводится поверхностное сравнение пропсов и полей состояния. Это значит, что если в состоянии у вас был массив, и вы добавили в него новый элемент с помощью метода push, сам массив остался тем же самым. Следовательно, PureComponent посчитает, что изменений не было, и не обновит представление.

Чтобы этого не произошло, используйте иммутабельные структуры данных. Например, вместо метода push для добавления элемента в массив следует использовать concat или синтаксис расширения массивов (оператор ...). Результатом этих операций будет новый массив, и PureComponent заметит изменение.

#ошибки #purecomponent #оптимизация #документация

Список тегов для более удобного поиска постов

👉 Основные понятия

#компоненты
#jsx
#жизненныйциклкомпонента
#виртуальныйdom
#состояние
#обработкасобытий
#потокданных
#ключи
#формы
#рефы
#hoc
#рендерпропсы
#контекст
#порталы
#хуки
#concurrentmode

👉 Управление состоянием

#управлениесостоянием
#redux
#mobx
#recoil

👉 Работа с ошибками

#обработкаошибок
#предохранители
#отладка
#проверкатипов
#typescript
#строгийрежим

👉 Оптимизация

#оптимизация
#profiler
#ленивыекомпоненты
#purecomponent

👉 Тестирование

#тестирование
#jest
#testinglibrary

👉 Серверный рендеринг

#серверныйрендеринг

👉 Стилизация

#стили
#styledcomponents
#jss
#radium
#shadowdom

👉 Распространенные задачи

#валидацияформ
#роутинг
#обменданными
#rtkquery

👉 Прочее

#документация - материалы из официальной документации
#ссылки - полезные ссылки
#началоработы - базовые знания, необходимые для начала работы
#паттерны - хорошие практики работы с React
#примерыкода - реальные примеры кода для изучения
#важно - моменты, на которые нужно обратить внимание
#ошибки - частые ошибки новичков в React
#вопросы
#подкапотом - невидимая часть React
#подключение - подключение React, а также дополнительных пакетов
#инструменты - полезные инструменты для разработки
#доступность
#проект - организация файлов и другие вопросы уровня целого проекта
#api
#безопасность
#отложено - аспекты уже пройденных тем, временно отложенные

Новые теги

#rtkquery
#обменданными

Полный список тегов: https://t.me/react_junior/84