55 уроков после 5 лет использования React

Разработчик делится своим пятилетним опытом использования React: читаем и учимся на чужих ошибках.

Ознакомься с новым проектом

  • Просмотри package.json, изучи зависимости, скрипты и конфигурацию.
  • Нарисуй дерево проекта на бумажке/доске или используй React dev tools. Это помогает визуализировать состояние.

Процесс разработки

  • Быстрый переход к компоненту или функции: клик с зажатой клавишей CMD прямо в JSX (VSCode).
  • Быстрый переход к родителю: CMD+SHIFT+F (глобальный поиск по проекту в VSCode). Искать <Название_компонента.
  • Быстрый просмотр списка родителей: React dev tools.
  • Создавай чеклист возможных состояний каждого компонента (ошибка, нет данных и т. д. — полный список).
  • Для дебаггинга используй debugger. Также полезен метод console.assert.
  • Работай с фиктивными данными и фиктивным API (json-server, json-graphql-server).
  • Используй одни и те же фиктивные данные для Storybook, тестов и фиктивного API.
  • Передавай в функцию объект и используй деструктурирование для получения именованных параметров. Это читается гораздо проще. Деструктурировать можно прямо в сигнатуре функции, это позволяет сразу же документировать ожидаемые параметры.
  • Storybook driven development — создавай и тестируй каждый компонент изолированно. Каждое состояние документа — это отдельная история. Затем используй Percy или Chromatic для снэпшотов
    • Отступы
    • Адаптивный дизайн

JSX

  • Можно использовать только выражения, которые что-то возвращают. Для сложной логики есть несколько вариантов:
    • Ранний return (удобно для лоадеров и ошибок)
    • Выделение логики рендера в отдельную функцию, где можно использовать все возможности Javascript (if/else/switch)

Производительность

  • Делай то, что удобно. Чаще всего это достаточно хорошо работает. Инлайн-функции? Отлично. Беспокоишься о рендере? Не беспокойся. Беспокоишься о производительности контекста? Может быть, ты неправильно используешь контекст (он должен меняться довольно редко). В любом случае тестируй, но не сходи с ума. Добиваясь идеальной производительности, ты потеряешь удобство.
  • Помни, что рендер компонента — не равно изменению DOM-дерева. React работает с виртуальным DOM. Процесс применения изменений выглядит так: рендер (render) -> согласование (reconcile) -> применение (commit). Если DOM не изменяется, то и проблем с производительностью не будет, поэтому перестань волноваться о перерендерах. React достаточно умный, чтобы изменять только то, что требует изменения.
  • Не используй везде, где можно, useMemo, shouldComponentUpdate, PureComponent. Только если это действительно нужно. У них есть накладные расходы, так как совершаются дополнительные действия. Если бы они были быстрыми, то использовались бы по умолчанию!

Управление состоянием

  • Держи состояние так низко, как это только возможно. При необходимости поднимай.
  • Избегай хранить состояние, которое может быть извлечено из другого состояния или пропсов. Вычисляй на лету. Ссылайся на объекты по идентификатору вместо того, чтобы дублировать их.
  • Используй _myVar конвенцию для разрешения конфликтов именования состояния.
  • Не синхронизируй состояния, а извлекай. Например, получай полное имя (full name) путем объединения имени (firstName) и фамилии (lastName) прямо в методе render.
  • Состояния, которые изменяются вместе, должны храниться вместе. В этом помогают редьюсеры. Группируй, используй useState. Рассмотрим движки состояний — они описывают валидные состояния, что делает невалидные состояния невозможными (например, новый клиент, у которого уже есть 5 прошлых покупок, или админ без прав) Если разделить состояния, они могут рассинхронизироваться.
  • Возможно тебе не нужен Redux. Подъем состояния отлично масштабируется и легок для понимания. Пробрасывание пропсов не так страшно, как его малюют. Просто сохраняй названия пропсов, используй спред-оператор, передавай детей целиком, используй мемоизацию. Контекст и useReducer могут справиться практически с любой задачей.
  • Контекст полезен не только для хранения глобальных данных. Его можно использовать для композиции компонентов. Он также может быть полезен для увеличения производительности.
  • Вызывай setLoading(false) в блоке finally.

Пропсы

  • Сделай все пропсы обязательными.
  • Деструктурируй пропсы в сигнатуре функции, чтобы уменьшить количество кода. Это также полезно для обработчиков событий. Но что насчет пропсов, в имени которых есть дефис типа aria-label. Просто используй синтаксис …otherProps.
  • Сделай пропсы максимально специфичными.
  • Используй стандартизированное наименование. onX для пропсов-обработчиков событий, handleX — для функций.
  • Храни propTypes в одном месте.
  • Документируй propTypes с помощью JSDoc-комментариев, они будут выводиться в автокомплите редактора. Можно даже использовать markdown.
  • Чтобы уменьшить проблему пробрасывания пропсов, используй спред-оператор или передавай дочерние элементы.
  • Само существование пропа предполагает, что он равен true. Поэтому достаточно написать <Input required />.
  • Держись ближе к нативному API. В обработчики передавай событие целиком, а не только значение инпута. Тогда ты сможешь использовать единый обработчик изменений. Придерживайся нативных имен (onBlur, onChange). Стремись к максимальной гибкости и минимальной кривой обучения.

Стили

  • Сочетай разные подходы:
    • Инлайновые стили для динамически изменяющихся свойств.
    • Пространства имен (CSS-модули).
    • Sass для глобальных стилей.
  • Используй классы, чтобы применять несколько стилей сразу.
  • Используй flexbox или CSS Grid вместо float.
  • Создавай абстракции для брейкпоинтов (например, используй bootstrap).

Переиспользование компонентов

  • 3 ключевых правила для простого переиспользования.
  • Подумай о том, чтобы выделить на это отдельного человека/команду. Зачем это нужно? Скорость работы, быстрее и проще принимать решения, меньше бандлы. Слаженность в интерфейсе ведет к хорошему пользовательскому опыту. Меньше кода — меньше багов.
  • Ищи повторящийся код — его можно повторно использовать. Любое переиспользование — это улучшение производительности.
  • Следуй принципу DRY, объединяй возможности хуков, контекста и переиспользуемые компоненты, чтобы инкапсулировать всю бизнес-логику приложения.
  • Принимай и простые строки и элементы. Используй React.isValidElement, чтобы определить, что ты получаешь.
  • Создай проп as для обозначения элементов высокого уровня.
  • Cоздай переиспользуемый AppLayout, используя слоты.
  • Помести алерты в одно место в AppLayout и предоставь функцию для их отображения через контекст.
  • Генерируй документацию через react-docgen.
  • Подумай о создании отдельных компонентов для мобильной и десктопной версии (если он сильно различаются). Используй lazy load для загрузки нужного размера.

Тестирование

  • RTL лучше Enzyme. Чем проще API, тем лучше. Поощряет a11y. Проще отлаживать. Можно использовать те же запросы для Cypress.
  • JSDOM не рендерит, поэтому не может тестировать адаптивный дизайн. Используй Cypress для теста адаптивного поведения.
  • Избегай снэпшот-тестов Jest. Они хрупкие, тестирую детали реализации, плохо называются, всегда падают при изменении единственной строки и их трудно поднять. Вместо этого используй Percy или Chromatic для визуальных тестов.
  • Используй шаблон выбора сценариев для запуска приложения с различными данными. Автоматизировать эти тесты можно с помощью Cypress/Selenium.
  • При использовании Cypress Cy-селекторы совпадают с RTL-селекторам — не нужно менять код для поддержки тестов Cypress.
  • Cypress driven development — TDD для интеграционных тестов. Используй Cypress, чтобы перейти к месту, которое нужно проверить. Используй cy.only чтобы запустить один тест. В первый раз он должен упасть, это пройдет.

Среда разработки

  • Кастомизируй create-react-app (CRA):
    • Используй react-app-rewired для настройки конфигурации без ejecting.
    • Кастомизируй правила линтинга.
    • Добавь webpack-bundle-analyzer, узнай, что в твоем бандле.
    • Форкни CRA или хотя бы react scripts. Создай фреймворк для компании, который генерирует проект с единственной зависимостью — этим форком, включающим компоненты, правила линтинга, конфиги и т. д.
  • Используй Prettier.
  • Положись на ESLint. Используй как учебное пособие. Object shorthand. No var. Запрет некоторых импортов (jquery, lodash, moment). Строгое равенство. Добавьте плагины типа jsx-a11y/recommended.
  • Используй строгие propTypes (или TS).
  • Используй .vsextensions.
  • Разделяй клиент и сервер. Если используешь React на сервере, используй Storybook для изолированной разработки компонентов.
Информация была полезна для вас?

Расскажите пожалуйста что мы можем улучшить?

оцените контент и участвуйте в выборе трендов

Обзор React JS

Разработка React — JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов

Подробнее...

Следующая записьЕще статьи