Реагируйте на лучшие практики, которые помогут вам писать более чистый и качественный код и оптимизировать производительность.

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

1. Используйте компоненты высшего порядка (HOC)

Компонент более высокого порядка — это продвинутая техника в React, которая используется для перезарядки и повторного использования компонентов. Он принимает компонент в качестве аргумента и возвращает что-то еще.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

В то время как компонент преобразует свойства в пользовательский интерфейс, компонент более высокого порядка преобразует компонент в другой компонент.

2. Правильное понимание хука useEffect()

Это одна из важных вещей, потому что если вы этого не понимаете, вы ничего не добьетесь в React. Я не могу особо подчеркнуть опасность этого хука, вы должны правильно понимать этот хук и то, как он связан с хуком usestate(), чтобы не получить много бесконечных циклов. Мне нравится думать об этом хуке как о промежуточном программном обеспечении, которое запускается после первоначального рендеринга компонента, я мог бы рассказать об этом больше, но это статья для другого дня, если вы хотите ее прочитать, следуйте за мной.

3. Ленивая загрузка изображений в React

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

4. Разделение кода в React с помощью динамического import()

По умолчанию приложения React отображают свой окончательный пакет в одном гигантском файле, хорошая сторона этого заключается в том, что он уменьшает HTTP-запрос, который мы можем делать для разных файлов, но по мере того, как ваше приложение становится больше, размер файла увеличивается, это становится серьезной проблемой. С разделением кода React позволяет нам разделить большой файл пакета на несколько фрагментов с помощью динамического импорта () с последующей ленивой загрузкой этих фрагментов, когда они нам нужны, с помощью React.lazy.

5. Создавайте собственные хуки

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

6. Баунс

Также важно понимать следующее:

  1. Нестандартные крючки
  2. Правила хуков React
  3. Реагировать на фрагменты
  4. React контекст и API контекста
  5. Реакт-портал
  6. Правила JSX
  7. Рефы и ДОМ

В заключение

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.