В своей предыдущей статье я описал несколько способов предотвращения лишних повторных рендеров в реактивных приложениях. Я сосредоточился на использовании крючков useMemo и useCallback и memo() HOC. Буквально через день была опубликована отличная статья Дэна Абрамова под названием Перед вами памятка (). Сегодня я расскажу, как методы, представленные в его блоге, могут быть применены к проблеме из моей статьи.
Постановка задачи
Начнем с того же кода, который я использовал в своем предыдущем посте. Я использую Fibonacci компонент для моделирования компонента, рендеринг которого требует больших вычислительных ресурсов (и поэтому мы не хотим его повторно рендерить, когда он не требуется).
И так его используют изначально. Обратите внимание, что по умолчанию каждый раз, когда значение text изменяется, компонент Fibonacci будет повторно визуализироваться. Это приводит к ужасному и медленному набору текста.
В прошлый раз эта проблема решалась с помощью React.memo() HOC. На этот раз давайте рассмотрим другие варианты!
Переместить состояние вниз
Мы можем заметить, что компонент Demo является владельцем состоянияtext, однако только его часть интересуется этим состоянием. Давайте выделим эту часть в отдельный компонент!
Рефакторинг был довольно простым. Компонент ControlledText был извлечен и теперь он является владельцем состояния text. Fibonacci компонент не перерисовывается при вводе. Большой!
Шаблон слота
В статье Дэна этот подход назывался Переместить контент вверх и использовалась children prop. На самом деле мы не ограничиваемся children prop. Мы можем использовать любое количество слотов, какое захотим!
Вот как я применил эту технику к своему исходному коду
Пока свойство bottomSlot не изменилось, React не будет его повторно отображать. Огромный успех! Поскольку компонент DemoTemplate побочного эффекта не связан с конкретным компонентом, который должен отображаться в bottomSlot, туда можно внедрить все, что угодно.
Обратите внимание, что слоты вводятся из компонента контейнера, отсюда и название Переместить содержимое вверх.
Я считаю, что паттерн слотов в React - хорошая аналогия паттерну шаблонный метод в ООП. Проверить это!
Резюме
Не существует серебряной пули для оптимизации производительности реакции, поэтому полезно знать пару подходов. React.memo - хороший вариант для начала, но, пожалуйста, не останавливайтесь на достигнутом. Использование альтернативного подхода может улучшить архитектуру вашего кода. Спасибо за чтение, надеюсь, вы узнали что-то новое сегодня!
