From bf5c5786276c0431e1c658e8d795bd95349468d0 Mon Sep 17 00:00:00 2001 From: Serge Date: Sun, 10 Feb 2019 10:07:32 -0500 Subject: [PATCH 1/9] Translated hooks-overview page --- content/docs/hooks-overview.md | 121 +++++++++++++++++---------------- 1 file changed, 61 insertions(+), 60 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index fef7de00b..187d24948 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -1,30 +1,30 @@ --- id: hooks-overview -title: Hooks at a Glance +title: Хуки на первый взгляд permalink: docs/hooks-overview.html next: hooks-state.html prev: hooks-intro.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Хуки* -- это новое дополнение в React 16.8. С их помощью, вы можете использовать состояние и другие функции React без создания классов. -Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). This page provides an overview of Hooks for experienced React users. This is a fast-paced overview. If you get confused, look for a yellow box like this: +Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы найдете обзор Хуков для опытных пользователей React. Имейте в виду, что это краткий обзор. Если вы запутаетесь, ищите вот такой жёлтый блок: ->Detailed Explanation +>Подробное объяснение > ->Read the [Motivation](/docs/hooks-intro.html#motivation) to learn why we're introducing Hooks to React. +>Если вы хотите понять почему мы добавляем Хуки в React, прочтите [мотивацию](/docs/hooks-intro.html#motivation). -**↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations. +**↑↑↑ В конце каждой секции будет такой жёлтый блок.** Он содержит более детальное объяснение. -## 📌 State Hook {#-state-hook} +## 📌 Хук состояния {#-state-hook} -This example renders a counter. When you click the button, it increments the value: +Этот пример рендерит счетчик. Если вы нажмете на кнопку, значение счетчика будет инкрементировано. ```js{1,4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // Объявляем новую переменную состояния под названием "count" const [count, setCount] = useState(0); return ( @@ -38,17 +38,18 @@ function Example() { } ``` -Here, `useState` is a *Hook* (we'll talk about what this means in a moment). We call it inside a function component to add some local state to it. React will preserve this state between re-renders. `useState` returns a pair: the *current* state value and a function that lets you update it. You can call this function from an event handler or somewhere else. It's similar to `this.setState` in a class, except it doesn't merge the old and new state together. (We'll show an example comparing `useState` to `this.state` in [Using the State Hook](/docs/hooks-state.html).) +В этом примере, `useState` -- это *Хук* (мы поговорим об этом далее). Мы вызываем его внутри функционального компонента, чтобы добавить туда внутреннее состояние. React будет сохранять это состояние при повторных рендерах. `useState` возвращает *текущее* значение состояния и функцию, с помощью которой вы сможете обновлять его. Вы можете вызывать эту функцию откуда угодно, например из обработчика событий. Она схожа с классовым `this.setState`, но она не объединяет новое и старое состояние вместе. (Вы можете найти сравнение `useState` и `this.state` на странице [использование хука состояния](/docs/hooks-state.html).) -The only argument to `useState` is the initial state. In the example above, it is `0` because our counter starts from zero. Note that unlike `this.state`, the state here doesn't have to be an object -- although it can be if you want. The initial state argument is only used during the first render. +Единственный аргумент `useState` это начальное состояние. В примере выше -- это `0`, так как наш счетчик начинается с нуля. Имейте в виду, что в отличии от `this.state`, этому состоянию совсем не обязательно быть объектом, хоть это, конечно же, возможно. Первоначальное значение аргумента используется только при первом рендере. -#### Declaring multiple state variables {#declaring-multiple-state-variables} -You can use the State Hook more than once in a single component: +#### Объявление нескольких переменных состояния {#declaring-multiple-state-variables} + +Вы можете использовать Хук состояния более одного раза в компоненте. ```js function ExampleWithManyStates() { - // Declare multiple state variables! + // Обьявляем несколько переменных состояния! const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); @@ -56,25 +57,25 @@ function ExampleWithManyStates() { } ``` -The [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) syntax lets us give different names to the state variables we declared by calling `useState`. These names aren't a part of the `useState` API. Instead, React assumes that if you call `useState` many times, you do it in the same order during every render. We'll come back to why this works and when this is useful later. +Синтаксис [деструктурирования массивов](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) позволяет нам по разному называть переменные состояния, которые мы объявляем при вызове `useState`. Так как имен этих переменных нет в API `useState`, React предполагает, что если вы вызываете `useState` много раз, вы делаете это в одинаковой последовательности при каждом рендере. Мы расскажем, почему это работает и когда это целесообразно, немного позже. -#### But what is a Hook? {#but-what-is-a-hook} +#### Что же такое хук? {#but-what-is-a-hook} -Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes -- they let you use React without classes. (We [don't recommend](/docs/hooks-intro.html#gradual-adoption-strategy) rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.) +Хуки -- это функции, с помощью которых вы можете "подцепиться" к состоянию и методам жизненного цикла React из функциональных компонентов. Хуки не работают внутри классов -- они дают вам возможность использовать React без классов. (Мы вам [не рекомендуем](/docs/hooks-intro.html#gradual-adoption-strategy) сразу же переписывать существующие компоненты, но при желании, вы можете начать использовать Хуки в своих новых компонентах.) -React provides a few built-in Hooks like `useState`. You can also create your own Hooks to reuse stateful behavior between different components. We'll look at the built-in Hooks first. +React содержит несколько встроенных Хуков как `useState`. Вы также можете создавать свои собственных Хуки, чтобы повторно использовать их в других своих компонентах. Давайте для начала рассмотрим встроенные Хуки. ->Detailed Explanation +>Подробное объяснение > ->You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html). +>Вы можете узнать больше о Хуке состояния на этой странице: [использование хука состояния](/docs/hooks-state.html). -## ⚡️ Effect Hook {#️-effect-hook} +## ⚡️ Хук эффекта {#️-effect-hook} -You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering. +Вам скорее всего доводилось ранее запрашивать данные, делать подписки или вручную менять DOM из компонента React. Мы расцениваем эти операции как "побочные эффекты" (или сокращенно "эффекты"), так как они могут влиять на работы других компонентов и их нельзя выполнить во время рендера. -The Effect Hook, `useEffect`, adds the ability to perform side effects from a function component. It serves the same purpose as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React classes, but unified into a single API. (We'll show examples comparing `useEffect` to these methods in [Using the Effect Hook](/docs/hooks-effect.html).) +С помощью Хука Эффекта `useEffect`, вы можете выполнять побочные эффекты из функционального компонента. Он выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React классах, объединив их в единый API. (Вы можете найти сравнение `useEffect` и этих методов на странице [использование хука эффекта](/docs/hooks-effect.html).) -For example, this component sets the document title after React updates the DOM: +К примеру, этот компонент устанавливает заголовок документа после того как React обновляет DOM: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -82,9 +83,9 @@ import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); - // Similar to componentDidMount and componentDidUpdate: + // По принципу componentDidMount и componentDidUpdate: useEffect(() => { - // Update the document title using the browser API + // Обновляем заголовок документа используя API браузера document.title = `You clicked ${count} times`; }); @@ -99,9 +100,9 @@ function Example() { } ``` -When you call `useEffect`, you're telling React to run your "effect" function after flushing changes to the DOM. Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render -- *including* the first render. (We'll talk more about how this compares to class lifecycles in [Using the Effect Hook](/docs/hooks-effect.html).) +Когда вы вызываете `useEffect`, React получает указание запустить вашу функцию с "эффектом" после того, как он отправил изменения в DOM. Так как эффекты объявляются внутри компонента, у них есть доступ к его пропсам и состоянию. React запускает эффекты после каждого рендера, *включая* первый рендер, по умолчанию. (Мы рассмотрим более подробно как это отличается от классовых методов жизненного цикла на странице [использование хука эффекта](/docs/hooks-effect.html).) -Effects may also optionally specify how to "clean up" after them by returning a function. For example, this component uses an effect to subscribe to a friend's online status, and cleans up by unsubscribing from it: +При необходимости, вы можете возвратить функцию из эффекта и тем самым указать ему как "подчистить" после себя. Например, этот компонент использует эффект, чтобы подписаться на статус друга в сети, и подчищает за собой, отписываясь от него. ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,9 +129,9 @@ function FriendStatus(props) { } ``` -In this example, React would unsubscribe from our `ChatAPI` when the component unmounts, as well as before re-running the effect due to a subsequent render. (If you want, there's a way to [tell React to skip re-subscribing](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) if the `props.friend.id` we passed to `ChatAPI` didn’t change.) +В этом примере, React будет отписываться от нашего `ChatAPI` перед тем как компонент размонтируется и перед тем как перезапустить эффект при повторном рендере. (Вы также можете сделать так, чтобы [ React пропускал повторные подписки](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) если `props.friend.id`, который мы передали в `ChatAPI` остался без изменений.) -Just like with `useState`, you can use more than a single effect in a component: +Точно так же как и `useState`, вы можете использовать более одного эффекта в компоненте: ```js{3,8} function FriendStatusWithCounter(props) { @@ -153,32 +154,32 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks let you organize side effects in a component by what pieces are related (such as adding and removing a subscription), rather than forcing a split based on lifecycle methods. +Хуки дают вам возможность размещать побочные эффекты в компоненте согласно вещам, к которым они относятся (например добавление или удаление подписки), вместо того, чтобы принуждать вас делить все согласно методам жизненного цикла. ->Detailed Explanation +>Подробное объяснение > ->You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html). +>Вы можете узнать больше о `useEffect` на этой странице: [использование хука эффекта](/docs/hooks-effect.html). -## ✌️ Rules of Hooks {#️-rules-of-hooks} +## ✌️ Правила хуков {#️-rules-of-hooks} -Hooks are JavaScript functions, but they impose two additional rules: +Хуки -- это функции JavaScript, которые подчиняются двум дополнительным правилам: -* Only call Hooks **at the top level**. Don’t call Hooks inside loops, conditions, or nested functions. -* Only call Hooks **from React function components**. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks -- your own custom Hooks. We'll learn about them in a moment.) +* Вызывайте Хуки только **на верхнем уровне**. Не вызывайте хуки внутри циклов, условий или вложенных функций. +* Вызывайте Хуки только **из функциональных компонентов React**. Не вызывайте хуки из обычных функций JavaScript. (Есть только одно исключение, откуда можно вызывать Хуки -- это ваши пользовательские Хуки. Мы расскажем о них далее) -We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce these rules automatically. We understand these rules might seem limiting or confusing at first, but they are essential to making Hooks work well. +Мы разработали специальный [плагин для линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы эти правила соблюдались автоматически. Мы понимаем, что эти правила могут показаться немного непонятными и накладывать определенные ограничния, но они очень важны для правильной работы Хуков. ->Detailed Explanation +>Подробное объяснение > ->You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html). +>Вы можете узнать больше об этих правилах на этой странице: [правила хуков](/docs/hooks-rules.html). -## 💡 Building Your Own Hooks {#-building-your-own-hooks} +## 💡 Создание ваших собственных хуков {#-building-your-own-hooks} -Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree. +Иногда, целесообразно использовать уже сущестующую логику состояния в других наших компонентах. На данный момент, есть два варианта решения данной проблемы: [компоненты высшего порядка](/docs/higher-order-components.html) и [рендер-пропсы](/docs/render-props.html). С помощью пользовательских Хуков, вы можете делать это без добавления каких-либо дополнительных компонентов в ваше дерево. -Earlier on this page, we introduced a `FriendStatus` component that calls the `useState` and `useEffect` Hooks to subscribe to a friend's online status. Let's say we also want to reuse this subscription logic in another component. +Ранее на этой странице, мы рассматривали компонент `FriendStatus`, который вызывал Хуки `useState` и `useEffect`, чтобы подписаться на стаус друга в сети. Допустим мы хотим еще раз использовать эту логику с подпиской, но уже в другом компоненте. -First, we'll extract this logic into a custom Hook called `useFriendStatus`: +Прежде всего, давайте извлечем эту логику в пользовательский Хук `useFriendStatus` ```js{3} import React, { useState, useEffect } from 'react'; @@ -201,9 +202,9 @@ function useFriendStatus(friendID) { } ``` -It takes `friendID` as an argument, and returns whether our friend is online. +Он принимает `friendID` в качестве аргумента и возвращает переменную, которая показывает в сети наш друг или нет. -Now we can use it from both components: +Теперь мы можем использовать его в обоих наших компонентах: ```js{2} @@ -229,19 +230,19 @@ function FriendListItem(props) { } ``` -The state of these components is completely independent. Hooks are a way to reuse *stateful logic*, not state itself. In fact, each *call* to a Hook has a completely isolated state -- so you can even use the same custom Hook twice in one component. +Состояния этих компонентов никаким образом не зависят друг от друга. Хуки -- это способ использовать повторно *логику состояния*, а не само состояние. Более того, каждое *обращение* к Хуку обеспечивает совершенно изолированное состояние. Вы даже можете использовать один и тот же Хук несколько раз в одном компоненте. -Custom Hooks are more of a convention than a feature. If a function's name starts with "`use`" and it calls other Hooks, we say it is a custom Hook. The `useSomething` naming convention is how our linter plugin is able to find bugs in the code using Hooks. +Пользовательские Хуки это больше конвенция чем фича. Если имя функции начинается с "`use`" и она вызывает другие Хуки, мы расцениваем это как пользовательский Хук. Если вы будете придерживаться конвенции `useSomething` при названии Хуков, это позволит нашему плагину для линтера найти баги в коде, который использует Хуки. -You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven't considered. We are excited to see what custom Hooks the React community will come up with. +Есть много подходящих случаев, чтобы написать пользовательские Хуки, такие как работа с формами, анимация, декларативные подписки, таймеры и, наверное, много других, о которых мы даже не подумали. Мы с нетерпением ждем пользовательские Хуки, которые сообщество React сможет придумать. ->Detailed Explanation +>Подробное объяснение > ->You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html). +>Вы можете узнать больше об пользовательских Хуках на этой странице: [создание ваших собственных хуков](/docs/hooks-custom.html). -## 🔌 Other Hooks {#-other-hooks} +## 🔌 Другие хуки {#-other-hooks} -There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting: +Есть еще несколько менее используемых встроенных Хуков, которые могут вам пригодиться. Например, с помощью [`useContext`](/docs/hooks-reference.html#usecontext), вы можете подписаться на React контекст без использования каких-либо вложений. ```js{2,3} function Example() { @@ -251,7 +252,7 @@ function Example() { } ``` -And [`useReducer`](/docs/hooks-reference.html#usereducer) lets you manage local state of complex components with a reducer: +А Хук [`useReducer`](/docs/hooks-reference.html#usereducer) дает вам возможность управлять внтуренним состоянием более сложного компонента с помощью редьюсера. ```js{2} function Todos() { @@ -259,14 +260,14 @@ function Todos() { // ... ``` ->Detailed Explanation +>Подробное объяснение > ->You can learn more about all the built-in Hooks on a dedicated page: [Hooks API Reference](/docs/hooks-reference.html). +>Вы можете узнать больше обо всех встроенных Хуках на этой странице: [описание API хуков](/docs/hooks-reference.html). -## Next Steps {#next-steps} +## Что дальше? {#next-steps} -Phew, that was fast! If some things didn't quite make sense or you'd like to learn more in detail, you can read the next pages, starting with the [State Hook](/docs/hooks-state.html) documentation. +Фух, давайте перестанем торопиться и охладим немного пыл! Если какие-либо вещи вам были непоняты или вы хотите узнать о чем-либо более подробно, вы можете начать читать следующие страницы, начиная с документации [хука состояния](/docs/hooks-state.html). -You can also check out the [Hooks API reference](/docs/hooks-reference.html) and the [Hooks FAQ](/docs/hooks-faq.html). +Вы также можете просмотреть [описание API хуков](/docs/hooks-reference.html) и [FAQ хуков](/docs/hooks-faq.html). -Finally, don't miss the [introduction page](/docs/hooks-intro.html) which explains *why* we're adding Hooks and how we'll start using them side by side with classes -- without rewriting our apps. +И наконец, не проходите мимо [вступительной страницы](/docs/hooks-intro.html), на которой вы узнаете *почему* мы добавляем Хуки и как мы планируем использовать их вместе с классами -- без необходимости переписывать наши приложения. From e2d80f48ac479015fcddb5c7f9ca7ae0ed8b77ff Mon Sep 17 00:00:00 2001 From: Serge Date: Sun, 10 Feb 2019 10:25:24 -0500 Subject: [PATCH 2/9] Fixing effect-hook and rules-of-hooks anchors --- content/docs/hooks-overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 187d24948..637eda431 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -69,7 +69,7 @@ React содержит несколько встроенных Хуков как > >Вы можете узнать больше о Хуке состояния на этой странице: [использование хука состояния](/docs/hooks-state.html). -## ⚡️ Хук эффекта {#️-effect-hook} +## ⚡️ Хук эффекта {#effect-hook} Вам скорее всего доводилось ранее запрашивать данные, делать подписки или вручную менять DOM из компонента React. Мы расцениваем эти операции как "побочные эффекты" (или сокращенно "эффекты"), так как они могут влиять на работы других компонентов и их нельзя выполнить во время рендера. @@ -160,7 +160,7 @@ function FriendStatusWithCounter(props) { > >Вы можете узнать больше о `useEffect` на этой странице: [использование хука эффекта](/docs/hooks-effect.html). -## ✌️ Правила хуков {#️-rules-of-hooks} +## ✌️ Правила хуков {#rules-of-hooks} Хуки -- это функции JavaScript, которые подчиняются двум дополнительным правилам: From 2eb2566b0df1c5e5e3ba4950298ab58dd6e76ffa Mon Sep 17 00:00:00 2001 From: rlax Date: Sun, 10 Feb 2019 12:31:53 -0500 Subject: [PATCH 3/9] Removing double space Co-Authored-By: Hisagr --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 637eda431..61f635937 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -270,4 +270,4 @@ function Todos() { Вы также можете просмотреть [описание API хуков](/docs/hooks-reference.html) и [FAQ хуков](/docs/hooks-faq.html). -И наконец, не проходите мимо [вступительной страницы](/docs/hooks-intro.html), на которой вы узнаете *почему* мы добавляем Хуки и как мы планируем использовать их вместе с классами -- без необходимости переписывать наши приложения. +И наконец, не проходите мимо [вступительной страницы](/docs/hooks-intro.html), на которой вы узнаете *почему* мы добавляем Хуки и как мы планируем использовать их вместе с классами -- без необходимости переписывать наши приложения. From 83414377bca56f455d624ed5ee52f0c164151bf1 Mon Sep 17 00:00:00 2001 From: Serge Date: Mon, 11 Feb 2019 19:50:42 -0500 Subject: [PATCH 4/9] Updated according to the latest requirements --- content/docs/hooks-overview.md | 50 +++++++++++++++++----------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 61f635937..9916b666d 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -8,11 +8,11 @@ prev: hooks-intro.html *Хуки* -- это новое дополнение в React 16.8. С их помощью, вы можете использовать состояние и другие функции React без создания классов. -Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы найдете обзор Хуков для опытных пользователей React. Имейте в виду, что это краткий обзор. Если вы запутаетесь, ищите вот такой жёлтый блок: +Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы найдете обзор хуков для опытных пользователей React. Имейте в виду, что это краткий обзор. Если вы запутаетесь, ищите вот такой жёлтый блок: >Подробное объяснение > ->Если вы хотите понять почему мы добавляем Хуки в React, прочтите [мотивацию](/docs/hooks-intro.html#motivation). +>Если вы хотите понять почему мы добавляем хуки в React, прочтите [мотивацию](/docs/hooks-intro.html#motivation). **↑↑↑ В конце каждой секции будет такой жёлтый блок.** Он содержит более детальное объяснение. @@ -38,14 +38,14 @@ function Example() { } ``` -В этом примере, `useState` -- это *Хук* (мы поговорим об этом далее). Мы вызываем его внутри функционального компонента, чтобы добавить туда внутреннее состояние. React будет сохранять это состояние при повторных рендерах. `useState` возвращает *текущее* значение состояния и функцию, с помощью которой вы сможете обновлять его. Вы можете вызывать эту функцию откуда угодно, например из обработчика событий. Она схожа с классовым `this.setState`, но она не объединяет новое и старое состояние вместе. (Вы можете найти сравнение `useState` и `this.state` на странице [использование хука состояния](/docs/hooks-state.html).) +В этом примере, `useState` -- это *хук* (мы поговорим об этом далее). Мы вызываем его внутри функционального компонента, чтобы добавить туда внутреннее состояние. React будет сохранять это состояние при повторных рендерах. `useState` возвращает *текущее* значение состояния и функцию, с помощью которой вы сможете обновлять его. Вы можете вызывать эту функцию откуда угодно, например из обработчика событий. Она схожа с классовым `this.setState`, но она не объединяет новое и старое состояние вместе. (Вы можете найти сравнение `useState` и `this.state` на странице [использование хука состояния](/docs/hooks-state.html).) Единственный аргумент `useState` это начальное состояние. В примере выше -- это `0`, так как наш счетчик начинается с нуля. Имейте в виду, что в отличии от `this.state`, этому состоянию совсем не обязательно быть объектом, хоть это, конечно же, возможно. Первоначальное значение аргумента используется только при первом рендере. #### Объявление нескольких переменных состояния {#declaring-multiple-state-variables} -Вы можете использовать Хук состояния более одного раза в компоненте. +Вы можете использовать хук состояния более одного раза в компоненте. ```js function ExampleWithManyStates() { @@ -61,19 +61,19 @@ function ExampleWithManyStates() { #### Что же такое хук? {#but-what-is-a-hook} -Хуки -- это функции, с помощью которых вы можете "подцепиться" к состоянию и методам жизненного цикла React из функциональных компонентов. Хуки не работают внутри классов -- они дают вам возможность использовать React без классов. (Мы вам [не рекомендуем](/docs/hooks-intro.html#gradual-adoption-strategy) сразу же переписывать существующие компоненты, но при желании, вы можете начать использовать Хуки в своих новых компонентах.) +Хуки -- это функции, с помощью которых вы можете "подцепиться" к состоянию и методам жизненного цикла React из функциональных компонентов. Хуки не работают внутри классов -- они дают вам возможность использовать React без классов. (Мы вам [не рекомендуем](/docs/hooks-intro.html#gradual-adoption-strategy) сразу же переписывать существующие компоненты, но при желании, вы можете начать использовать хуки в своих новых компонентах.) -React содержит несколько встроенных Хуков как `useState`. Вы также можете создавать свои собственных Хуки, чтобы повторно использовать их в других своих компонентах. Давайте для начала рассмотрим встроенные Хуки. +React содержит несколько встроенных хуков как `useState`. Вы также можете создавать свои собственных хуки, чтобы повторно использовать их в других своих компонентах. Давайте для начала рассмотрим встроенные хуки. >Подробное объяснение > ->Вы можете узнать больше о Хуке состояния на этой странице: [использование хука состояния](/docs/hooks-state.html). +>Вы можете узнать больше о хуке состояния на этой странице: [использование хука состояния](/docs/hooks-state.html). ## ⚡️ Хук эффекта {#effect-hook} Вам скорее всего доводилось ранее запрашивать данные, делать подписки или вручную менять DOM из компонента React. Мы расцениваем эти операции как "побочные эффекты" (или сокращенно "эффекты"), так как они могут влиять на работы других компонентов и их нельзя выполнить во время рендера. -С помощью Хука Эффекта `useEffect`, вы можете выполнять побочные эффекты из функционального компонента. Он выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React классах, объединив их в единый API. (Вы можете найти сравнение `useEffect` и этих методов на странице [использование хука эффекта](/docs/hooks-effect.html).) +С помощью хука эффекта `useEffect`, вы можете выполнять побочные эффекты из функционального компонента. Он выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React классах, объединив их в единый API. (Вы можете найти сравнение `useEffect` и этих методов на странице [использование хука эффекта](/docs/hooks-effect.html).) К примеру, этот компонент устанавливает заголовок документа после того как React обновляет DOM: @@ -102,7 +102,7 @@ function Example() { Когда вы вызываете `useEffect`, React получает указание запустить вашу функцию с "эффектом" после того, как он отправил изменения в DOM. Так как эффекты объявляются внутри компонента, у них есть доступ к его пропсам и состоянию. React запускает эффекты после каждого рендера, *включая* первый рендер, по умолчанию. (Мы рассмотрим более подробно как это отличается от классовых методов жизненного цикла на странице [использование хука эффекта](/docs/hooks-effect.html).) -При необходимости, вы можете возвратить функцию из эффекта и тем самым указать ему как "подчистить" после себя. Например, этот компонент использует эффект, чтобы подписаться на статус друга в сети, и подчищает за собой, отписываясь от него. +При необходимости, вы можете возвратить функцию из эффекта и тем самым указать ему как выполнить "сброс" после себя. Например, этот компонент использует эффект, чтобы подписаться на статус друга в сети, и выполняет сброс, отписываясь от него. ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -129,7 +129,7 @@ function FriendStatus(props) { } ``` -В этом примере, React будет отписываться от нашего `ChatAPI` перед тем как компонент размонтируется и перед тем как перезапустить эффект при повторном рендере. (Вы также можете сделать так, чтобы [ React пропускал повторные подписки](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) если `props.friend.id`, который мы передали в `ChatAPI` остался без изменений.) +В этом примере, React будет отписываться от нашего `ChatAPI` перед тем как компонент размонтируется и перед тем как перезапустить эффект при повторном рендере. (Вы также можете сделать так, чтобы [ React пропускал повторные подписки](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) если `props.friend.id`, который мы передали в `ChatAPI`, остался без изменений.) Точно так же как и `useState`, вы можете использовать более одного эффекта в компоненте: @@ -154,7 +154,7 @@ function FriendStatusWithCounter(props) { // ... ``` -Хуки дают вам возможность размещать побочные эффекты в компоненте согласно вещам, к которым они относятся (например добавление или удаление подписки), вместо того, чтобы принуждать вас делить все согласно методам жизненного цикла. +Хуки дают вам возможность размещать побочные эффекты в компоненте согласно вещам, к которым они относятся (например добавление или отмена подписки), вместо того, чтобы принуждать вас делить все согласно методам жизненного цикла. >Подробное объяснение > @@ -164,10 +164,10 @@ function FriendStatusWithCounter(props) { Хуки -- это функции JavaScript, которые подчиняются двум дополнительным правилам: -* Вызывайте Хуки только **на верхнем уровне**. Не вызывайте хуки внутри циклов, условий или вложенных функций. -* Вызывайте Хуки только **из функциональных компонентов React**. Не вызывайте хуки из обычных функций JavaScript. (Есть только одно исключение, откуда можно вызывать Хуки -- это ваши пользовательские Хуки. Мы расскажем о них далее) +* Вызывайте хуки только **на верхнем уровне**. Не вызывайте хуки внутри циклов, условий или вложенных функций. +* Вызывайте хуки только **из функциональных компонентов React**. Не вызывайте хуки из обычных функций JavaScript. (Есть только одно исключение, откуда можно вызывать хуки -- это ваши пользовательские хуки. Мы расскажем о них далее) -Мы разработали специальный [плагин для линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы эти правила соблюдались автоматически. Мы понимаем, что эти правила могут показаться немного непонятными и накладывать определенные ограничния, но они очень важны для правильной работы Хуков. +Мы разработали специальный [плагин для линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы эти правила соблюдались автоматически. Мы понимаем, что эти правила могут показаться немного непонятными и накладывать определенные ограничния, но они очень важны для правильной работы хуков. >Подробное объяснение > @@ -175,11 +175,11 @@ function FriendStatusWithCounter(props) { ## 💡 Создание ваших собственных хуков {#-building-your-own-hooks} -Иногда, целесообразно использовать уже сущестующую логику состояния в других наших компонентах. На данный момент, есть два варианта решения данной проблемы: [компоненты высшего порядка](/docs/higher-order-components.html) и [рендер-пропсы](/docs/render-props.html). С помощью пользовательских Хуков, вы можете делать это без добавления каких-либо дополнительных компонентов в ваше дерево. +Иногда, целесообразно использовать уже сущестующую логику состояния в других наших компонентах. На данный момент, есть два варианта решения данной проблемы: [компоненты высшего порядка](/docs/higher-order-components.html) и [рендер-пропсы](/docs/render-props.html). С помощью пользовательских хуков, вы можете делать это без добавления каких-либо дополнительных компонентов в ваше дерево. -Ранее на этой странице, мы рассматривали компонент `FriendStatus`, который вызывал Хуки `useState` и `useEffect`, чтобы подписаться на стаус друга в сети. Допустим мы хотим еще раз использовать эту логику с подпиской, но уже в другом компоненте. +Ранее на этой странице, мы рассматривали компонент `FriendStatus`, который вызывал хуки `useState` и `useEffect`, чтобы подписаться на стаус друга в сети. Допустим мы хотим еще раз использовать эту логику с подпиской, но уже в другом компоненте. -Прежде всего, давайте извлечем эту логику в пользовательский Хук `useFriendStatus` +Прежде всего, давайте извлечем эту логику в пользовательский хук `useFriendStatus` ```js{3} import React, { useState, useEffect } from 'react'; @@ -230,19 +230,19 @@ function FriendListItem(props) { } ``` -Состояния этих компонентов никаким образом не зависят друг от друга. Хуки -- это способ использовать повторно *логику состояния*, а не само состояние. Более того, каждое *обращение* к Хуку обеспечивает совершенно изолированное состояние. Вы даже можете использовать один и тот же Хук несколько раз в одном компоненте. +Состояния этих компонентов никаким образом не зависят друг от друга. Хуки -- это способ использовать повторно *логику состояния*, а не само состояние. Более того, каждое *обращение* к хуку обеспечивает совершенно изолированное состояние. Вы даже можете использовать один и тот же хук несколько раз в одном компоненте. -Пользовательские Хуки это больше конвенция чем фича. Если имя функции начинается с "`use`" и она вызывает другие Хуки, мы расцениваем это как пользовательский Хук. Если вы будете придерживаться конвенции `useSomething` при названии Хуков, это позволит нашему плагину для линтера найти баги в коде, который использует Хуки. +Пользовательские хуки это в большей степени правило чем дополнение. Если имя функции начинается с "`use`" и она вызывает другие хуки, мы расцениваем это как пользовательский хук. Если вы будете придерживаться правила `useSomething` при названии хуков, это позволит нашему плагину для линтера найти баги в коде, который использует хуки. -Есть много подходящих случаев, чтобы написать пользовательские Хуки, такие как работа с формами, анимация, декларативные подписки, таймеры и, наверное, много других, о которых мы даже не подумали. Мы с нетерпением ждем пользовательские Хуки, которые сообщество React сможет придумать. +Есть много подходящих случаев, чтобы написать пользовательские хуки, такие как работа с формами, анимация, декларативные подписки, таймеры и, наверное, много других, о которых мы даже не подумали. Мы с нетерпением ждем пользовательские хуки, которые сообщество React сможет придумать. >Подробное объяснение > ->Вы можете узнать больше об пользовательских Хуках на этой странице: [создание ваших собственных хуков](/docs/hooks-custom.html). +>Вы можете узнать больше об пользовательских хуках на этой странице: [создание ваших собственных хуков](/docs/hooks-custom.html). ## 🔌 Другие хуки {#-other-hooks} -Есть еще несколько менее используемых встроенных Хуков, которые могут вам пригодиться. Например, с помощью [`useContext`](/docs/hooks-reference.html#usecontext), вы можете подписаться на React контекст без использования каких-либо вложений. +Есть еще несколько менее используемых встроенных хуков, которые могут вам пригодиться. Например, с помощью [`useContext`](/docs/hooks-reference.html#usecontext), вы можете подписаться на React контекст без использования каких-либо вложений. ```js{2,3} function Example() { @@ -252,7 +252,7 @@ function Example() { } ``` -А Хук [`useReducer`](/docs/hooks-reference.html#usereducer) дает вам возможность управлять внтуренним состоянием более сложного компонента с помощью редьюсера. +А хук [`useReducer`](/docs/hooks-reference.html#usereducer) дает вам возможность управлять внтуренним состоянием более сложного компонента с помощью редюсера. ```js{2} function Todos() { @@ -262,7 +262,7 @@ function Todos() { >Подробное объяснение > ->Вы можете узнать больше обо всех встроенных Хуках на этой странице: [описание API хуков](/docs/hooks-reference.html). +>Вы можете узнать больше обо всех встроенных хуках на этой странице: [описание API хуков](/docs/hooks-reference.html). ## Что дальше? {#next-steps} @@ -270,4 +270,4 @@ function Todos() { Вы также можете просмотреть [описание API хуков](/docs/hooks-reference.html) и [FAQ хуков](/docs/hooks-faq.html). -И наконец, не проходите мимо [вступительной страницы](/docs/hooks-intro.html), на которой вы узнаете *почему* мы добавляем Хуки и как мы планируем использовать их вместе с классами -- без необходимости переписывать наши приложения. +И наконец, не проходите мимо [вступительной страницы](/docs/hooks-intro.html), на которой вы узнаете *почему* мы добавляем хуки и как мы планируем использовать их вместе с классами -- без необходимости переписывать наши приложения. From a796b928aff0253f6ff9194ac8f820fb12bcbb22 Mon Sep 17 00:00:00 2001 From: Serge Date: Mon, 11 Feb 2019 21:12:40 -0500 Subject: [PATCH 5/9] Updated according to @lex111 review --- content/docs/hooks-overview.md | 68 +++++++++++++++++----------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 9916b666d..94080fbef 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -1,30 +1,30 @@ --- id: hooks-overview -title: Хуки на первый взгляд +title: Краткий обзор хуков permalink: docs/hooks-overview.html next: hooks-state.html prev: hooks-intro.html --- -*Хуки* -- это новое дополнение в React 16.8. С их помощью, вы можете использовать состояние и другие функции React без создания классов. +*Хуки* -- это новое дополнение в React 16.8. Они позволяют использовать состояние и другие возможности React без создания классов. -Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы найдете обзор хуков для опытных пользователей React. Имейте в виду, что это краткий обзор. Если вы запутаетесь, ищите вот такой жёлтый блок: +Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы получите общее представление о хуках. Имейте в виду, что это беглый обзор, который больше подойдет опытным пользователям React. Если вы запутаетесь, ищите вот такой жёлтый блок: >Подробное объяснение > ->Если вы хотите понять почему мы добавляем хуки в React, прочтите [мотивацию](/docs/hooks-intro.html#motivation). +>Если вы хотите понять, почему мы добавляем хуки в React, прочтите [мотивацию](/docs/hooks-intro.html#motivation). -**↑↑↑ В конце каждой секции будет такой жёлтый блок.** Он содержит более детальное объяснение. +**↑↑↑ В конце каждого раздела будет такой жёлтый блок.** Он содержит более детальное объяснение. ## 📌 Хук состояния {#-state-hook} -Этот пример рендерит счетчик. Если вы нажмете на кнопку, значение счетчика будет инкрементировано. +Этот пример рендерит счётчик. Если вы нажмёте на кнопку, значение счётчика будет инкрементировано. ```js{1,4,5} import React, { useState } from 'react'; function Example() { - // Объявляем новую переменную состояния под названием "count" + // Объявляем новую переменную состояния "count" const [count, setCount] = useState(0); return ( @@ -38,9 +38,9 @@ function Example() { } ``` -В этом примере, `useState` -- это *хук* (мы поговорим об этом далее). Мы вызываем его внутри функционального компонента, чтобы добавить туда внутреннее состояние. React будет сохранять это состояние при повторных рендерах. `useState` возвращает *текущее* значение состояния и функцию, с помощью которой вы сможете обновлять его. Вы можете вызывать эту функцию откуда угодно, например из обработчика событий. Она схожа с классовым `this.setState`, но она не объединяет новое и старое состояние вместе. (Вы можете найти сравнение `useState` и `this.state` на странице [использование хука состояния](/docs/hooks-state.html).) +В этом примере, `useState` -- это *хук* (мы поговорим об этом далее). Мы вызываем его внутри функционального компонента, чтобы добавить туда внутреннее состояние. React будет сохранять это состояние при повторных рендерах. `useState` возвращает *текущее* значение состояния и функцию, с помощью которой вы сможете обновлять его. Вы можете вызывать эту функцию откуда угодно, например из обработчика событий. Она схожа с классовым `this.setState`, но не объединяет новое и старое состояние вместе. (Вы можете найти сравнение хука `useState` и `this.state` на странице [использование хука состояния](/docs/hooks-state.html).) -Единственный аргумент `useState` это начальное состояние. В примере выше -- это `0`, так как наш счетчик начинается с нуля. Имейте в виду, что в отличии от `this.state`, этому состоянию совсем не обязательно быть объектом, хоть это, конечно же, возможно. Первоначальное значение аргумента используется только при первом рендере. +Единственный аргумент `useState` -- это начальное состояние. В примере выше -- это `0`, так как наш счётчик начинается с нуля. Имейте в виду, что в отличие от `this.state`, этому состоянию совсем не обязательно быть объектом, хоть это, конечно же, возможно. Первоначальное значение аргумента используется только при первом рендере. #### Объявление нескольких переменных состояния {#declaring-multiple-state-variables} @@ -57,13 +57,13 @@ function ExampleWithManyStates() { } ``` -Синтаксис [деструктурирования массивов](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) позволяет нам по разному называть переменные состояния, которые мы объявляем при вызове `useState`. Так как имен этих переменных нет в API `useState`, React предполагает, что если вы вызываете `useState` много раз, вы делаете это в одинаковой последовательности при каждом рендере. Мы расскажем, почему это работает и когда это целесообразно, немного позже. +Синтаксис [деструктуризации массивов](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) позволяет нам по разному называть переменные состояния, которые мы объявляем при вызове `useState`. Так как имён этих переменных нет в API `useState`, React предполагает, что если вы вызываете `useState` много раз, вы делаете это в одинаковой последовательности при каждом рендере. Мы расскажем, почему это работает и когда это целесообразно, немного позже. #### Что же такое хук? {#but-what-is-a-hook} -Хуки -- это функции, с помощью которых вы можете "подцепиться" к состоянию и методам жизненного цикла React из функциональных компонентов. Хуки не работают внутри классов -- они дают вам возможность использовать React без классов. (Мы вам [не рекомендуем](/docs/hooks-intro.html#gradual-adoption-strategy) сразу же переписывать существующие компоненты, но при желании, вы можете начать использовать хуки в своих новых компонентах.) +Хуки -- это функции, с помощью которых вы можете "подцепиться" к состоянию и методам жизненного цикла React из функциональных компонентов. Хуки не работают внутри классов -- они дают вам возможность использовать React без классов. (Мы [не рекомендуем](/docs/hooks-intro.html#gradual-adoption-strategy) сразу же переписывать существующие компоненты, но при желании, вы можете начать использовать хуки в своих новых компонентах.) -React содержит несколько встроенных хуков как `useState`. Вы также можете создавать свои собственных хуки, чтобы повторно использовать их в других своих компонентах. Давайте для начала рассмотрим встроенные хуки. +React содержит несколько встроенных хуков таких как `useState`. Вы также можете создавать собственные хуки, чтобы повторно использовать их в других своих компонентах. Давайте для начала рассмотрим встроенные хуки. >Подробное объяснение > @@ -71,11 +71,11 @@ React содержит несколько встроенных хуков как ## ⚡️ Хук эффекта {#effect-hook} -Вам скорее всего доводилось ранее запрашивать данные, делать подписки или вручную менять DOM из компонента React. Мы расцениваем эти операции как "побочные эффекты" (или сокращенно "эффекты"), так как они могут влиять на работы других компонентов и их нельзя выполнить во время рендера. +Вам скорее всего доводилось ранее запрашивать данные, делать подписки или вручную менять DOM из React-компонента. Мы расцениваем эти операции как "побочные эффекты" (или сокращённо "эффекты"), так как они могут влиять на работу других компонентов и их нельзя выполнить во время рендера. -С помощью хука эффекта `useEffect`, вы можете выполнять побочные эффекты из функционального компонента. Он выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React классах, объединив их в единый API. (Вы можете найти сравнение `useEffect` и этих методов на странице [использование хука эффекта](/docs/hooks-effect.html).) +С помощью хука эффекта `useEffect` вы можете выполнять побочные эффекты из функционального компонента. Он выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React-классах, объединив их в единый API. (Вы можете найти сравнение `useEffect` и этих методов на странице [использование хука эффекта](/docs/hooks-effect.html).) -К примеру, этот компонент устанавливает заголовок документа после того как React обновляет DOM: +К примеру, этот компонент устанавливает заголовок документа после того, как React обновляет DOM: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -85,7 +85,7 @@ function Example() { // По принципу componentDidMount и componentDidUpdate: useEffect(() => { - // Обновляем заголовок документа используя API браузера + // Обновляем заголовок документа, используя API браузера document.title = `You clicked ${count} times`; }); @@ -100,9 +100,9 @@ function Example() { } ``` -Когда вы вызываете `useEffect`, React получает указание запустить вашу функцию с "эффектом" после того, как он отправил изменения в DOM. Так как эффекты объявляются внутри компонента, у них есть доступ к его пропсам и состоянию. React запускает эффекты после каждого рендера, *включая* первый рендер, по умолчанию. (Мы рассмотрим более подробно как это отличается от классовых методов жизненного цикла на странице [использование хука эффекта](/docs/hooks-effect.html).) +Когда вы вызываете `useEffect`, React получает указание запустить вашу функцию с "эффектом" после того, как он отправил изменения в DOM. Поскольку эффекты объявляются внутри компонента, у них есть доступ к его пропсам и состоянию. По умолчанию, React запускает эффекты после каждого рендера, *включая* первый рендер. (Мы рассмотрим более подробно, как это отличается от классовых методов жизненного цикла на странице [использование хука эффекта](/docs/hooks-effect.html).) -При необходимости, вы можете возвратить функцию из эффекта и тем самым указать ему как выполнить "сброс" после себя. Например, этот компонент использует эффект, чтобы подписаться на статус друга в сети, и выполняет сброс, отписываясь от него. +При необходимости вы можете возвратить функцию из эффекта и тем самым указать ему, как выполнить "сброс" после себя. Например, этот компонент использует эффект, чтобы подписаться на статус друга в сети, и выполняет сброс, отписываясь от него. ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -129,9 +129,9 @@ function FriendStatus(props) { } ``` -В этом примере, React будет отписываться от нашего `ChatAPI` перед тем как компонент размонтируется и перед тем как перезапустить эффект при повторном рендере. (Вы также можете сделать так, чтобы [ React пропускал повторные подписки](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) если `props.friend.id`, который мы передали в `ChatAPI`, остался без изменений.) +В этом примере, React будет отписываться от нашего `ChatAPI` перед тем, как компонент размонтируется и перед тем, как перезапустить эффект при повторном рендере. (Вы также можете сделать так, чтобы [React пропускал повторные подписки](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) если `props.friend.id`, который мы передали в `ChatAPI`, остался без изменений.) -Точно так же как и `useState`, вы можете использовать более одного эффекта в компоненте: +Так же как и `useState`, вы можете использовать более одного эффекта в компоненте: ```js{3,8} function FriendStatusWithCounter(props) { @@ -154,7 +154,7 @@ function FriendStatusWithCounter(props) { // ... ``` -Хуки дают вам возможность размещать побочные эффекты в компоненте согласно вещам, к которым они относятся (например добавление или отмена подписки), вместо того, чтобы принуждать вас делить все согласно методам жизненного цикла. +Хуки дают вам возможность организовать побочные эффекты в компоненте по связанным частям (например добавление или отмена подписки), вместо того, чтобы принуждать вас делить все согласно методам жизненного цикла. >Подробное объяснение > @@ -165,21 +165,21 @@ function FriendStatusWithCounter(props) { Хуки -- это функции JavaScript, которые подчиняются двум дополнительным правилам: * Вызывайте хуки только **на верхнем уровне**. Не вызывайте хуки внутри циклов, условий или вложенных функций. -* Вызывайте хуки только **из функциональных компонентов React**. Не вызывайте хуки из обычных функций JavaScript. (Есть только одно исключение, откуда можно вызывать хуки -- это ваши пользовательские хуки. Мы расскажем о них далее) +* Вызывайте хуки только **из функциональных компонентов React**. Не вызывайте хуки из обычных JavaScript-функций . (Есть только одно исключение, откуда можно вызывать хуки -- это ваши пользовательские хуки. Мы расскажем о них далее) -Мы разработали специальный [плагин для линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы эти правила соблюдались автоматически. Мы понимаем, что эти правила могут показаться немного непонятными и накладывать определенные ограничния, но они очень важны для правильной работы хуков. +Мы разработали специальный [плагин для линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы эти правила соблюдались автоматически. Мы понимаем, что эти правила могут показаться немного непонятными и накладывать определённые ограничения, но они очень важны для правильной работы хуков. >Подробное объяснение > >Вы можете узнать больше об этих правилах на этой странице: [правила хуков](/docs/hooks-rules.html). -## 💡 Создание ваших собственных хуков {#-building-your-own-hooks} +## 💡 Создание собственных хуков {#-building-your-own-hooks} -Иногда, целесообразно использовать уже сущестующую логику состояния в других наших компонентах. На данный момент, есть два варианта решения данной проблемы: [компоненты высшего порядка](/docs/higher-order-components.html) и [рендер-пропсы](/docs/render-props.html). С помощью пользовательских хуков, вы можете делать это без добавления каких-либо дополнительных компонентов в ваше дерево. +Иногда целесообразно использовать уже существующую логику состояния в других наших компонентах. На данный момент есть два варианта решения данной проблемы: [компоненты высшего порядка](/docs/higher-order-components.html) и [рендер-пропсы](/docs/render-props.html). С помощью пользовательских хуков вы можете делать это без добавления каких-либо дополнительных компонентов в ваше дерево. -Ранее на этой странице, мы рассматривали компонент `FriendStatus`, который вызывал хуки `useState` и `useEffect`, чтобы подписаться на стаус друга в сети. Допустим мы хотим еще раз использовать эту логику с подпиской, но уже в другом компоненте. +Ранее на этой странице мы рассматривали компонент `FriendStatus`, который вызывал хуки `useState` и `useEffect`, чтобы подписаться на статус друга в сети. Допустим, мы хотим ещё раз использовать эту логику с подпиской, но уже в другом компоненте. -Прежде всего, давайте извлечем эту логику в пользовательский хук `useFriendStatus` +Прежде всего, давайте извлечём эту логику в пользовательский хук `useFriendStatus` ```js{3} import React, { useState, useEffect } from 'react'; @@ -232,9 +232,9 @@ function FriendListItem(props) { Состояния этих компонентов никаким образом не зависят друг от друга. Хуки -- это способ использовать повторно *логику состояния*, а не само состояние. Более того, каждое *обращение* к хуку обеспечивает совершенно изолированное состояние. Вы даже можете использовать один и тот же хук несколько раз в одном компоненте. -Пользовательские хуки это в большей степени правило чем дополнение. Если имя функции начинается с "`use`" и она вызывает другие хуки, мы расцениваем это как пользовательский хук. Если вы будете придерживаться правила `useSomething` при названии хуков, это позволит нашему плагину для линтера найти баги в коде, который использует хуки. +Пользовательские хуки это в большей степени соглашение, чем дополнение. Если имя функции начинается с "`use`" и она вызывает другие хуки, мы расцениваем это как пользовательский хук. Если вы будете придерживаться соглашение `useSomething` при названии хуков, это позволит нашему плагину для линтера найти баги в коде, который использует хуки. -Есть много подходящих случаев, чтобы написать пользовательские хуки, такие как работа с формами, анимация, декларативные подписки, таймеры и, наверное, много других, о которых мы даже не подумали. Мы с нетерпением ждем пользовательские хуки, которые сообщество React сможет придумать. +Есть много подходящих случаев, чтобы написать пользовательские хуки, такие как работа с формами, анимация, декларативные подписки, таймеры и, наверное, много других, которые мы даже не рассматривали. Мы с нетерпением ждём пользовательские хуки, которые сообщество React сможет придумать. >Подробное объяснение > @@ -242,7 +242,7 @@ function FriendListItem(props) { ## 🔌 Другие хуки {#-other-hooks} -Есть еще несколько менее используемых встроенных хуков, которые могут вам пригодиться. Например, с помощью [`useContext`](/docs/hooks-reference.html#usecontext), вы можете подписаться на React контекст без использования каких-либо вложений. +Есть ещё несколько менее используемых встроенных хуков, которые могут вам пригодиться. Например, с помощью [`useContext`](/docs/hooks-reference.html#usecontext), вы можете подписаться на контекст React без использования каких-либо вложений. ```js{2,3} function Example() { @@ -252,7 +252,7 @@ function Example() { } ``` -А хук [`useReducer`](/docs/hooks-reference.html#usereducer) дает вам возможность управлять внтуренним состоянием более сложного компонента с помощью редюсера. +А хук [`useReducer`](/docs/hooks-reference.html#usereducer) даёт возможность управлять внтуренним состоянием более сложного компонента с помощью редюсера. ```js{2} function Todos() { @@ -262,12 +262,12 @@ function Todos() { >Подробное объяснение > ->Вы можете узнать больше обо всех встроенных хуках на этой странице: [описание API хуков](/docs/hooks-reference.html). +>Вы можете узнать больше обо всех встроенных хуках на этой странице: [справочник API хуков](/docs/hooks-reference.html). ## Что дальше? {#next-steps} -Фух, давайте перестанем торопиться и охладим немного пыл! Если какие-либо вещи вам были непоняты или вы хотите узнать о чем-либо более подробно, вы можете начать читать следующие страницы, начиная с документации [хука состояния](/docs/hooks-state.html). +Фух, давайте перестанем торопиться и охладим немного пыл! Если что-то вам непонятно или вы хотите узнать о чем-либо более подробно, вы можете начать читать следующие страницы, начиная с документации [хука состояния](/docs/hooks-state.html). -Вы также можете просмотреть [описание API хуков](/docs/hooks-reference.html) и [FAQ хуков](/docs/hooks-faq.html). +Вы также можете просмотреть [справочник API хуков](/docs/hooks-reference.html) и [FAQ хуков](/docs/hooks-faq.html). И наконец, не проходите мимо [вступительной страницы](/docs/hooks-intro.html), на которой вы узнаете *почему* мы добавляем хуки и как мы планируем использовать их вместе с классами -- без необходимости переписывать наши приложения. From cbd4f976f8041f71f0514a652d2486d7262069be Mon Sep 17 00:00:00 2001 From: Serge Date: Tue, 12 Feb 2019 21:17:05 -0500 Subject: [PATCH 6/9] Updated according to #94 --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 94080fbef..2961b3622 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -6,7 +6,7 @@ next: hooks-state.html prev: hooks-intro.html --- -*Хуки* -- это новое дополнение в React 16.8. Они позволяют использовать состояние и другие возможности React без создания классов. +*Хуки* -- новая возможность в React 16.8, которая позволяет использовать состояние и другие возможности React без написания классов. Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы получите общее представление о хуках. Имейте в виду, что это беглый обзор, который больше подойдет опытным пользователям React. Если вы запутаетесь, ищите вот такой жёлтый блок: From c0e428d79567c31d7f9c6db1fcc01014dd30133d Mon Sep 17 00:00:00 2001 From: Serge Date: Tue, 12 Feb 2019 21:30:26 -0500 Subject: [PATCH 7/9] Removed unneeded space --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 2961b3622..99b2be552 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -165,7 +165,7 @@ function FriendStatusWithCounter(props) { Хуки -- это функции JavaScript, которые подчиняются двум дополнительным правилам: * Вызывайте хуки только **на верхнем уровне**. Не вызывайте хуки внутри циклов, условий или вложенных функций. -* Вызывайте хуки только **из функциональных компонентов React**. Не вызывайте хуки из обычных JavaScript-функций . (Есть только одно исключение, откуда можно вызывать хуки -- это ваши пользовательские хуки. Мы расскажем о них далее) +* Вызывайте хуки только **из функциональных компонентов React**. Не вызывайте хуки из обычных JavaScript-функций. (Есть только одно исключение, откуда можно вызывать хуки -- это ваши пользовательские хуки. Мы расскажем о них далее) Мы разработали специальный [плагин для линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы эти правила соблюдались автоматически. Мы понимаем, что эти правила могут показаться немного непонятными и накладывать определённые ограничения, но они очень важны для правильной работы хуков. From c6e8a48f65e8ef213fe8c335aa77911571e465e5 Mon Sep 17 00:00:00 2001 From: Serge Date: Fri, 15 Feb 2019 20:28:12 -0500 Subject: [PATCH 8/9] Changed array destructuring link, updated once again according to #94 --- content/docs/hooks-overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 99b2be552..3f3073843 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -6,7 +6,7 @@ next: hooks-state.html prev: hooks-intro.html --- -*Хуки* -- новая возможность в React 16.8, которая позволяет использовать состояние и другие возможности React без написания классов. +*Хуки* -- новинка в React 16.8, которая позволяет использовать состояние и другие возможности React без написания классов. Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы получите общее представление о хуках. Имейте в виду, что это беглый обзор, который больше подойдет опытным пользователям React. Если вы запутаетесь, ищите вот такой жёлтый блок: @@ -57,7 +57,7 @@ function ExampleWithManyStates() { } ``` -Синтаксис [деструктуризации массивов](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) позволяет нам по разному называть переменные состояния, которые мы объявляем при вызове `useState`. Так как имён этих переменных нет в API `useState`, React предполагает, что если вы вызываете `useState` много раз, вы делаете это в одинаковой последовательности при каждом рендере. Мы расскажем, почему это работает и когда это целесообразно, немного позже. +Синтаксис [деструктуризации массивов](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%D0%A0%D0%B0%D0%B7%D0%B1%D0%BE%D1%80_%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%BE%D0%B2) позволяет нам по разному называть переменные состояния, которые мы объявляем при вызове `useState`. Так как имён этих переменных нет в API `useState`, React предполагает, что если вы вызываете `useState` много раз, вы делаете это в одинаковой последовательности при каждом рендере. Мы расскажем, почему это работает и когда это целесообразно, немного позже. #### Что же такое хук? {#but-what-is-a-hook} From 7cad409469162871c4c1abe6e1f0bab4653f123e Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 21 Feb 2019 18:22:25 -0500 Subject: [PATCH 9/9] Updated according to @another-guy review Co-Authored-By: Hisagr --- content/docs/hooks-overview.md | 55 +++++++++++++++++----------------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index a7a060b98..b44635df7 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -8,17 +8,16 @@ prev: hooks-intro.html *Хуки* -- новинка в React 16.8, которая позволяет использовать состояние и другие возможности React без написания классов. -Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы получите общее представление о хуках. Имейте в виду, что это беглый обзор, который больше подойдет опытным пользователям React. Если вы запутаетесь, ищите вот такой жёлтый блок: +Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы получите общее представление о хуках. Имейте в виду, что это беглый обзор, который больше подойдет опытным пользователям React. В конце каждого раздела есть вот такой жёлтый блок с детальным объяснением на случай, если вы запутались: >Подробное объяснение > >Если вы хотите понять, почему мы добавляем хуки в React, прочтите [мотивацию](/docs/hooks-intro.html#motivation). -**↑↑↑ В конце каждого раздела будет такой жёлтый блок.** Он содержит более детальное объяснение. ## 📌 Хук состояния {#state-hook} -Этот пример рендерит счётчик. Если вы нажмёте на кнопку, значение счётчика будет инкрементировано. +Рассмотрим пример, в котором рендерится счётчик. Если вы нажмёте на кнопку, значение счётчика будет инкрементировано. ```js{1,4,5} import React, { useState } from 'react'; @@ -38,14 +37,14 @@ function Example() { } ``` -В этом примере, `useState` -- это *хук* (мы поговорим об этом далее). Мы вызываем его внутри функционального компонента, чтобы добавить туда внутреннее состояние. React будет сохранять это состояние при повторных рендерах. `useState` возвращает *текущее* значение состояния и функцию, с помощью которой вы сможете обновлять его. Вы можете вызывать эту функцию откуда угодно, например из обработчика событий. Она схожа с классовым `this.setState`, но не объединяет новое и старое состояние вместе. (Вы можете найти сравнение хука `useState` и `this.state` на странице [использование хука состояния](/docs/hooks-state.html).) +В этом примере, `useState` -- это *хук* (определение хука дано ниже). Мы вызываем его, чтобы наделить наш функциональный компонент внутренним состоянием. React будет хранить это состояние между рендерами. Вызов `useState` возвращает две вещи: *текущее* значение состояния и функцию для его обновления. Эту функцию можно использовать где угодно, например, в обработчике событий. Она схожа с `this.setState` в классах, но не слияет новое и старое состояние вместе. Сравнение хука `useState` и `this.state` приводится на странице [Использование хука состояния](/docs/hooks-state.html). -Единственный аргумент `useState` -- это начальное состояние. В примере выше -- это `0`, так как наш счётчик начинается с нуля. Имейте в виду, что в отличие от `this.state`, этому состоянию совсем не обязательно быть объектом, хоть это, конечно же, возможно. Первоначальное значение аргумента используется только при первом рендере. +Единственный аргумент `useState` -- это начальное состояние. В примере выше -- это `0`, так как наш счётчик начинается с нуля. Заметьте, что в отличие от `this.state`, в нашем случае состояние может, но не обязано, быть объектом. Исходное значение аргумента используется только при первом рендере. #### Объявление нескольких переменных состояния {#declaring-multiple-state-variables} -Вы можете использовать хук состояния более одного раза в компоненте. +Хук состояния можно использовать в компоненте более одного раза. ```js function ExampleWithManyStates() { @@ -63,17 +62,17 @@ function ExampleWithManyStates() { Хуки -- это функции, с помощью которых вы можете "подцепиться" к состоянию и методам жизненного цикла React из функциональных компонентов. Хуки не работают внутри классов -- они дают вам возможность использовать React без классов. (Мы [не рекомендуем](/docs/hooks-intro.html#gradual-adoption-strategy) сразу же переписывать существующие компоненты, но при желании, вы можете начать использовать хуки в своих новых компонентах.) -React содержит несколько встроенных хуков таких как `useState`. Вы также можете создавать собственные хуки, чтобы повторно использовать их в других своих компонентах. Давайте для начала рассмотрим встроенные хуки. +React содержит несколько встроенных хуков, таких как `useState`. Вы также можете создавать собственные хуки, чтобы повторно использовать их в других своих компонентах. Давайте для начала рассмотрим встроенные хуки. >Подробное объяснение > ->Вы можете узнать больше о хуке состояния на этой странице: [использование хука состояния](/docs/hooks-state.html). +>Вы можете узнать больше на странице [Использование хука состояния](/docs/hooks-state.html). ## ⚡️ Хук эффекта {#effect-hook} Вам скорее всего доводилось ранее запрашивать данные, делать подписки или вручную менять DOM из React-компонента. Мы расцениваем эти операции как "побочные эффекты" (или сокращённо "эффекты"), так как они могут влиять на работу других компонентов и их нельзя выполнить во время рендера. -С помощью хука эффекта `useEffect` вы можете выполнять побочные эффекты из функционального компонента. Он выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React-классах, объединив их в единый API. (Вы можете найти сравнение `useEffect` и этих методов на странице [использование хука эффекта](/docs/hooks-effect.html).) +С помощью хука эффекта `useEffect` вы можете выполнять побочные эффекты из функционального компонента. Он выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React-классах, объединив их в единый API. Вы можете найти сравнение `useEffect` и этих методов на странице [использование хука эффекта](/docs/hooks-effect.html). К примеру, этот компонент устанавливает заголовок документа после того, как React обновляет DOM: @@ -100,9 +99,9 @@ function Example() { } ``` -Когда вы вызываете `useEffect`, React получает указание запустить вашу функцию с "эффектом" после того, как он отправил изменения в DOM. Поскольку эффекты объявляются внутри компонента, у них есть доступ к его пропсам и состоянию. По умолчанию, React запускает эффекты после каждого рендера, *включая* первый рендер. (Мы рассмотрим более подробно, как это отличается от классовых методов жизненного цикла на странице [использование хука эффекта](/docs/hooks-effect.html).) +Когда вы вызываете `useEffect`, React получает указание запустить вашу функцию с "эффектом" после того, как он отправил изменения в DOM. Поскольку эффекты объявляются внутри компонента, у них есть доступ к его пропсам и состоянию. По умолчанию, React запускает эффекты после каждого рендера, *включая* первый рендер. Мы рассмотрим более подробно, как это отличается от классовых методов жизненного цикла на странице [использование хука эффекта](/docs/hooks-effect.html). -При необходимости вы можете возвратить функцию из эффекта и тем самым указать ему, как выполнить "сброс" после себя. Например, этот компонент использует эффект, чтобы подписаться на статус друга в сети, и выполняет сброс, отписываясь от него. +При необходимости вы можете вернуть из эффекта функцию, которая указывает эффекту, как выполнить за собой "сброс". Например, этот компонент использует эффект, чтобы подписаться на статус друга в сети, и выполняет сброс, отписываясь от него. ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -129,7 +128,7 @@ function FriendStatus(props) { } ``` -В этом примере, React будет отписываться от нашего `ChatAPI` перед тем, как компонент размонтируется и перед тем, как перезапустить эффект при повторном рендере. (Вы также можете сделать так, чтобы [React пропускал повторные подписки](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) если `props.friend.id`, который мы передали в `ChatAPI`, остался без изменений.) +В этом примере, React будет отписываться от нашего `ChatAPI` перед тем, как компонент размонтируется и перед тем, как перезапустить эффект при повторном рендере. Вы можете сделать так, чтобы [React пропускал повторные подписки](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) если `props.friend.id`, который мы передали в `ChatAPI`, остался без изменений. Так же как и `useState`, вы можете использовать более одного эффекта в компоненте: @@ -154,28 +153,28 @@ function FriendStatusWithCounter(props) { // ... ``` -Хуки дают вам возможность организовать побочные эффекты в компоненте по связанным частям (например добавление или отмена подписки), вместо того, чтобы принуждать вас делить все согласно методам жизненного цикла. +Хуки дают вам возможность организовать побочные эффекты в компоненте по связанным частям (например, добавление или отмена подписки), вместо того, чтобы принуждать вас делить все согласно методам жизненного цикла. >Подробное объяснение > ->Вы можете узнать больше о `useEffect` на этой странице: [использование хука эффекта](/docs/hooks-effect.html). +>Вы можете узнать больше о `useEffect` на странице [Использование хука эффекта](/docs/hooks-effect.html). ## ✌️ Правила хуков {#rules-of-hooks} -Хуки -- это функции JavaScript, которые подчиняются двум дополнительным правилам: +Хуки -- это функции JavaScript, которые налагают два дополнительных правила: -* Вызывайте хуки только **на верхнем уровне**. Не вызывайте хуки внутри циклов, условий или вложенных функций. -* Вызывайте хуки только **из функциональных компонентов React**. Не вызывайте хуки из обычных JavaScript-функций. (Есть только одно исключение, откуда можно вызывать хуки -- это ваши пользовательские хуки. Мы расскажем о них далее) +* Хуки следует вызывать только **на верхнем уровне**. Не вызывайте хуки внутри циклов, условий или вложенных функций. +* Хуки следует вызывать только **из функциональных компонентов React**. Не вызывайте хуки из обычных JavaScript-функций. Есть только одно исключение, откуда можно вызывать хуки -- это ваши пользовательские хуки. Мы расскажем о них далее. -Мы разработали специальный [плагин для линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы эти правила соблюдались автоматически. Мы понимаем, что эти правила могут показаться немного непонятными и накладывать определённые ограничения, но они очень важны для правильной работы хуков. +Мы разработали специальный [плагин для линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), который помогает обеспечивать соблюдение этих правил. Мы понимаем, что эти правила могут показаться немного непонятными и накладывать определённые ограничения, но они очень важны для правильной работы хуков. >Подробное объяснение > ->Вы можете узнать больше об этих правилах на этой странице: [правила хуков](/docs/hooks-rules.html). +>Вы можете узнать больше на странице [Правила хуков](/docs/hooks-rules.html). ## 💡 Создание собственных хуков {#building-your-own-hooks} -Иногда целесообразно использовать уже существующую логику состояния в других наших компонентах. На данный момент есть два варианта решения данной проблемы: [компоненты высшего порядка](/docs/higher-order-components.html) и [рендер-пропсы](/docs/render-props.html). С помощью пользовательских хуков вы можете делать это без добавления каких-либо дополнительных компонентов в ваше дерево. +Иногда нужно повторно использовать одинаковую логику состояния в нескольких компонентах. Традиционно использовались подхода: [компоненты высшего порядка](/docs/higher-order-components.html) и [рендер-пропсы](/docs/render-props.html). С помощью пользовательских хуков эта задача решается без добавления ненужных компонентов в ваше дерево. Ранее на этой странице мы рассматривали компонент `FriendStatus`, который вызывал хуки `useState` и `useEffect`, чтобы подписаться на статус друга в сети. Допустим, мы хотим ещё раз использовать эту логику с подпиской, но уже в другом компоненте. @@ -202,9 +201,9 @@ function useFriendStatus(friendID) { } ``` -Он принимает `friendID` в качестве аргумента и возвращает переменную, которая показывает в сети наш друг или нет. +Хук принимает `friendID` в качестве аргумента и возвращает переменную, которая показывает, в сети наш друг или нет. -Теперь мы можем использовать его в обоих наших компонентах: +Теперь мы можем использовать этот хук в обоих наших компонентах: ```js{2} @@ -232,13 +231,13 @@ function FriendListItem(props) { Состояния этих компонентов никаким образом не зависят друг от друга. Хуки -- это способ использовать повторно *логику состояния*, а не само состояние. Более того, каждое *обращение* к хуку обеспечивает совершенно изолированное состояние. Вы даже можете использовать один и тот же хук несколько раз в одном компоненте. -Пользовательские хуки это в большей степени соглашение, чем дополнение. Если имя функции начинается с "`use`" и она вызывает другие хуки, мы расцениваем это как пользовательский хук. Если вы будете придерживаться соглашение `useSomething` при названии хуков, это позволит нашему плагину для линтера найти баги в коде, который использует хуки. +Пользовательские хуки это в большей степени соглашение, чем дополнение. Если имя функции начинается с "`use`" и она вызывает другие хуки, мы расцениваем это как пользовательский хук. Если вы будете придерживаться соглашения `useSomething` при именовании хуков, это позволит нашему плагину для линтера найти баги в коде, который использует хуки. -Есть много подходящих случаев, чтобы написать пользовательские хуки, такие как работа с формами, анимация, декларативные подписки, таймеры и, наверное, много других, которые мы даже не рассматривали. Мы с нетерпением ждём пользовательские хуки, которые сообщество React сможет придумать. +Есть много подходящих случаев, чтобы написать пользовательские хуки, такие как работа с формами, анимация, декларативные подписки, таймеры и, наверное, много других, о которых мы даже не думали. Мы с нетерпением ждём увидеть, какие же пользовательские хуки сообщество React сможет придумать. >Подробное объяснение > ->Вы можете узнать больше об пользовательских хуках на этой странице: [создание ваших собственных хуков](/docs/hooks-custom.html). +>Вы можете узнать больше на странице [Создание пользовательских хуков](/docs/hooks-custom.html). ## 🔌 Другие хуки {#other-hooks} @@ -262,12 +261,12 @@ function Todos() { >Подробное объяснение > ->Вы можете узнать больше обо всех встроенных хуках на этой странице: [справочник API хуков](/docs/hooks-reference.html). +>Вы можете узнать больше обо всех встроенных хуках на странице [справочник API хуков](/docs/hooks-reference.html). ## Что дальше? {#next-steps} -Фух, давайте перестанем торопиться и охладим немного пыл! Если что-то вам непонятно или вы хотите узнать о чем-либо более подробно, вы можете начать читать следующие страницы, начиная с документации [хука состояния](/docs/hooks-state.html). +Фух, давайте перестанем торопиться и немного охладим пыл! Если вам что-то непонятно или вы хотите узнать о чем-либо более подробно, вы можете начать читать следующие страницы, начиная с документации [хука состояния](/docs/hooks-state.html). Вы также можете просмотреть [справочник API хуков](/docs/hooks-reference.html) и [FAQ хуков](/docs/hooks-faq.html). -И наконец, не проходите мимо [вступительной страницы](/docs/hooks-intro.html), на которой вы узнаете *почему* мы добавляем хуки и как мы планируем использовать их вместе с классами -- без необходимости переписывать наши приложения. +И наконец, не проходите мимо [вступительной страницы](/docs/hooks-intro.html), на которой вы узнаете *почему* мы добавляем хуки и как мы планируем использовать их вместе с классами без необходимости переписывать наши приложения.