Правила React¶
Как в разных языках программирования есть свои способы выражения концепций, так и в React есть свои идиомы - или правила - для выражения паттернов таким образом, чтобы их было легко понять и получить качественные приложения.
Мыслим как React
Чтобы узнать больше о выражении пользовательского интерфейса с помощью React, мы рекомендуем прочитать Мыслим как React.
В этом разделе описаны правила, которые необходимо соблюдать для написания идиоматического кода React. Написание идиоматического кода React поможет вам создавать хорошо организованные, безопасные и композитные приложения. Эти свойства делают ваше приложение более устойчивым к изменениям и облегчают работу с другими разработчиками, библиотеками и инструментами.
Эти правила известны как Правила React. Они являются правилами, а не просто рекомендациями, в том смысле, что если их нарушить, то в вашем приложении, скорее всего, будут ошибки. Ваш код также становится неидиоматичным, его сложнее понять и осмыслить.
Мы настоятельно рекомендуем использовать Strict Mode вместе с плагином ESLint для React, чтобы помочь вашей кодовой базе следовать правилам React. Следуя правилам React, вы сможете найти и устранить эти ошибки и сохранить работоспособность вашего приложения.
Компоненты и хуки должны быть чистыми¶
Чистота компонентов и хуков - это ключевое правило React, которое делает ваше приложение предсказуемым, легким для отладки и позволяет React автоматически оптимизировать ваш код.
- Компоненты должны быть идемпотентными - предполагается, что компоненты React всегда возвращают один и тот же результат относительно своих входов - props, state и context.
- Побочные эффекты должны выполняться вне рендера - Побочные эффекты не должны выполняться во время рендера, так как React может рендерить компоненты несколько раз, чтобы создать наилучший пользовательский опыт.
- Пропсы и состояние неизменяемы - Пропсы и состояние компонента являются неизменяемыми моментальными снимками по отношению к одному рендеру. Никогда не изменяйте их напрямую.
- Возвращаемые значения и аргументы хуков неизменяемы - После передачи значений в хук их не следует изменять. Как и пропсы в JSX, значения становятся неизменяемыми при передаче в хук.
- Значения неизменяемы после передачи в JSX - Не изменяйте значения после того, как они были использованы в JSX. Переместите мутацию до создания JSX.
React вызывает компоненты и хуки¶
React отвечает за рендеринг компонентов и хуков, когда это необходимо для оптимизации пользовательского опыта Это декларативно: вы указываете React, что рендерить в логике вашего компонента, а React решает, как лучше отобразить это для пользователя.
- Никогда не вызывайте функции компонентов напрямую - Компоненты должны использоваться только в JSX. Не вызывайте их как обычные функции.
- Никогда не передавайте хуки как обычные значения - Хуки должны вызываться только внутри компонентов. Никогда не передавайте их как обычные значения.
Правила использования хуков¶
Хуки определяются с помощью функций JavaScript, но они представляют собой особый тип многократно используемой логики пользовательского интерфейса с ограничениями на то, где они могут быть вызваны. При их использовании необходимо следовать Правилам использования хуков.
- Вызывать хуки только на верхнем уровне - Не вызывайте хуки внутри циклов, условий или вложенных функций. Вместо этого всегда используйте Hooks на верхнем уровне вашей React-функции, перед любыми ранними возвратами.
- Вызывать хуки только из функций React - Не вызывайте хуки из обычных функций JavaScript.
Источник — https://react.dev/reference/rules