|
1 | 1 | --- |
2 | 2 | title: Правила React |
3 | 3 | --- |
4 | | - |
5 | 4 | <Intro> |
6 | | -Подобно тому, как разные языки программирования имеют свои способы выражения концепций, React имеет свои идиомы — или правила — для выражения паттернов таким образом, чтобы это было легко понять и приводило к созданию высококачественных приложений. |
| 5 | +Подобно тому, как разные языки программирования имеют свои способы выражения концепций, React имеет свои идиомы — или правила — для выражения паттернов таким образом, чтобы это было легко понять и приводило к высококачественным приложениям. |
7 | 6 | </Intro> |
8 | 7 |
|
9 | 8 | <InlineToc /> |
10 | 9 |
|
11 | 10 | --- |
12 | 11 |
|
13 | 12 | <Note> |
14 | | -Чтобы узнать больше о создании пользовательских интерфейсов с помощью React, мы рекомендуем прочитать [Мышление в React](/learn/thinking-in-react). |
| 13 | +Чтобы узнать больше о выражении пользовательских интерфейсов с помощью React, мы рекомендуем прочитать [Мышление в стиле React](/learn/thinking-in-react). |
15 | 14 | </Note> |
16 | 15 |
|
17 | 16 | Этот раздел описывает правила, которым вы должны следовать, чтобы писать идиоматичный код React. Написание идиоматичного кода React может помочь вам создавать хорошо организованные, безопасные и компонуемые приложения. Эти свойства делают ваше приложение более устойчивым к изменениям и облегчают работу с другими разработчиками, библиотеками и инструментами. |
18 | 17 |
|
19 | | -Эти правила известны как **Правила React**. Они являются правилами, а не просто рекомендациями, в том смысле, что если они нарушены, ваше приложение, вероятно, будет содержать ошибки. Ваш код также станет неидиоматичным и его будет труднее понять и осмыслить. |
| 18 | +Эти правила известны как **Правила React**. Они являются правилами, а не просто рекомендациями, в том смысле, что если они нарушены, ваше приложение, вероятно, содержит ошибки. Ваш код также становится неидиоматичным и его труднее понять и осмыслить. |
20 | 19 |
|
21 | | -Мы настоятельно рекомендуем использовать [Strict Mode](/reference/react/StrictMode) вместе с [ESLint плагином React](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы помочь вашему коду следовать Правилам React. Следуя Правилам React, вы сможете находить и исправлять эти ошибки, а также поддерживать свое приложение в рабочем состоянии. |
| 20 | +Мы настоятельно рекомендуем использовать [Strict Mode](/reference/react/StrictMode) вместе с [плагином ESLint для React](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы помочь вашей кодовой базе следовать Правилам React. Следуя Правилам React, вы сможете находить и устранять эти ошибки и поддерживать ваше приложение в рабочем состоянии. |
22 | 21 |
|
23 | 22 | --- |
24 | 23 |
|
25 | 24 | ## Компоненты и хуки должны быть чистыми {/*components-and-hooks-must-be-pure*/} |
26 | 25 |
|
27 | 26 | [Чистота компонентов и хуков](/reference/rules/components-and-hooks-must-be-pure) — это ключевое правило React, которое делает ваше приложение предсказуемым, легким для отладки и позволяет React автоматически оптимизировать ваш код. |
28 | 27 |
|
29 | | -* [Компоненты должны быть идемпотентными](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) — предполагается, что компоненты React всегда возвращают одинаковый результат относительно своих входных данных — пропсов, состояния и контекста. |
30 | | -* [Побочные эффекты должны выполняться вне рендеринга](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) — побочные эффекты не должны выполняться во время рендеринга, так как React может рендерить компоненты несколько раз для создания наилучшего пользовательского опыта. |
31 | | -* [Пропсы и состояние неизменяемы](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) — пропсы и состояние компонента являются неизменяемыми снимками для одного рендеринга. Никогда не изменяйте их напрямую. |
32 | | -* [Возвращаемые значения и аргументы для хуков неизменяемы](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) — после того, как значения переданы хуку, вы не должны их изменять. Как и пропсы в JSX, значения становятся неизменяемыми при передаче хуку. |
33 | | -* [Значения неизменяемы после передачи в JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) — не изменяйте значения после их использования в JSX. Переместите изменение до создания JSX. |
| 28 | +* [Компоненты должны быть идемпотентными](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) — Предполагается, что компоненты React всегда возвращают одинаковый результат относительно своих входных данных — пропсов, состояния и контекста. |
| 29 | +* [Побочные эффекты должны выполняться вне рендеринга](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) — Побочные эффекты не должны выполняться во время рендеринга, поскольку React может рендерить компоненты несколько раз для создания наилучшего пользовательского опыта. |
| 30 | +* [Пропсы и состояние неизменяемы](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) — Пропсы и состояние компонента являются неизменяемыми снимками относительно одного рендеринга. Никогда не изменяйте их напрямую. |
| 31 | +* [Возвращаемые значения и аргументы для хуков неизменяемы](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) — После того как значения переданы хуку, вы не должны их изменять. Как и пропсы в JSX, значения становятся неизменяемыми при передаче хуку. |
| 32 | +* [Значения неизменяемы после передачи в JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) — Не изменяйте значения после их использования в JSX. Переместите изменение до создания JSX. |
34 | 33 |
|
35 | 34 | --- |
36 | 35 |
|
37 | 36 | ## React вызывает компоненты и хуки {/*react-calls-components-and-hooks*/} |
38 | 37 |
|
39 | | -[React отвечает за рендеринг компонентов и хуков по мере необходимости для оптимизации пользовательского опыта.](/reference/rules/react-calls-components-and-hooks) Это декларативно: вы говорите React, что рендерить в логике вашего компонента, а React сам определит, как лучше всего отобразить это пользователю. |
| 38 | +[React отвечает за рендеринг компонентов и хуков при необходимости для оптимизации пользовательского опыта.](/reference/rules/react-calls-components-and-hooks) Это декларативно: вы говорите React, что рендерить в логике вашего компонента, а React сам определит, как лучше всего отобразить это вашему пользователю. |
40 | 39 |
|
41 | | -* [Никогда не вызывайте функции компонентов напрямую](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) — компоненты следует использовать только в JSX. Не вызывайте их как обычные функции. |
42 | | -* [Никогда не передавайте хуки как обычные значения](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) — хуки следует вызывать только внутри компонентов. Никогда не передавайте их как обычные значения. |
| 40 | +* [Никогда не вызывайте функции компонентов напрямую](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) — Компоненты следует использовать только в JSX. Не вызывайте их как обычные функции. |
| 41 | +* [Никогда не передавайте хуки как обычные значения](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) — Хуки следует вызывать только внутри компонентов. Никогда не передавайте их как обычные значения. |
43 | 42 |
|
44 | 43 | --- |
45 | 44 |
|
46 | 45 | ## Правила хуков {/*rules-of-hooks*/} |
47 | 46 |
|
48 | 47 | Хуки определяются с использованием функций JavaScript, но они представляют собой особый тип повторно используемой логики пользовательского интерфейса с ограничениями на то, где они могут быть вызваны. Вы должны следовать [Правилам хуков](/reference/rules/rules-of-hooks) при их использовании. |
49 | 48 |
|
50 | | -* [Вызывайте хуки только на верхнем уровне](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) — не вызывайте хуки внутри циклов, условий или вложенных функций. Вместо этого всегда используйте хуки на верхнем уровне функции React, перед любыми ранними возвратами. |
51 | | -* [Вызывайте хуки только из функций React](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) — не вызывайте хуки из обычных функций JavaScript. |
| 49 | +* [Вызывайте хуки только на верхнем уровне](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) — Не вызывайте хуки внутри циклов, условий или вложенных функций. Вместо этого всегда используйте хуки на верхнем уровне вашей функции React, перед любыми ранними возвратами. |
| 50 | +* [Вызывайте хуки только из функций React](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) — Не вызывайте хуки из обычных функций JavaScript. |
0 commit comments