React: практики, которые помогут стать продвинутым разработчиком
React — популярный веб-фреймворк. Если изучить его глубже, то будет проще разобраться с другими проектами на его основе.
33К открытий34К показов
React.js — один из лучших и наиболее популярных способов создать одностраничное приложение. Это гибкий и удобный фреймворк, с помощью которого можно либо добавить компонент на существующий сайт, либо создать новый сайт с нуля.
Сейчас React.js используется во многих других фреймворках и инструментах вроде Next.js, GatsbyJs, Razzle, After.js и т. д. Поэтому если вы хорошо разберётесь в React.js, то пользоваться всеми этими фреймворками станет легче.
Смотрите также: React.js для продолжающих
Используйте фрагменты вместо div
Зачастую у нас на руках множество компонентов, которые приходится оборачивать в div
, т.к. render()
позволяет вернуть только один компонент. Таким образом мы добавляем в документ лишний HTML-элемент.
Согласно официальному руководству:
Порой мы нарушаем семантику HTML, когда добавляем элементы<div>
в JSX, чтобы заставить код React работать, особенно при работе со списками (<ol>
,<ul>
и<dl>
) и таблицами<table>
. В таких случаях лучше использовать фрагменты React для группировки нескольких элементов.
Больше информации можно найти в документации по фрагментам.
Пользуйтесь контекстом чаще
Благодаря контексту можно передавать данные через дерево компонентов, вместо того чтобы вручную передавать свойства на каждом уровне. Поэтому если у вас есть несколько компонентов, которым нужны данные, используйте контекст. Если у вас есть только один дочерний компонент, используйте композицию.
Пример установки темы из документации:
Используйте хотя бы одни границы ошибок
В React 16 появилась такая замечательная вещь, как границы ошибок. По названию понятно, что это компоненты, которые отлавливают ошибки во всех дочерних компонентах. Идея очень проста: создайте компонент и используйте его в качестве родителя каждый раз, когда вам понадобится обрабатывать ошибки. Если в каком-то из дочерних компонентов возникнет ошибка, границы ошибок будут вызваны для обработки. Имейте в виду, что границы ошибок отлавливают ошибки отображения. Императивные ошибки вроде тех, что возникают в обработчиках событий, должны отлавливаться try
/catch
-блоком JavaScript.
Для логирования информации об ошибке нужно использовать componentDidCatch()
:
Теперь его можно использовать как обычный компонент:
Если в самом компоненте ErrorBoundary
возникнет ошибка, он её не сможет обработать.
Такая функция была доступна в React 15 под названием unstable_handleError()
. Этот метод больше не работает, и с бета-релиза 16 версии вам нужно использовать componentDidCatch()
вместо него.
Разработчики React предоставили инструмент для автоматического изменения кода.
Используйте продакшн-сборку в реальной среде
На официальном сайте перечислены конфигурации, которые могут улучшить производительность. Не забудьте ознакомиться с ними перед развёртыванием в проде.
Здесь можно почитать руководство.
На конфигурацию уйдёт всего 10 минут, а взамен ваше приложение получит большой прирост к производительности.
Используйте ссылки ref для взаимодействия с дочерним элементом
Мы можем использовать ref’ы для активации анимации, выбора текста или управления фокусом. Например, чтобы установить фокус в React, мы можем ссылаться на элементы DOM. С помощью ref’ов мы сначала создаём ссылку на элемент в JSX класса компонента:
При необходимости мы можем установить фокус где угодно в компоненте:
Подробнее в документации React.
Используйте разделение кода
Если вы используете CRA (create react app) или Next.js, то у вас уже должен быть готовый конфигурационный файл webpack. Он создаст один файл (бандл), который будет содержать всё ваше приложение. Если вы используете сторонние библиотеки и/или приложение увеличивается в размерах, то и бандл будет становиться больше. Когда пользователь зайдёт на сайт, браузер скачает весь бандл и затем всё отобразит. Это может сильно замедлить сайт, поэтому гораздо лучше разделить код и таким образом разбить бандл на части. В результате браузер будет закачивать нужные части по мере необходимости, что приведёт к улучшению времени загрузки сайта.
Для достижения нашей цели можно использовать React.lazy
.
Примечание React.lazy
и Suspense
пока нельзя использовать для отображения на стороне сервера. Для решения этой проблемы вы можете воспользоваться React Loadable. В документации можно найти хорошее руководство по разделению бандлов с серверным отображением.
Разделять код можно разными способами, но хорошей отправной точкой будет разделение на основе путей.
Как правило, переходы на новую страницу требуют времени на загрузку. А если вы заново отображаете всю страницу за раз, то пользователи, не могут взаимодействовать с другими элементами на странице в то же время.
Вот пример настройки разделения на основе путей с помощью библиотек вроде React Router и React.lazy
:
Suspense
нужен здесь на всякий случай: он будет показан, если нужный бандл ещё не загрузился. Здесь вы можете использовать индикатор загрузки, чтобы показать пользователям, что процесс не стоит на месте. Вы можете использовать границы ошибок даже в качестве родителя Suspense
для обработки других ошибок вроде сетевых.
React.lazy
пока что поддерживает только экспорт по умолчанию. Если вам нужно использовать именованные экспорты, загляните в документацию React.
Пользуйтесь статической проверкой типов
JavaScript является динамически и слабо типизированным языком, поэтому многие проблемы возникают из-за неправильных типов. Для решения этой проблемы можно использовать различные инструменты для проверки типов. Flow — известный и дружелюбный к новичкам вариант. Он был разработан в Facebook и часто используется с React. Он позволяет аннотировать переменные, функции и компоненты React с помощью специального синтаксиса и даёт возможность быстро отлавливать ошибки. Здесь можно изучить основы Flow, а в этом официальном руководстве найти пошаговые инструкции по использованию.
Итак, что же нужно делать, чтобы стать продвинутым разработчиком React
t
- Используйте фрагменты вместо div.
t- Чаще пользуйтесь контекстом.
t- Используйте границы ошибок.
t- Используйте продакшн-сборку в реальной среде.
t- Используйте ссылки ref для взаимодействия с дочерним элементом.
t- Используйте разделение кода.
t- Пользуйтесь статической проверкой типов.
33К открытий34К показов