Узнайте, как использовать передовые концепции React, чтобы стать лучшим разработчиком React.
Пользовательские крючки
Как вы уже знаете, хуки — это новое дополнение в React 16.8, которое позволит вам использовать состояние и другие функции React без написания класса или компонента. Создание собственных пользовательских хуков — отличный способ извлечь логику компонентов в функции, которые можно повторно использовать и тестировать независимо друг от друга.
Хотя это и простой пример, он показывает, как можно повторно использовать логику асинхронной выборки данных для различных вызовов API в вашем приложении.
Подробнее о том, как писать повторно используемый код с помощью хуков React.
Контекст
React Context — это функция, которая позволяет передавать данные через иерархию компонентов без необходимости вручную передавать реквизиты отдельным компонентам. Контекст особенно полезен для обмена данными, которые считаются «глобальными» для всего приложения, такими как учетные данные пользователя, темы, язык и т. д.
В приведенном выше простом примере вы можете легко изменить тему между «светлой» или «темной», используя хук useTheme, и изменение будет распространяться на все компоненты в иерархии, поскольку значение предоставляется контекстом.
Порталы
React Порталы — это способ поместить дочерние компоненты в узел DOM, который существует вне иерархии родительских компонентов. Несмотря на то, что порталы можно монтировать в любом месте дерева DOM, во всем остальном они ведут себя как обычные дочерние элементы React. Контексты также будут работать с порталами, как и с любыми другими компонентами React. Типичные варианты использования порталов включают модальные окна, всплывающие меню, всплывающие уведомления и тому подобное, где вам необходимо монтировать компоненты на более высоком уровне в DOM 3.
Компоненты высшего порядка
React Компонент высшего порядка (HOC) — это шаблон для повторного использования логики компонента. HOC — это функции, которые принимают компонент в качестве аргумента и возвращают новый компонент. Там, где типичные компоненты преобразуют props в узлы в DOM, компонент более высокого порядка преобразует компонент в другой компонент.
саспенс
Приостановка — это функция, которая позволяет вашему компоненту декларативно ожидать загрузки чего-либо, прежде чем это можно будет отобразить. Suspense можно использовать для ожидания загрузки некоторого кода с помощью React.Lazy в сочетании с React.Suspense, или, начиная с React 18.0.0, его также можно использовать для ожидания загрузки некоторых асинхронных данных. Я кратко расскажу об этих двух основных вариантах использования ниже;
Отложенная загрузка кода
Разделение кода — это метод, при котором веб-приложение «разбивается» на части для повышения производительности и времени загрузки. Идея в том, что изначально вы загружаете только те скрипты и ассеты, которые сразу необходимы для отображения какой-то страницы. Остальные скрипты и активы загружаются лениво, когда это необходимо.
В приведенном выше примере скрипты и ресурсы для ArticlePage не загружаются до тех пор, пока их не потребуется отобразить.
Извлечение данных с приостановкой
Извлечение данных с приостановкой — это новая функция React 18.0.0, хотя в более ранних версиях она была выпущена как экспериментальная функция. Типичный подход к извлечению данных с помощью React заключался в том, чтобы начать рендеринг компонентов. Затем, используя хук useEffect, каждый из этих компонентов может запускать некоторую логику выборки данных, например. вызов API, в конечном итоге обновление состояния и рендеринга. Этот подход часто приводит к «водопадам», когда вложенные компоненты инициируют выборку только тогда, когда родительские компоненты готовы, как показано в приведенном ниже коде.
Часто многие из этих операций могут быть даже распараллелены.
При задержке мы не ждем, пока придут ответы, мы просто запускаем асинхронные запросы и сразу начинаем рендеринг. Затем React попытается отобразить иерархию компонентов. Если что-то выйдет из строя из-за отсутствия данных, оно просто вернется к любому резервному варианту, определенному в оболочке Suspense.
В приведенном выше примере статья будет отображаться только тогда, когда она загружена, а в противном случае - счетчик, в то время как аналогичные статьи будут отображаться только тогда, когда они загружены. За кулисами в функции fetchArticle происходит какое-то волшебство, о котором я расскажу в следующем посте. Следите за обновлениями! 📻
На этом завершаются 5 концепций, которые сделают вас лучшим разработчиком React. Надеюсь, вам понравилось чтение и вы узнали что-то новое! 👍
Также подготовьте мою статью 5 продвинутых концепций JavaScript, которые сделают вас лучшим разработчиком.
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Level Up трансформирует рекрутинг в сфере технологий. Найди свою идеальную работу в лучших компаниях.
