Архитектурные паттерны React для ваших проектов

Статья, посвященная организации файловой структуры (и не только) проекта: https://blog.openreplay.com/react-architecture-patterns-for-your-projects

Рекомендации:

👉 директория с исходниками называется src
👉 названия папок должны быть понятны всем членам команды, нет жестких правил, можно использовать слова-синонимы, если так проще
👉 для компонентов следует выделять отдельные папки внутри директории components
👉 кроме того, есть общий index.js файл в components, который импортирует все компоненты сразу
👉 для каждого компонента создаем отдельные файлы: для собственно кода, для стилей, для тестов и для Storybook
👉 для наименования файлов и папок хуков используйте префикс use
👉 размещайте каждый хук в отдельной папке в директории hooks вместе с файлом для тестирования
👉 по аналогии с компонентами стоит создать отдельный файл hooks/index.js, который будет импортировать все хуки проекта сразу
👉 следует использовать абсолютные импорты, для этого нужно правильно настроить сборку, указав алиас или корневую директорию
👉 отделяйте логику приложения от отображения, выносите ее в хуки по возможности
👉 константы и утилитарные методы стоит вынести в отдельную директорию utils
👉 не создавайте единый Контекст для всего, лучше создать несколько независимых контекстов с разными данными

#ссылки #паттерны #проект

Недооцененные хуки React, которые вы упускаете

Статья (англ.): https://blog.logrocket.com/underrated-react-hooks-youre-missing-out-on/

В статье разобраны три встроенных хука, про которые мы уже читали в документации:

👉 useImperativeHandle
👉 useLayoutEffect
👉 useDebugValue

Помимо описания есть примеры использования, что очень приятно.

Вкратце:

useImperativeHandle позволяет вместо обычного рефа вернуть родительскому компоненту настроенный объект с нужными методами. Его удобно использовать, например, для управления модальным окном. При этом состояние хранится внутри компонента модалки, но родитель получает удобный способ его изменять. Используется в сочетании с функцией forwardRef.

useLayoutEffect вызывается после применения обновлений, но ДО того, как браузер их отрисует (синхронно, в отличие от useEffect). То есть он блокирует отрисовку и может использоваться для внесения изменений непосредственно в DOM компонента, чтобы пользователь не увидел изменений. Автор статьи использует его для управления скроллом при изменении контента страницы при роутинге.

useDebugValue улучшает опыт разработчика при логировании кастомных хуков. По умолчанию, если в кастомном хуке используются встроенные хуки типа useState, в React DevTools они не подписаны - просто какой-то State. Нужно помнить порядок использования, чтобы понять, какой стейт к чему относится. useDebugValue позволяет вывести что-нибудь полезное в панель отладки, основываясь на текущих значениях состояний.

#ссылки #хуки

10 вопросов по React начального уровня с интервью

Статья (англ.): https://javascript.plainenglish.io/10-entry-level-react-interview-questions-5a8ea74e2130

Проверим себя.

1. Что такое Virtual DOM и как он работает?

👉 Ответ

Виртуальный DOM - это виртуальное представление реального DOM, которое проще обновлять. Снэпшоты старого и обновленного состояние сравниваются и находится самый быстрый способ внести изменения в настоящий DOM.

2. Назовите самые важные методы жизненного цикла (классовых компонентов) и зачем их использовать. А также альтернативные хуки (React Hooks)

👉 Ответ

При монтировании компонента работают:
- constructor,
- static getDerivedStateFromProps (useEffect с массивом зависимостей),
- render,
- componentDidMount (useEffect)

При перерендере:
- static getDerivedStateFromProps (useEffect с массивом зависимостей)
- shouldComponentUpdate (useMemo)
- render
- getSnapshotBeforeUpdate (кастомные хуки для сохранения предыдущего состояния)
- componentDidUpdate (useEffect)

При размонтировании:
- componentWillUnmount (useEffect с возвращением функции для сброса эффекта)

3. Зачем мы используем стрелочные функции в React?

👉 Ответ

Чтобы не создавать новый контекст выполнения (this), а выполнять все действия в контексте компонента. Если не использовать стрелочные функции, придется привязывать все методы к экземпляру компонента (в конструкторе).

4. Что такое ключи (keys) и зачем они нужны?

👉 Ответ

Ключи нужны для оптимизации рендера массивов значений. Они позволяют привязать каждый элемент к соответствующему значению в массиве и не обновлять его без необходимости.

5. В чем преимущества React перед настоящими "фреймворками" типа Angular?

Вопрос очень спорный, но пусть будет.

👉 Ответ

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

Остальные вопросы уже по JavaScript, можно посмотреть в статье, чтобы освежить знания.

#компоненты #жизненныйциклкомпонента #хуки #виртуальныйdom #обработкасобытий #ключи #ссылки

3 паттерна для создания React-компонентов

Статья (англ.): https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about

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

Презентационные компоненты и компоненты-контейнеры

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

Компоненты-контейнеры обеспечивают логику приложения. У них есть состояние, они используют различные методы жизненного цикла и содержат в себе презентационные компоненты для вывода данных. Именно в контейнерных компонентах происходит запрос и обработка данных.

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

Провайдер

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

Пример Провайдера в React - это контекст. Мы создаем объект контекста с нужными данными (например, цветовой темой приложения), оборачиваем все приложение в провайдер этого контекста и в нужных местах связываемся с ним с помощью хука useContext, или свойства contextType, или Context.Consumer.

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

Составные компоненты

Компоненты в React могут работать в симбиозе, разделяя общее состояние. Например, компонент списка (Menu) и компоненты отдельных элементов списка (MenuItem). Вынесение элементов в отдельные компоненты может быть удобно с точки зрения передачи пропсов и структуризации кода.

Но у Menu и MenuItem есть общее состояние - активный элемент, оно должно храниться в компоненте Menu, значит, его нужно передать во все вложенные компоненты MenuItem. Об этом должен позаботиться сам компонент списка (например, с помощью React Context), тогда мы получим составной компонент (compound component).

Реализовав этот паттерн мы сможем удобно оформлять список, выделяя каждый элемент в MenuItem, но при этом не придется заботиться о передаче состояния элементам, так как это происходит под капотом.

#паттерны #ссылки

CSS-переменные для React-разработчиков

Статья (англ.): https://www.joshwcomeau.com/css/css-variables-for-react-devs/

CSS-in-JS решения позволяют писать очень гибкие стили, но не следует забывать про нативные возможности CSS. Автор статьи считает, что CSS-переменные aka кастомные свойства - это очень мощный инструмент, который иногда может переплюнуть все эти ваши JS-интерполяции.

CSS-переменные дают возможность изменять значения, а не свойства. Они декларативны, и код с ними становится короче и чище. CSS-переменные наследуются вложенными элементами, а при необходимости с ними можно легко взаимодействовать из JS-кода. Ко всему прочему, с помощью переменных можно анимировать то, что нельзя анимировать другими способами, например, градиенты (с некоторыми оговорками).

В статье рассмотрен конкретный кейс обеспечения доступности кнопки на тач-устройствах - в двух вариантах: CSS-in-JS (Styled Components) и CSS-переменные.

В целом полностью поддерживаю мнение автора, CSS-переменные - очень мощная штука, к тому же нативная.

#стили #ссылки