Правила 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

Комментарии