🔥 3 лучших приема React Pro, которые 😎 любят использовать для уменьшения размера компонента

Не позволяйте вашему компоненту React стать Франкенштейном

Содержание

• Введение
• 1. Сила пространств имен
• 2. Разделение на подкомпоненты и совместное использование состояния
• 3. Пользовательские хуки для масштабирования и удобочитаемости
• Заключение
• Ссылка на Github
• Подробнее

вступление

Это всегда начинается с чего-то малого, затем вы воодушевляетесь, и оно перерастает во что-то большое, а позже вы теряете контроль. Здесь мы говорим о компонентах реакции. Когда я начал изучать React, это было главной проблемой, как избежать взрыва компонента 🤯 с кучей функций, JSX и конфигурацией. В этой статье мы возьмем в качестве примера один из компонентов пользовательского интерфейса — компонент таблицы — и попробуем оптимизировать его, используя 3 приема, которые позволят нам масштабироваться как профессионалы 😎.

Компонент таблицы будет иметь несколько функций, которые впоследствии могут быть расширены:

• Получите заголовки и строку в качестве параметра и отобразите таблицу
• Получите сортировщики в качестве параметра, чтобы определить, какой заголовок сортируется
• Переключение заголовка таблицы отсортирует его по ASC и DESC.

Наше приложение будет выглядеть так:

И изначально табличный компонент будет выглядеть вот так, а позже мы его оптимизируем:

1. Сила пространств имен

Для компонентов React очень часто увеличивается количество типов (интерфейсов, перечислений) и констант. Первый метод, который мы можем использовать, — это пространства имен. Это наш конфигурационный файл, в котором могут храниться наши константы, типы и даже чистые вспомогательные функции, так как нет необходимости держать его внутри компонента. Давайте посмотрим на это поближе:

Затем мы можем обновить тип реквизита компонента таблицы:

...
import { TableConfig } from './TableConfig'
const Table: FunctionComponent<TableConfig.TableProps> = ({
...

2. Разделение на подкомпоненты и совместное использование состояния

На данный момент мы знаем, куда мы можем переместить наши типы, константы и вспомогательные функции. Далее разберемся, что делать с подкомпонентами. Маленькие дочерние компоненты, на которые мы разделяем наши основные большие компоненты. Есть 2 вещи, которые следует учитывать:

1. Всегда создавайте дочерние компоненты вне тела основного компонента: либо в том же файле, либо в других файлах. В противном случае возникнет проблема с производительностью, и каждый раз при обновлении состояния будут создаваться дочерние компоненты.
2. Используйте context, если вы хотите поделиться состоянием основного компонента, чтобы избежать перегрузки свойств.

Посмотрим, как это выглядит на примере:

3. Пользовательские хуки для масштабирования и удобочитаемости

Хорошо, мы можем масштабировать типы, JSX, и у нас есть последний элемент, который нужно переместить, и это наше состояние и методы, которые имеют дело с состоянием. Нет лучшего решения, чем просто переместить их на кастомный хук, давайте посмотрим, как это выглядит:

Заключение

Нам удалось уменьшить размер компонента почти на 40%, мы можем сделать еще больше, если переместим наш дочерний компонент из файла. Надеюсь, вы уловили идею и чувствуете себя более уверенно при масштабировании компонентов. Если сегодня вы узнали что-то новое, 👏 и подпишитесь на блог, чтобы получить больше вдохновения в разработке интерфейса.

Ссылка на гитхаб

Подробнее