From b28781ca140478b2bfef8bb20f00bf17f44f821e Mon Sep 17 00:00:00 2001 From: Sergey Bulatovich Date: Sun, 24 Feb 2019 01:47:27 +0200 Subject: [PATCH 01/34] Translate Hooks API Reference --- content/docs/hooks-reference.md | 185 ++++++++++++++++---------------- 1 file changed, 94 insertions(+), 91 deletions(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index deeef54cf..fb785fbb1 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -1,22 +1,22 @@ --- id: hooks-reference -title: Hooks API Reference +title: Справочник API Хуков permalink: docs/hooks-reference.html prev: hooks-custom.html next: hooks-faq.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 без написания классов. -This page describes the APIs for the built-in Hooks in React. +На этой странице описаны API для встроенных хуков в React. -If you're new to Hooks, you might want to check out [the overview](/docs/hooks-overview.html) first. You may also find useful information in the [frequently asked questions](/docs/hooks-faq.html) section. +Если вы новичок в хуках, вы можете сначала ознакомиться с [общим обзором](/docs/hooks-overview.html). Вы также можете найти полезную информацию в разделе [часто задаваемых вопросов](/docs/hooks-faq.html). -- [Basic Hooks](#basic-hooks) +- [Основные хуки](#basic-hooks) - [`useState`](#usestate) - [`useEffect`](#useeffect) - [`useContext`](#usecontext) -- [Additional Hooks](#additional-hooks) +- [Дополнительные хуки](#additional-hooks) - [`useReducer`](#usereducer) - [`useCallback`](#usecallback) - [`useMemo`](#usememo) @@ -25,7 +25,7 @@ If you're new to Hooks, you might want to check out [the overview](/docs/hooks-o - [`useLayoutEffect`](#uselayouteffect) - [`useDebugValue`](#usedebugvalue) -## Basic Hooks {#basic-hooks} +## Основные хуки {#basic-hooks} ### `useState` {#usestate} @@ -33,54 +33,53 @@ If you're new to Hooks, you might want to check out [the overview](/docs/hooks-o const [state, setState] = useState(initialState); ``` -Returns a stateful value, and a function to update it. +Возвращает значение с состоянием и функцию для его обновления. -During the initial render, the returned state (`state`) is the same as the value passed as the first argument (`initialState`). +Во время первоначального рендеринга возвращаемое состояние (`state`) совпадает со значением, переданным в качестве первого аргумента (`initialState`). -The `setState` function is used to update the state. It accepts a new state value and enqueues a re-render of the component. +Функция `setState` используется для обновления состояния. Он принимает новое значение состояния и ставит в очередь повторную визуализацию компонента. ```js setState(newState); ``` -During subsequent re-renders, the first value returned by `useState` will always be the most recent state after applying updates. +Во время последующих повторных визуализаций первое значение, возвращаемое `useState`, всегда будет самым последним состоянием после применения обновлений. -#### Functional updates {#functional-updates} +#### Функциональные обновления {#functional-updates} -If the new state is computed using the previous state, you can pass a function to `setState`. The function will receive the previous value, and return an updated value. Here's an example of a counter component that uses both forms of `setState`: +Если новое состояние вычисляется с использованием предыдущего состояния, вы можете передать функцию `setState`. Функция получит предыдущее значение и вернет обновленное значение. Вот пример компонента счетчик, который использует обе формы `setState`: ```js function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> - Count: {count} - + Счет: {count} + ); } ``` +Кнопки "+" и "-" используют функциональную форму, потому что обновленное значение основано на предыдущем значении. Но кнопка «Сбросить» использует нормальную форму, потому что она всегда устанавливает счетчик обратно в 0. -The "+" and "-" buttons use the functional form, because the updated value is based on the previous value. But the "Reset" button uses the normal form, because it always sets the count back to 0. - -> Note +> Примечание > -> Unlike the `setState` method found in class components, `useState` does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax: +> В отличие от метода `setState`, который вы можете найти в компонентах класса, `setState` не объединяет объекты обновления автоматически. Вы можете повторить это поведение, комбинируя форму функции обновления с синтаксисом расширения объекта: > > ```js > setState(prevState => { -> // Object.assign would also work +> // Object.assign также будет работать > return {...prevState, ...updatedValues}; > }); > ``` > -> Another option is `useReducer`, which is more suited for managing state objects that contain multiple sub-values. +> Другой вариант - `useReducer`, который больше подходит для управления объектами состояния, которые содержат несколько значений. -#### Lazy initial state {#lazy-initial-state} +#### Ленивая инициализация состояния {#lazy-initial-state} -The `initialState` argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render: +Аргумент `initialState` - это состояние, используемое во время начального рендеринга. В последующих рендерах это не учитывается. Если начальное состояние является результатом дорогостоящих вычислений, вы можете вместо этого предоставить функцию, которая будет выполняться только при начальном рендеринге: ```js const [state, setState] = useState(() => { @@ -89,55 +88,58 @@ const [state, setState] = useState(() => { }); ``` -#### Bailing out of a state update {#bailing-out-of-a-state-update} +#### Выход из состояния обновления {#bailing-out-of-a-state-update} +Если вы обновите состояние хука до того же значения, что и текущее состояние, React не перересует дочерние компоненты или выстреливать эффекты. (React использует [`Object.is` алгоритм сравнения](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) + ### `useEffect` {#useeffect} ```js useEffect(didUpdate); ``` -Accepts a function that contains imperative, possibly effectful code. +Принимает функцию, которая содержит императивный, возможно, эффективный код. -Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React's _render phase_). Doing so will lead to confusing bugs and inconsistencies in the UI. +Мутации, подписки, таймеры, ведение журнала и другие побочные эффекты не допускаются внутри основного тела функционального компонента (называемого _фазой рендеринга_ React). Это приведет к запутанным ошибкам и несоответствиям в пользовательском интерфейсе. -Instead, use `useEffect`. The function passed to `useEffect` will run after the render is committed to the screen. Think of effects as an escape hatch from React's purely functional world into the imperative world. +Вместо этого используйте `useEffect`. Функция, переданная в `useEffect`, будет запущена после того, как рендер будет зафиксирован на экране. Думайте об эффектах как о спасательном люке из чисто функционального мира React в мир императивов. -By default, effects run after every completed render, but you can choose to fire it [only when certain values have changed](#conditionally-firing-an-effect). +По умолчанию эффекты запускаются после каждого завершенного рендеринга, но вы можете использовать его [только когда определенные значения изменились.](#conditionally-firing-an-effect). -#### Cleaning up an effect {#cleaning-up-an-effect} +#### Очистка эффекта {#cleaning-up-an-effect} -Often, effects create resources that need to be cleaned up before the component leaves the screen, such as a subscription or timer ID. To do this, the function passed to `useEffect` may return a clean-up function. For example, to create a subscription: +Часто эффекты создают ресурсы, которые необходимо очистить перед тем, как компонент покидает экран, например подписку или идентификатор таймера. Чтобы сделать это, функция переданная в `useEffect`, может вернуть функцию очистки. Например, чтобы создать подписку: ```js useEffect(() => { const subscription = props.source.subscribe(); return () => { - // Clean up the subscription + // Очистить подписку subscription.unsubscribe(); }; }); ``` -The clean-up function runs before the component is removed from the UI to prevent memory leaks. Additionally, if a component renders multiple times (as they typically do), the **previous effect is cleaned up before executing the next effect**. In our example, this means a new subscription is created on every update. To avoid firing an effect on every update, refer to the next section. +Функция очистки запускается до удаления компонента из пользовательского интерфейса, чтобы предотвратить утечки памяти. Кроме того, если компонент визуализируется несколько раз (как обычно происходит), **предыдущий эффект очищается перед выполнением следующего эффекта**. В нашем примере это означает, что новая подписка создается при каждом обновлении. Чтобы избежать воздействия на каждое обновление, обратитесь к следующему разделу. -#### Timing of effects {#timing-of-effects} +#### Сроки воздействия {#timing-of-effects} -Unlike `componentDidMount` and `componentDidUpdate`, the function passed to `useEffect` fires **after** layout and paint, during a deferred event. This makes it suitable for the many common side effects, like setting up subscriptions and event handlers, because most types of work shouldn't block the browser from updating the screen. +В отличие от `componentDidMount` и `componentDidUpdate`, функция, переданная `useEffect`, запускается **после** разметки и отрисовки во время отложенного события. Это делает его подходящим для многих распространенных побочных эффектов, таких как настройка подписок и обработчиков событий, потому что большинство типов работы не должны блокировать обновление экрана браузером. -However, not all effects can be deferred. For example, a DOM mutation that is visible to the user must fire synchronously before the next paint so that the user does not perceive a visual inconsistency. (The distinction is conceptually similar to passive versus active event listeners.) For these types of effects, React provides one additional Hook called [`useLayoutEffect`](#uselayouteffect). It has the same signature as `useEffect`, and only differs in when it is fired. +Однако не все эффекты могут быть отложены. Например, мутация DOM, которая видна пользователю, должна запускаться синхронно до следующего отрисовки, чтобы пользователь не воспринимал визуальное несоответствие. (Различие концептуально аналогично пассивным и активным прослушивателям событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только при его запуске. -Although `useEffect` is deferred until after the browser has painted, it's guaranteed to fire before any new renders. React will always flush a previous render's effects before starting a new update. +Хотя `useEffect` откладывается до тех пор, пока браузер не выполнит отрисовку, он гарантированно срабатывает перед любыми новыми рендерами. React всегда сбрасывает эффекты предыдущего рендера перед началом нового обновления. -#### Conditionally firing an effect {#conditionally-firing-an-effect} +#### Условное срабатывание эффекта {#conditionally-firing-an-effect} -The default behavior for effects is to fire the effect after every completed render. That way an effect is always recreated if one of its inputs changes. +Поведение по умолчанию для эффектов - запускать эффект после каждого завершенного рендера. Таким образом, эффект всегда пересоздается, если одино из его вхождений изменяется. +Однако в некоторых случаях это может быть излишним, например, в примере подписки из предыдущего раздела. Нам не нужно создавать новую подписку на каждое обновление, только если `исходные` реквизиты изменились. However, this may be overkill in some cases, like the subscription example from the previous section. We don't need to create a new subscription on every update, only if the `source` props has changed. -To implement this, pass a second argument to `useEffect` that is the array of values that the effect depends on. Our updated example now looks like this: +Чтобы реализовать это, передайте второй аргумент `useEffect`, который является массивом значений, от которых зависит эффект. Наш обновленный пример теперь выглядит так: ```js useEffect( @@ -151,13 +153,13 @@ useEffect( ); ``` -Now the subscription will only be recreated when `props.source` changes. +Теперь подписка будет воссоздана только при изменении `props.source`. -Passing in an empty array `[]` of inputs tells React that your effect doesn't depend on any values from the component, so that effect would run only on mount and clean up on unmount; it won't run on updates. +Передача пустого массива `[]` входных данных говорит React, что ваш эффект не зависит от каких-либо значений компонента, так что эффект будет работать только при монтировании и очищаться при размонтировании; он не будет запускаться на обновлениях. -> Note +> Примечание > -> The array of inputs is not passed as arguments to the effect function. Conceptually, though, that's what they represent: every value referenced inside the effect function should also appear in the inputs array. In the future, a sufficiently advanced compiler could create this array automatically. +> Массив входных данных не передается в качестве аргументов функции эффекта. Концептуально, однако, это то, что они представляют: каждое значение, на которое ссылается функция эффекта, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор может создать этот массив автоматически. ### `useContext` {#usecontext} @@ -165,13 +167,13 @@ Passing in an empty array `[]` of inputs tells React that your effect doesn't de const context = useContext(Context); ``` -Accepts a context object (the value returned from `React.createContext`) and returns the current context value, as given by the nearest context provider for the given context. +Принимает объект контекста (значение, возвращенное из `React.createContext`) и возвращает текущее значение контекста, как указано ближайшим поставщиком контекста для данного контекста. -When the provider updates, this Hook will trigger a rerender with the latest context value. +Когда провайдер обновляется, этот хук инициирует повторное перерисовку с последним значением контекста. -## Additional Hooks {#additional-hooks} +## Дополнительные хуки {#additional-hooks} -The following Hooks are either variants of the basic ones from the previous section, or only needed for specific edge cases. Don't stress about learning them up front. +Следующие хуки являются вариантами базовых из предыдущего раздела или необходимы только для конкретных крайних случаев. Не переживайте, изучая их заранее. ### `useReducer` {#usereducer} @@ -179,11 +181,11 @@ The following Hooks are either variants of the basic ones from the previous sect const [state, dispatch] = useReducer(reducer, initialArg, init); ``` -An alternative to [`useState`](#usestate). Accepts a reducer of type `(state, action) => newState`, and returns the current state paired with a `dispatch` method. (If you're familiar with Redux, you already know how this works.) +Альтернатива для [`useState`](#usestate). Принимает редьюсер типа `(state, action) => newState` и возвращает текущее состояние в паре с методом `dispatch`. (Если вы знакомы с Redux, вы уже знаете, как это работает.) -`useReducer` is usually preferable to `useState` when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. `useReducer` also lets you optimize performance for components that trigger deep updates because [you can pass `dispatch` down instead of callbacks](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down). +`useReducer` обычно предпочтительнее `useState`, когда у вас сложная логика состояния, которая включает в себя несколько значений, или когда следующее состояние зависит от предыдущего. `useReducer` также позволяет оптимизировать производительность компонентов, которые запускают глубокие обновления, [поскольку вы можете передавать `dispatch` вместо обратных вызовов](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down). -Here's the counter example from the [`useState`](#usestate) section, rewritten to use a reducer: +Вот пример счетчика из раздела [`useState`](#usestate), переписанный для использования редуктора: ```js const initialState = {count: 0}; @@ -211,9 +213,9 @@ function Counter({initialState}) { } ``` -#### Specifying the initial state {#specifying-the-initial-state} +#### Указание начального состояния {#specifying-the-initial-state} -There’s two different ways to initialize `useReducer` state. You may choose either one depending on the use case. The simplest way to pass the initial state as a second argument: +Существует два разных способа инициализации состояния `useReducer`. Вы можете выбрать любой из них в зависимости от варианта использования. Самый простой способ передать начальное состояние в качестве второго аргумента: ```js{3} const [state, dispatch] = useReducer( @@ -222,15 +224,15 @@ There’s two different ways to initialize `useReducer` state. You may choose ei ); ``` ->Note +>Примечание > ->React doesn’t use the `state = initialState` argument convention popularized by Redux. The initial value sometimes needs to depend on props and so is specified from the Hook call instead. If you feel strongly about this, you can call `useReducer(reducer, undefined, reducer)` to emulate the Redux behavior, but it's not encouraged. +>React не использует соглашение об аргументах `state = initialState`, популярное в Redux. Начальное значение иногда должно зависеть от реквизита и поэтому указывается вместо вызова хука. Если вы сильно в этом уверены, вы можете вызвать `useReducer(reducer, undefined, reducer)`, чтобы эмулировать поведение Redux, но это не рекомендуется. -#### Lazy initialization {#lazy-initialization} +#### Ленивая инициализация {#lazy-initialization} -You can also create the initial state lazily. To do this, you can pass an `init` function as the third argument. The initial state will be set to `init(initialArg)`. +Вы также можете создать начальное состояние лениво. Для этого вы можете передать функцию `init` в качестве третьего аргумента. Начальное состояние будет установлено в `init(initialArg)`. -It lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action: +Это позволяет извлечь логику для расчета начального состояния за пределами рудьюсера. Это также удобно для сброса состояния позже в ответ на действие: ```js{1-3,11-12,19,24} function init(initialCount) { @@ -266,8 +268,9 @@ function Counter({initialCount}) { } ``` -#### Bailing out of a dispatch {#bailing-out-of-a-dispatch} +#### Выход из отправки {#bailing-out-of-a-dispatch} +Если вы вернете то же значение из редьюсера хука, что и текущее состояние, React выйдет из строя без визуализации дочерних элементов или эффектов стрельбы. (React использует [алгоритм сравнения Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) If you return the same value from a Reducer Hook as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) ### `useCallback` {#usecallback} @@ -281,15 +284,15 @@ const memoizedCallback = useCallback( ); ``` -Returns a [memoized](https://en.wikipedia.org/wiki/Memoization) callback. +Возвращает [запоминенный](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) обратный вызов. -Pass an inline callback and an array of inputs. `useCallback` will return a memoized version of the callback that only changes if one of the inputs has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. `shouldComponentUpdate`). +Передайте встроенный обратный вызов и массив входных данных. `useCallback` вернет запомненную версию обратного вызова, которая изменяется только в случае изменения одного из входных данных. Это полезно при передаче обратных вызовов оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных визуализаций (например, `shouldComponentUpdate`). -`useCallback(fn, inputs)` is equivalent to `useMemo(() => fn, inputs)`. +`useCallback(fn, inputs)` это эквивалент `useMemo(() => fn, inputs)`. -> Note +> Примечание > -> The array of inputs is not passed as arguments to the callback. Conceptually, though, that's what they represent: every value referenced inside the callback should also appear in the inputs array. In the future, a sufficiently advanced compiler could create this array automatically. +> Массив входных данных не передается в качестве аргументов для обратного вызова. Концептуально, однако, это то, что они представляют: каждое значение, указанное в обратном вызове, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор может создать этот массив автоматически. ### `useMemo` {#usememo} @@ -297,19 +300,19 @@ Pass an inline callback and an array of inputs. `useCallback` will return a memo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ``` -Returns a [memoized](https://en.wikipedia.org/wiki/Memoization) value. +Возвращает [запоминенное](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) значение. -Pass a "create" function and an array of inputs. `useMemo` will only recompute the memoized value when one of the inputs has changed. This optimization helps to avoid expensive calculations on every render. +Передайте функцию "создать" и массив входов. `useMemo` будет повторно вычислять запомненное значение только тогда, когда одино из входных данных изменится. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере. -Remember that the function passed to `useMemo` runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in `useEffect`, not `useMemo`. +Помните, что функция, переданная `useMemo`, запускается во время рендеринга. Не делайте там ничего, что вы обычно не делаете во время рендеринга. Например, побочные эффекты принадлежат `useEffect`, а не `useMemo`. -If no array is provided, a new value will be computed whenever a new function instance is passed as the first argument. (With an inline function, on every render.) +Если массив не указан, новое значение будет вычислено всякий раз, когда в качестве первого аргумента передается новый экземпляр функции. (Со встроенной функцией на каждом рендере.) -**You may rely on `useMemo` as a performance optimization, not as a semantic guarantee.** In the future, React may choose to "forget" some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance. +**Вы можете использовать `useMemo` как оптимизацию производительности, а не как семантическую гарантию.** В будущем React может выбрать «забыть» некоторые ранее запомненные значения и пересчитать их при следующем рендере, например, освободить память для закадровых компонентов. Напишите свой код, чтобы он по-прежнему работал без `useMemo`, а затем добавьте его для оптимизации производительности. -> Note +> Примечание > -> The array of inputs is not passed as arguments to the function. Conceptually, though, that's what they represent: every value referenced inside the function should also appear in the inputs array. In the future, a sufficiently advanced compiler could create this array automatically. +> Массив входных данных не передается в качестве аргументов функции. Концептуально, однако, это то, что они представляют: каждое значение, на которое ссылается функция, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор может создать этот массив автоматически. ### `useRef` {#useref} @@ -317,27 +320,27 @@ If no array is provided, a new value will be computed whenever a new function in const refContainer = useRef(initialValue); ``` -`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. +`useRef` возвращает изменяемый объект ref, свойство `.current` которого инициализируется переданным аргументом (`initialValue`). Возвращенный объект будет сохраняться в течение всего времени жизни компонента. -A common use case is to access a child imperatively: +Обычный случай использования - это обязательный доступ к ребенку: ```js function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { - // `current` points to the mounted text input element + // `current` указывает на смонтированный элемент ввода текста inputEl.current.focus(); }; return ( <> - + ); } ``` -Note that `useRef()` is useful for more than the `ref` attribute. It's [handy for keeping any mutable value around](/docs/hooks-faq.html#is-there-something-like-instance-variables) similar to how you'd use instance fields in classes. +Обратите внимание, что `useRef()` полезен не только для атрибута `ref`. Это [удобно для хранения любого изменяемого значения](/docs/hooks-faq.html#is-there-something-like-instance-variables) примерно так же, как вы используете поля экземпляров в классах. ### `useImperativeHandle` {#useimperativehandle} @@ -345,7 +348,7 @@ Note that `useRef()` is useful for more than the `ref` attribute. It's [handy fo useImperativeHandle(ref, createHandle, [inputs]) ``` -`useImperativeHandle` customizes the instance value that is exposed to parent components when using `ref`. As always, imperative code using refs should be avoided in most cases. `useImperativeHandle` should be used with `forwardRef`: +`useImperativeHandle` настраивает значение экземпляра, которое предоставляется родительским компонентам при использовании `ref`. Как всегда, в большинстве случаев следует избегать императивного кода, использующего ссылки. `useImperativeHandle` должен использоваться с `forwardRef`: ```js function FancyInput(props, ref) { @@ -360,17 +363,17 @@ function FancyInput(props, ref) { FancyInput = forwardRef(FancyInput); ``` -In this example, a parent component that renders `` would be able to call `fancyInputRef.current.focus()`. +В этом примере родительский компонент, который отображает ``, сможет вызывать `fancyInputRef.current.focus()`. ### `useLayoutEffect` {#uselayouteffect} -The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint. +Подпись идентична `useEffect`, но она запускается синхронно после всех мутаций DOM. Используйте это для чтения макета из DOM и синхронного повторного рендеринга. Обновления, запланированные внутри `useLayoutEffect`, будут сбрасываться синхронно до того, как браузер сможет рисовать. -Prefer the standard `useEffect` when possible to avoid blocking visual updates. +Предпочитайте стандартный `useEffect`, когда это возможно, чтобы избежать блокировки визуальных обновлений. -> Tip +> Cовет > -> If you're migrating code from a class component, `useLayoutEffect` fires in the same phase as `componentDidMount` and `componentDidUpdate`, so if you're unsure of which effect Hook to use, it's probably the least risky. +> Если вы переносите код из компонента класса, `useLayoutEffect` запускается в той же фазе, что и `componentDidMount` и `componentDidUpdate`, поэтому, если вы не уверены, какой хук эффект использовать, это, вероятно, наименее рискованно. ### `useDebugValue` {#usedebugvalue} @@ -378,9 +381,9 @@ Prefer the standard `useEffect` when possible to avoid blocking visual updates. useDebugValue(value) ``` -`useDebugValue` can be used to display a label for custom hooks in React DevTools. +`useDebugValue` может использоваться для отображения метки для пользовательских хуков в React DevTools. -For example, consider the `useFriendStatus` custom Hook described in ["Building Your Own Hooks"](/docs/hooks-custom.html): +Например, рассмотрим пользовательский хук `useFriendStatus`, описанный в разделе ["Создание собственных хуков"](/docs/hooks-custom.html): ```js{6-8} function useFriendStatus(friendID) { @@ -388,25 +391,25 @@ function useFriendStatus(friendID) { // ... - // Show a label in DevTools next to this Hook - // e.g. "FriendStatus: Online" + // Показывать ярлык в DevTools рядом с этим хуком + // например "FriendStatus: Online" useDebugValue(isOnline ? 'Online' : 'Offline'); return isOnline; } ``` -> Tip +> Совет > -> We don't recommend adding debug values to every custom Hook. It's most valuable for custom Hooks that are part of shared libraries. +> Мы не рекомендуем добавлять значения отладки в каждый пользовательский хук. Это наиболее ценно для пользовательских хуков, которые являются частью общих библиотек. -#### Defer formatting debug values {#defer-formatting-debug-values} +#### Отложите форматирование значений отладки {#defer-formatting-debug-values} -In some cases formatting a value for display might be an expensive operation. It's also unnecessary unless a Hook is actually inspected. +В некоторых случаях форматирование значения для отображения может быть дорогой операцией. Это также не нужно, если хук не проверен. -For this reason `useDebugValue` accepts a formatting function as an optional second parameter. This function is only called if the Hooks are inspected. It receives the debug value as a parameter and should return a formatted display value. +По этой причине `useDebugValue` принимает функцию форматирования в качестве необязательного второго параметра. Эта функция вызывается только при проверке хуков. Он получает значение отладки в качестве параметра и должен возвращать форматированное отображаемое значение. -For example a custom Hook that returned a `Date` value could avoid calling the `toDateString` function unnecessarily by passing the following formatter: +Например, пользовательский хук, который возвратил значение `Date`, может избежать ненужного вызова функции `toDateString`, передав следующий форматер: ```js useDebugValue(date, date => date.toDateString()); From c4fbcb50d5785cfdf5dbd249d064019738253be0 Mon Sep 17 00:00:00 2001 From: Sergey Bulatovich Date: Mon, 4 Mar 2019 22:15:24 +0200 Subject: [PATCH 02/34] translate Hooks API Reference --- content/docs/hooks-reference.md | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index fb785fbb1..a5ec53b09 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -37,7 +37,7 @@ const [state, setState] = useState(initialState); Во время первоначального рендеринга возвращаемое состояние (`state`) совпадает со значением, переданным в качестве первого аргумента (`initialState`). -Функция `setState` используется для обновления состояния. Он принимает новое значение состояния и ставит в очередь повторную визуализацию компонента. +Функция `setState` используется для обновления состояния. Она принимает новое значение состояния и ставит в очередь повторную визуализацию компонента. ```js setState(newState); @@ -90,9 +90,7 @@ const [state, setState] = useState(() => { #### Выход из состояния обновления {#bailing-out-of-a-state-update} -Если вы обновите состояние хука до того же значения, что и текущее состояние, React не перересует дочерние компоненты или выстреливать эффекты. (React использует [`Object.is` алгоритм сравнения](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) -If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) - +Если вы обновите состояние хука до того же значения, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [`Object.is` алгоритм сравнения](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) ### `useEffect` {#useeffect} @@ -106,7 +104,7 @@ useEffect(didUpdate); Вместо этого используйте `useEffect`. Функция, переданная в `useEffect`, будет запущена после того, как рендер будет зафиксирован на экране. Думайте об эффектах как о спасательном люке из чисто функционального мира React в мир императивов. -По умолчанию эффекты запускаются после каждого завершенного рендеринга, но вы можете использовать его [только когда определенные значения изменились.](#conditionally-firing-an-effect). +По умолчанию эффекты запускаются после каждого завершенного рендеринга, но вы можете использовать его [только когда определенные значения изменились](#conditionally-firing-an-effect). #### Очистка эффекта {#cleaning-up-an-effect} @@ -128,18 +126,17 @@ useEffect(() => { В отличие от `componentDidMount` и `componentDidUpdate`, функция, переданная `useEffect`, запускается **после** разметки и отрисовки во время отложенного события. Это делает его подходящим для многих распространенных побочных эффектов, таких как настройка подписок и обработчиков событий, потому что большинство типов работы не должны блокировать обновление экрана браузером. -Однако не все эффекты могут быть отложены. Например, мутация DOM, которая видна пользователю, должна запускаться синхронно до следующего отрисовки, чтобы пользователь не воспринимал визуальное несоответствие. (Различие концептуально аналогично пассивным и активным прослушивателям событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только при его запуске. +Однако не все эффекты могут быть отложены. Например, мутация DOM, которая видна пользователю, должна запускаться синхронно до следующего отрисовки, чтобы пользователь не воспринимал визуальное несоответствие. (Различие концептуально аналогично пассивным и активным прослушивателям событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только в его запуске. Хотя `useEffect` откладывается до тех пор, пока браузер не выполнит отрисовку, он гарантированно срабатывает перед любыми новыми рендерами. React всегда сбрасывает эффекты предыдущего рендера перед началом нового обновления. #### Условное срабатывание эффекта {#conditionally-firing-an-effect} -Поведение по умолчанию для эффектов - запускать эффект после каждого завершенного рендера. Таким образом, эффект всегда пересоздается, если одино из его вхождений изменяется. +Поведение по умолчанию для эффектов - запускать эффект после каждого завершенного рендера. Таким образом, эффект всегда пересоздается, если одно из его вхождений изменяется. -Однако в некоторых случаях это может быть излишним, например, в примере подписки из предыдущего раздела. Нам не нужно создавать новую подписку на каждое обновление, только если `исходные` реквизиты изменились. -However, this may be overkill in some cases, like the subscription example from the previous section. We don't need to create a new subscription on every update, only if the `source` props has changed. +Однако в некоторых случаях это может быть излишним, например, в примере подписки из предыдущего раздела. Нам не нужно создавать новую подписку на каждое обновление, только если `исходные` пропсы изменились. -Чтобы реализовать это, передайте второй аргумент `useEffect`, который является массивом значений, от которых зависит эффект. Наш обновленный пример теперь выглядит так: +Чтобы реализовать это, передайте второй аргумент в `useEffect`, который является массивом значений, от которых зависит эффект. Наш обновленный пример теперь выглядит так: ```js useEffect( @@ -159,7 +156,7 @@ useEffect( > Примечание > -> Массив входных данных не передается в качестве аргументов функции эффекта. Концептуально, однако, это то, что они представляют: каждое значение, на которое ссылается функция эффекта, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор может создать этот массив автоматически. +> Массив входных данных не передается в качестве аргументов функции эффекта. Концептуально, однако, это то, что они представляют: каждое значение, на которое ссылается функция эффекта, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор сможет создать этот массив автоматически. ### `useContext` {#usecontext} @@ -185,7 +182,7 @@ const [state, dispatch] = useReducer(reducer, initialArg, init); `useReducer` обычно предпочтительнее `useState`, когда у вас сложная логика состояния, которая включает в себя несколько значений, или когда следующее состояние зависит от предыдущего. `useReducer` также позволяет оптимизировать производительность компонентов, которые запускают глубокие обновления, [поскольку вы можете передавать `dispatch` вместо обратных вызовов](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down). -Вот пример счетчика из раздела [`useState`](#usestate), переписанный для использования редуктора: +Вот пример счетчика из раздела [`useState`](#usestate), переписанный для использования редьюсера: ```js const initialState = {count: 0}; @@ -270,8 +267,7 @@ function Counter({initialCount}) { #### Выход из отправки {#bailing-out-of-a-dispatch} -Если вы вернете то же значение из редьюсера хука, что и текущее состояние, React выйдет из строя без визуализации дочерних элементов или эффектов стрельбы. (React использует [алгоритм сравнения Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) -If you return the same value from a Reducer Hook as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) +Если вы вернете то же значение из редьюсера хука, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [алгоритм сравнения Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) ### `useCallback` {#usecallback} @@ -284,7 +280,7 @@ const memoizedCallback = useCallback( ); ``` -Возвращает [запоминенный](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) обратный вызов. +Возвращает [запомненный](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) обратный вызов. Передайте встроенный обратный вызов и массив входных данных. `useCallback` вернет запомненную версию обратного вызова, которая изменяется только в случае изменения одного из входных данных. Это полезно при передаче обратных вызовов оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных визуализаций (например, `shouldComponentUpdate`). @@ -300,7 +296,7 @@ const memoizedCallback = useCallback( const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ``` -Возвращает [запоминенное](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) значение. +Возвращает [запомненное](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) значение. Передайте функцию "создать" и массив входов. `useMemo` будет повторно вычислять запомненное значение только тогда, когда одино из входных данных изменится. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере. From 2d75b9e55b401471f5842d788ec2f0f9574275d5 Mon Sep 17 00:00:00 2001 From: Sergey Bulatovich Date: Mon, 4 Mar 2019 22:19:36 +0200 Subject: [PATCH 03/34] translate Hooks API Reference --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 7cb2b0887..c8f4f622c 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -120,7 +120,7 @@ - id: hooks-custom title: Building Your Own Hooks - id: hooks-reference - title: Hooks API Reference + title: Справочник API Хуков - id: hooks-faq title: Hooks FAQ - title: Участие в проекте From e6291cda692d7247ebc99c9b706eed07f161761b Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:26:41 +0200 Subject: [PATCH 04/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index a5ec53b09..e10a5f71d 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -37,7 +37,7 @@ const [state, setState] = useState(initialState); Во время первоначального рендеринга возвращаемое состояние (`state`) совпадает со значением, переданным в качестве первого аргумента (`initialState`). -Функция `setState` используется для обновления состояния. Она принимает новое значение состояния и ставит в очередь повторную визуализацию компонента. +Функция `setState` используется для обновления состояния. Она принимает новое значение состояния и ставит в очередь повторный рендер компонента. ```js setState(newState); From 524ad81fc0d6315ad394cf2430588792a15a9179 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:26:59 +0200 Subject: [PATCH 05/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index e10a5f71d..58ed9af4c 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -43,7 +43,7 @@ const [state, setState] = useState(initialState); setState(newState); ``` -Во время последующих повторных визуализаций первое значение, возвращаемое `useState`, всегда будет самым последним состоянием после применения обновлений. +Во время последующих повторных рендеров первое значение, возвращаемое `useState`, всегда будет самым последним состоянием после применения обновлений. #### Функциональные обновления {#functional-updates} From ca4e0aff6a8be32a931c2a487be322e38835d3d9 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:27:31 +0200 Subject: [PATCH 06/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 58ed9af4c..ed0a54b20 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -47,7 +47,7 @@ setState(newState); #### Функциональные обновления {#functional-updates} -Если новое состояние вычисляется с использованием предыдущего состояния, вы можете передать функцию `setState`. Функция получит предыдущее значение и вернет обновленное значение. Вот пример компонента счетчик, который использует обе формы `setState`: +Если новое состояние вычисляется с использованием предыдущего состояния, вы можете передать функцию `setState`. Функция получит предыдущее значение и вернёт обновленное значение. Вот пример компонента счётчик, который использует обе формы `setState`: ```js function Counter({initialCount}) { From 857041a4b6edfd7fd75fe9270f14a3d82fd7bfe8 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:27:53 +0200 Subject: [PATCH 07/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index ed0a54b20..a06b5b3c7 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -62,7 +62,7 @@ function Counter({initialCount}) { ); } ``` -Кнопки "+" и "-" используют функциональную форму, потому что обновленное значение основано на предыдущем значении. Но кнопка «Сбросить» использует нормальную форму, потому что она всегда устанавливает счетчик обратно в 0. +Кнопки «+» и «-» используют функциональную форму, потому что обновленное значение основано на предыдущем значении. Но кнопка «Сбросить» использует обычную форму, потому что она всегда устанавливает счетчик обратно в 0. > Примечание > From 9d04c5574aca0cf390e9767116bbacfa0f1268fe Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:33:01 +0200 Subject: [PATCH 08/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index a06b5b3c7..30ccb2285 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -79,7 +79,7 @@ function Counter({initialCount}) { #### Ленивая инициализация состояния {#lazy-initial-state} -Аргумент `initialState` - это состояние, используемое во время начального рендеринга. В последующих рендерах это не учитывается. Если начальное состояние является результатом дорогостоящих вычислений, вы можете вместо этого предоставить функцию, которая будет выполняться только при начальном рендеринге: +Аргумент `initialState` – это состояние, используемое во время начального рендеринга. В последующих рендерах это не учитывается. Если начальное состояние является результатом дорогостоящих вычислений, вы можете вместо этого предоставить функцию, которая будет выполняться только при начальном рендеринге: ```js const [state, setState] = useState(() => { From ab7888078fa49482e44c65f47621a1d630216328 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:33:49 +0200 Subject: [PATCH 09/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 30ccb2285..4626e3e53 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -90,7 +90,7 @@ const [state, setState] = useState(() => { #### Выход из состояния обновления {#bailing-out-of-a-state-update} -Если вы обновите состояние хука до того же значения, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [`Object.is` алгоритм сравнения](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) +Если вы обновите состояние хука до того же значения, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [алгоритм сравнения `Object.is`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) ### `useEffect` {#useeffect} From 9c7e64a2cd4e9aeebf2d86b6cbf957a26bf5a85b Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:34:22 +0200 Subject: [PATCH 10/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 4626e3e53..9c7794b07 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -100,7 +100,7 @@ useEffect(didUpdate); Принимает функцию, которая содержит императивный, возможно, эффективный код. -Мутации, подписки, таймеры, ведение журнала и другие побочные эффекты не допускаются внутри основного тела функционального компонента (называемого _фазой рендеринга_ React). Это приведет к запутанным ошибкам и несоответствиям в пользовательском интерфейсе. +Мутации, подписки, таймеры, ведение журнала и другие побочные эффекты не допускаются внутри основного тела функционального компонента (называемого _фазой рендеринга_ React). Это приведёт к запутанным ошибкам и несоответствиям в пользовательском интерфейсе. Вместо этого используйте `useEffect`. Функция, переданная в `useEffect`, будет запущена после того, как рендер будет зафиксирован на экране. Думайте об эффектах как о спасательном люке из чисто функционального мира React в мир императивов. From 2b50f891caad8cca88383b9eb6b1416fd5ff076c Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:34:55 +0200 Subject: [PATCH 11/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 9c7794b07..2f5eb93d0 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -104,7 +104,7 @@ useEffect(didUpdate); Вместо этого используйте `useEffect`. Функция, переданная в `useEffect`, будет запущена после того, как рендер будет зафиксирован на экране. Думайте об эффектах как о спасательном люке из чисто функционального мира React в мир императивов. -По умолчанию эффекты запускаются после каждого завершенного рендеринга, но вы можете использовать его [только когда определенные значения изменились](#conditionally-firing-an-effect). +По умолчанию эффекты запускаются после каждого завершенного рендеринга, но вы можете использовать его [только когда определённые значения изменились](#conditionally-firing-an-effect). #### Очистка эффекта {#cleaning-up-an-effect} From 2d696c01cdfd94ffcc3e7070da7d21a9ba16b150 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:35:32 +0200 Subject: [PATCH 12/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 2f5eb93d0..862a8ef18 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -120,7 +120,7 @@ useEffect(() => { }); ``` -Функция очистки запускается до удаления компонента из пользовательского интерфейса, чтобы предотвратить утечки памяти. Кроме того, если компонент визуализируется несколько раз (как обычно происходит), **предыдущий эффект очищается перед выполнением следующего эффекта**. В нашем примере это означает, что новая подписка создается при каждом обновлении. Чтобы избежать воздействия на каждое обновление, обратитесь к следующему разделу. +Функция очистки запускается до удаления компонента из пользовательского интерфейса, чтобы предотвратить утечки памяти. Кроме того, если компонент рендерится несколько раз (как обычно происходит), **предыдущий эффект очищается перед выполнением следующего эффекта**. В нашем примере это означает, что новая подписка создаётся при каждом обновлении. Чтобы избежать воздействия на каждое обновление, обратитесь к следующему разделу. #### Сроки воздействия {#timing-of-effects} From df3350b6444e5c1bb36c5b19c9868f56b7ab865e Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:36:36 +0200 Subject: [PATCH 13/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 862a8ef18..67d4b9d9f 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -124,7 +124,7 @@ useEffect(() => { #### Сроки воздействия {#timing-of-effects} -В отличие от `componentDidMount` и `componentDidUpdate`, функция, переданная `useEffect`, запускается **после** разметки и отрисовки во время отложенного события. Это делает его подходящим для многих распространенных побочных эффектов, таких как настройка подписок и обработчиков событий, потому что большинство типов работы не должны блокировать обновление экрана браузером. +В отличие от `componentDidMount` и `componentDidUpdate`, функция, переданная в `useEffect`, запускается **после** разметки и отрисовки во время отложенного события. Это делает его подходящим для многих распространённых побочных эффектов, таких как настройка подписок и обработчиков событий, потому что большинство типов работы не должны блокировать обновление экрана браузером. Однако не все эффекты могут быть отложены. Например, мутация DOM, которая видна пользователю, должна запускаться синхронно до следующего отрисовки, чтобы пользователь не воспринимал визуальное несоответствие. (Различие концептуально аналогично пассивным и активным прослушивателям событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только в его запуске. From 9b9bb9b701825fb6987f3e24a4e3fd83552668ae Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:37:21 +0200 Subject: [PATCH 14/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 67d4b9d9f..6307b642f 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -126,7 +126,7 @@ useEffect(() => { В отличие от `componentDidMount` и `componentDidUpdate`, функция, переданная в `useEffect`, запускается **после** разметки и отрисовки во время отложенного события. Это делает его подходящим для многих распространённых побочных эффектов, таких как настройка подписок и обработчиков событий, потому что большинство типов работы не должны блокировать обновление экрана браузером. -Однако не все эффекты могут быть отложены. Например, мутация DOM, которая видна пользователю, должна запускаться синхронно до следующего отрисовки, чтобы пользователь не воспринимал визуальное несоответствие. (Различие концептуально аналогично пассивным и активным прослушивателям событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только в его запуске. +Однако не все эффекты могут быть отложены. Например, мутация DOM, которая видна пользователю, должна запускаться синхронно до следующей отрисовки, чтобы пользователь не воспринимал визуальное несоответствие. (Различие концептуально аналогично пассивным и активным прослушивателям событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только в его запуске. Хотя `useEffect` откладывается до тех пор, пока браузер не выполнит отрисовку, он гарантированно срабатывает перед любыми новыми рендерами. React всегда сбрасывает эффекты предыдущего рендера перед началом нового обновления. From d005ce1e2f98c4ad7f63c51fbcfc5c458b13c9b7 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:37:46 +0200 Subject: [PATCH 15/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 6307b642f..fe731224e 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -132,7 +132,7 @@ useEffect(() => { #### Условное срабатывание эффекта {#conditionally-firing-an-effect} -Поведение по умолчанию для эффектов - запускать эффект после каждого завершенного рендера. Таким образом, эффект всегда пересоздается, если одно из его вхождений изменяется. +Поведение по умолчанию для эффектов – запускать эффект после каждого завершённого рендера. Таким образом, эффект всегда пересоздаётся, если одно из его вхождений изменяется. Однако в некоторых случаях это может быть излишним, например, в примере подписки из предыдущего раздела. Нам не нужно создавать новую подписку на каждое обновление, только если `исходные` пропсы изменились. From 21ded519792ca4f5faa125d03e36b90d0698dbc6 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:38:10 +0200 Subject: [PATCH 16/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index fe731224e..2c64d0c52 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -156,7 +156,7 @@ useEffect( > Примечание > -> Массив входных данных не передается в качестве аргументов функции эффекта. Концептуально, однако, это то, что они представляют: каждое значение, на которое ссылается функция эффекта, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор сможет создать этот массив автоматически. +> Массив входных данных не передаётся в качестве аргументов функции эффекта. Концептуально, однако, это то, что они представляют: каждое значение, на которое ссылается функция эффекта, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор сможет создать этот массив автоматически. ### `useContext` {#usecontext} From 32fe5cb3d9bc3afc02f0428135106de8d5c50ff7 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:38:38 +0200 Subject: [PATCH 17/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 2c64d0c52..38c308223 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -166,7 +166,7 @@ const context = useContext(Context); Принимает объект контекста (значение, возвращенное из `React.createContext`) и возвращает текущее значение контекста, как указано ближайшим поставщиком контекста для данного контекста. -Когда провайдер обновляется, этот хук инициирует повторное перерисовку с последним значением контекста. +Когда провайдер обновляется, этот хук инициирует повторный рендер с последним значением контекста. ## Дополнительные хуки {#additional-hooks} From 8da6641282b1db40932ffd7a3d7e1961c487801b Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:39:07 +0200 Subject: [PATCH 18/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 38c308223..d5671951b 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -229,7 +229,7 @@ function Counter({initialState}) { Вы также можете создать начальное состояние лениво. Для этого вы можете передать функцию `init` в качестве третьего аргумента. Начальное состояние будет установлено в `init(initialArg)`. -Это позволяет извлечь логику для расчета начального состояния за пределами рудьюсера. Это также удобно для сброса состояния позже в ответ на действие: +Это позволяет извлечь логику для расчёта начального состояния за пределами редьюсера. Это также удобно для сброса состояния позже в ответ на действие: ```js{1-3,11-12,19,24} function init(initialCount) { From 025768b33f3613cd49a8b8fe99ff9263625c727d Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:40:04 +0200 Subject: [PATCH 19/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index d5671951b..121a5dfb2 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -267,7 +267,7 @@ function Counter({initialCount}) { #### Выход из отправки {#bailing-out-of-a-dispatch} -Если вы вернете то же значение из редьюсера хука, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [алгоритм сравнения Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) +Если вы вернёте то же значение из редьюсера хука, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [алгоритм сравнения Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) ### `useCallback` {#usecallback} From ab725e8de7ec6e2ea2e0b1142e0e7490bcf6dce2 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:40:33 +0200 Subject: [PATCH 20/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 121a5dfb2..aee181fe8 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -282,7 +282,7 @@ const memoizedCallback = useCallback( Возвращает [запомненный](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) обратный вызов. -Передайте встроенный обратный вызов и массив входных данных. `useCallback` вернет запомненную версию обратного вызова, которая изменяется только в случае изменения одного из входных данных. Это полезно при передаче обратных вызовов оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных визуализаций (например, `shouldComponentUpdate`). +Передайте встроенный обратный вызов и массив входных данных. `useCallback` вернёт запомненную версию обратного вызова, которая изменяется только в случае изменения одного из входных данных. Это полезно при передаче обратных вызовов оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных рендеров (например, `shouldComponentUpdate`). `useCallback(fn, inputs)` это эквивалент `useMemo(() => fn, inputs)`. From 083a917d16e7978b1c599008f7e2439e0ea1a667 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:41:08 +0200 Subject: [PATCH 21/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index aee181fe8..018df70c2 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -288,7 +288,7 @@ const memoizedCallback = useCallback( > Примечание > -> Массив входных данных не передается в качестве аргументов для обратного вызова. Концептуально, однако, это то, что они представляют: каждое значение, указанное в обратном вызове, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор может создать этот массив автоматически. +> Массив входных данных не передаётся в качестве аргументов для обратного вызова. Концептуально, однако, это то, что они представляют: каждое значение, указанное в обратном вызове, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор может создать этот массив автоматически. ### `useMemo` {#usememo} From 868584e778445fcb73a37671685f7ea978fdda76 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:41:25 +0200 Subject: [PATCH 22/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 018df70c2..8ec899160 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -284,7 +284,7 @@ const memoizedCallback = useCallback( Передайте встроенный обратный вызов и массив входных данных. `useCallback` вернёт запомненную версию обратного вызова, которая изменяется только в случае изменения одного из входных данных. Это полезно при передаче обратных вызовов оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных рендеров (например, `shouldComponentUpdate`). -`useCallback(fn, inputs)` это эквивалент `useMemo(() => fn, inputs)`. +`useCallback(fn, inputs)` – это эквивалент `useMemo(() => fn, inputs)`. > Примечание > From 6b6cc7a55d1721c6ff73fcff4ebbc025f0e3423b Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:42:00 +0200 Subject: [PATCH 23/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 8ec899160..b693dc4ec 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -298,7 +298,7 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); Возвращает [запомненное](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) значение. -Передайте функцию "создать" и массив входов. `useMemo` будет повторно вычислять запомненное значение только тогда, когда одино из входных данных изменится. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере. +Передайте функцию «создать» и массив входов. `useMemo` будет повторно вычислять запомненное значение только тогда, когда одно из входных данных изменится. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере. Помните, что функция, переданная `useMemo`, запускается во время рендеринга. Не делайте там ничего, что вы обычно не делаете во время рендеринга. Например, побочные эффекты принадлежат `useEffect`, а не `useMemo`. From d1ed79b9cde9c30571dfc64d4c3eeba4a28b48a7 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:42:24 +0200 Subject: [PATCH 24/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index b693dc4ec..73aaecdda 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -302,7 +302,7 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); Помните, что функция, переданная `useMemo`, запускается во время рендеринга. Не делайте там ничего, что вы обычно не делаете во время рендеринга. Например, побочные эффекты принадлежат `useEffect`, а не `useMemo`. -Если массив не указан, новое значение будет вычислено всякий раз, когда в качестве первого аргумента передается новый экземпляр функции. (Со встроенной функцией на каждом рендере.) +Если массив не указан, новое значение будет вычислено всякий раз, когда в качестве первого аргумента передаётся новый экземпляр функции. (Со встроенной функцией на каждом рендере.) **Вы можете использовать `useMemo` как оптимизацию производительности, а не как семантическую гарантию.** В будущем React может выбрать «забыть» некоторые ранее запомненные значения и пересчитать их при следующем рендере, например, освободить память для закадровых компонентов. Напишите свой код, чтобы он по-прежнему работал без `useMemo`, а затем добавьте его для оптимизации производительности. From 465c5c8a976135a39068f9405327e936f8d5a47f Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:42:46 +0200 Subject: [PATCH 25/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 73aaecdda..791aca457 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -308,7 +308,7 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); > Примечание > -> Массив входных данных не передается в качестве аргументов функции. Концептуально, однако, это то, что они представляют: каждое значение, на которое ссылается функция, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор может создать этот массив автоматически. +> Массив входных данных не передаётся в качестве аргументов функции. Концептуально, однако, это то, что они представляют: каждое значение, на которое ссылается функция, должно также появиться в массиве входных данных. В будущем достаточно продвинутый компилятор может создать этот массив автоматически. ### `useRef` {#useref} From ecd23b726f9e9c027c6fb069e2b36445e17e65d1 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:43:17 +0200 Subject: [PATCH 26/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 791aca457..f51f5d82a 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -318,7 +318,7 @@ const refContainer = useRef(initialValue); `useRef` возвращает изменяемый объект ref, свойство `.current` которого инициализируется переданным аргументом (`initialValue`). Возвращенный объект будет сохраняться в течение всего времени жизни компонента. -Обычный случай использования - это обязательный доступ к ребенку: +Обычный случай использования – это обязательный доступ к ребенку: ```js function TextInputWithFocusButton() { From 93d3ed2d19b2e02370b4cd95d91fc5260d09fa40 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:43:44 +0200 Subject: [PATCH 27/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index f51f5d82a..a4dd0cfb4 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -388,7 +388,7 @@ function useFriendStatus(friendID) { // ... // Показывать ярлык в DevTools рядом с этим хуком - // например "FriendStatus: Online" + // например, «FriendStatus: Online» useDebugValue(isOnline ? 'Online' : 'Offline'); return isOnline; From 1f296c525ac0d1ad6f38bfcfb2e2cdf676d90e49 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:44:17 +0200 Subject: [PATCH 28/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index a4dd0cfb4..4ef601973 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -379,7 +379,7 @@ useDebugValue(value) `useDebugValue` может использоваться для отображения метки для пользовательских хуков в React DevTools. -Например, рассмотрим пользовательский хук `useFriendStatus`, описанный в разделе ["Создание собственных хуков"](/docs/hooks-custom.html): +Например, рассмотрим пользовательский хук `useFriendStatus`, описанный в разделе [«Создание собственных хуков»](/docs/hooks-custom.html): ```js{6-8} function useFriendStatus(friendID) { From aec7d41b8c14e62a05fbbedbbf2f86368b17b3e9 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 10:45:28 +0200 Subject: [PATCH 29/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 4ef601973..5a5f7f458 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -54,7 +54,7 @@ function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> - Счет: {count} + Счёт: {count} From 808d1af82a8183b2bed8f7bf09b3dfebe8a15285 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 6 Mar 2019 19:23:56 +0200 Subject: [PATCH 30/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 5a5f7f458..ab83e2edd 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -8,7 +8,7 @@ next: hooks-faq.html *Хуки* — новая возможность в React 16.8, которая позволяет использовать состояние и другие возможности React без написания классов. -На этой странице описаны API для встроенных хуков в React. +На этой странице описан API, относящийся к встроенным хукам React. Если вы новичок в хуках, вы можете сначала ознакомиться с [общим обзором](/docs/hooks-overview.html). Вы также можете найти полезную информацию в разделе [часто задаваемых вопросов](/docs/hooks-faq.html). From ea5de01f0e2e2131142ca518f1deb225809ece12 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sat, 9 Mar 2019 09:23:51 +0200 Subject: [PATCH 31/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index ab83e2edd..11e6a36aa 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -6,7 +6,7 @@ prev: hooks-custom.html next: hooks-faq.html --- -*Хуки* — новая возможность в React 16.8, которая позволяет использовать состояние и другие возможности React без написания классов. +*Хуки* — нововведение в React 16.8, которое позволяет использовать состояние и другие возможности React без написания классов. На этой странице описан API, относящийся к встроенным хукам React. From d9655ff569ed8202eb00d1d2966bc305880e21ee Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Mon, 11 Mar 2019 23:24:18 +0200 Subject: [PATCH 32/34] Update content/docs/hooks-reference.md Co-Authored-By: polling --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 11e6a36aa..de81668ec 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -369,7 +369,7 @@ FancyInput = forwardRef(FancyInput); > Cовет > -> Если вы переносите код из компонента класса, `useLayoutEffect` запускается в той же фазе, что и `componentDidMount` и `componentDidUpdate`, поэтому, если вы не уверены, какой хук эффект использовать, это, вероятно, наименее рискованно. +> Если вы переносите код из классового компонента, `useLayoutEffect` запускается в той же фазе, что и `componentDidMount` и `componentDidUpdate`, поэтому, если вы не уверены, какой хук эффект использовать, это, вероятно, наименее рискованно. ### `useDebugValue` {#usedebugvalue} From 9592c96f4d8df9729063e08fe57c20581b9f1c18 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Mar 2019 09:59:21 -0700 Subject: [PATCH 33/34] Update hooks-reference.md --- content/docs/hooks-reference.md | 82 ++++++++++++++++----------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index de81668ec..01974bc63 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -1,6 +1,6 @@ --- id: hooks-reference -title: Справочник API Хуков +title: Справочник API хуков permalink: docs/hooks-reference.html prev: hooks-custom.html next: hooks-faq.html @@ -10,7 +10,7 @@ next: hooks-faq.html На этой странице описан API, относящийся к встроенным хукам React. -Если вы новичок в хуках, вы можете сначала ознакомиться с [общим обзором](/docs/hooks-overview.html). Вы также можете найти полезную информацию в разделе [часто задаваемых вопросов](/docs/hooks-faq.html). +Если вы новичок в хуках, вы можете сначала ознакомиться с [общим обзором](/docs/hooks-overview.html). Вы также можете найти полезную информацию в главе [«Хуки: ответы на вопросы»](/docs/hooks-faq.html). - [Основные хуки](#basic-hooks) - [`useState`](#usestate) @@ -66,7 +66,7 @@ function Counter({initialCount}) { > Примечание > -> В отличие от метода `setState`, который вы можете найти в компонентах класса, `setState` не объединяет объекты обновления автоматически. Вы можете повторить это поведение, комбинируя форму функции обновления с синтаксисом расширения объекта: +> В отличие от метода `setState`, который вы можете найти в классовых компонентах, `setState` не объединяет объекты обновления автоматически. Вы можете повторить это поведение, комбинируя форму функции обновления с синтаксисом расширения объекта: > > ```js > setState(prevState => { @@ -75,7 +75,7 @@ function Counter({initialCount}) { > }); > ``` > -> Другой вариант - `useReducer`, который больше подходит для управления объектами состояния, которые содержат несколько значений. +> Другой вариант – `useReducer`, который больше подходит для управления объектами состояния, содержащими несколько значений. #### Ленивая инициализация состояния {#lazy-initial-state} @@ -88,9 +88,9 @@ const [state, setState] = useState(() => { }); ``` -#### Выход из состояния обновления {#bailing-out-of-a-state-update} +#### Досрочное прекращение обновления состояния {#bailing-out-of-a-state-update} -Если вы обновите состояние хука до того же значения, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [алгоритм сравнения `Object.is`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) +Если вы обновите состояние хука тем же значением, что и текущее состояние, React досрочно выйдет из хука без повторного рендера дочерних элементов и запуска эффектов. (React использует [алгоритм сравнения `Object.is`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) ### `useEffect` {#useeffect} @@ -98,17 +98,17 @@ const [state, setState] = useState(() => { useEffect(didUpdate); ``` -Принимает функцию, которая содержит императивный, возможно, эффективный код. +Принимает функцию, которая содержит императивный код, возможно, с эффектами. -Мутации, подписки, таймеры, ведение журнала и другие побочные эффекты не допускаются внутри основного тела функционального компонента (называемого _фазой рендеринга_ React). Это приведёт к запутанным ошибкам и несоответствиям в пользовательском интерфейсе. +Мутации, подписки, таймеры, логирование и другие побочные эффекты не допускаются внутри основного тела функционального компонента (называемого _этапом рендеринга_ React). Это приведёт к запутанным ошибкам и несоответствиям в пользовательском интерфейсе. -Вместо этого используйте `useEffect`. Функция, переданная в `useEffect`, будет запущена после того, как рендер будет зафиксирован на экране. Думайте об эффектах как о спасательном люке из чисто функционального мира React в мир императивов. +Вместо этого используйте `useEffect`. Функция, переданная в `useEffect`, будет запущена после того, как рендер будет зафиксирован на экране. Думайте об эффектах как о лазейке из чисто функционального мира React в мир императивов. -По умолчанию эффекты запускаются после каждого завершенного рендеринга, но вы можете использовать его [только когда определённые значения изменились](#conditionally-firing-an-effect). +По умолчанию эффекты запускаются после каждого завершённого рендеринга, но вы можете решить запускать их [только при изменении определённых значений](#conditionally-firing-an-effect). #### Очистка эффекта {#cleaning-up-an-effect} -Часто эффекты создают ресурсы, которые необходимо очистить перед тем, как компонент покидает экран, например подписку или идентификатор таймера. Чтобы сделать это, функция переданная в `useEffect`, может вернуть функцию очистки. Например, чтобы создать подписку: +Часто эффекты создают ресурсы, которые необходимо очистить (или сбросить) перед тем, как компонент покидает экран, например подписку или идентификатор таймера. Чтобы сделать это, функция переданная в `useEffect`, может вернуть функцию очистки. Например, чтобы создать подписку: ```js useEffect(() => { @@ -122,19 +122,19 @@ useEffect(() => { Функция очистки запускается до удаления компонента из пользовательского интерфейса, чтобы предотвратить утечки памяти. Кроме того, если компонент рендерится несколько раз (как обычно происходит), **предыдущий эффект очищается перед выполнением следующего эффекта**. В нашем примере это означает, что новая подписка создаётся при каждом обновлении. Чтобы избежать воздействия на каждое обновление, обратитесь к следующему разделу. -#### Сроки воздействия {#timing-of-effects} +#### Порядок срабатывания эффектов {#timing-of-effects} -В отличие от `componentDidMount` и `componentDidUpdate`, функция, переданная в `useEffect`, запускается **после** разметки и отрисовки во время отложенного события. Это делает его подходящим для многих распространённых побочных эффектов, таких как настройка подписок и обработчиков событий, потому что большинство типов работы не должны блокировать обновление экрана браузером. +В отличие от `componentDidMount` и `componentDidUpdate`, функция, переданная в `useEffect`, запускается во время отложенного события **после** разметки и отрисовки. Это делает хук подходящим для многих распространённых побочных эффектов, таких как настройка подписок и обработчиков событий, потому что большинство типов работы не должны блокировать обновление экрана браузером. -Однако не все эффекты могут быть отложены. Например, мутация DOM, которая видна пользователю, должна запускаться синхронно до следующей отрисовки, чтобы пользователь не воспринимал визуальное несоответствие. (Различие концептуально аналогично пассивным и активным прослушивателям событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только в его запуске. +Однако не все эффекты могут быть отложены. Например, изменение DOM, которое видно пользователю, должно запускаться синхронно до следующей отрисовки, чтобы пользователь не замечал визуального несоответствие. (Различие концептуально схоже с пассивным и активным слушателями событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только в его запуске. -Хотя `useEffect` откладывается до тех пор, пока браузер не выполнит отрисовку, он гарантированно срабатывает перед любыми новыми рендерами. React всегда сбрасывает эффекты предыдущего рендера перед началом нового обновления. +Хотя `useEffect` откладывается до тех пор, пока браузер не выполнит отрисовку, он гарантированно срабатывает перед любыми новыми рендерами. React всегда полностью применяет эффекты предыдущего рендера перед началом нового обновления. #### Условное срабатывание эффекта {#conditionally-firing-an-effect} -Поведение по умолчанию для эффектов – запускать эффект после каждого завершённого рендера. Таким образом, эффект всегда пересоздаётся, если одно из его вхождений изменяется. +По умолчанию эффекты запускаются после каждого завершённого рендера. Таким образом, эффект всегда пересоздаётся, если одно из его входных значений изменяется. -Однако в некоторых случаях это может быть излишним, например, в примере подписки из предыдущего раздела. Нам не нужно создавать новую подписку на каждое обновление, только если `исходные` пропсы изменились. +Однако в некоторых случаях это может быть излишним, например, в примере подписки из предыдущего раздела. Нам не нужно создавать новую подписку на каждое обновление, а только если изменился проп `source`. Чтобы реализовать это, передайте второй аргумент в `useEffect`, который является массивом значений, от которых зависит эффект. Наш обновленный пример теперь выглядит так: @@ -150,7 +150,7 @@ useEffect( ); ``` -Теперь подписка будет воссоздана только при изменении `props.source`. +Теперь подписка будет создана повторно только при изменении `props.source`. Передача пустого массива `[]` входных данных говорит React, что ваш эффект не зависит от каких-либо значений компонента, так что эффект будет работать только при монтировании и очищаться при размонтировании; он не будет запускаться на обновлениях. @@ -164,13 +164,13 @@ useEffect( const context = useContext(Context); ``` -Принимает объект контекста (значение, возвращенное из `React.createContext`) и возвращает текущее значение контекста, как указано ближайшим поставщиком контекста для данного контекста. +Принимает объект контекста (значение, возвращённое из `React.createContext`) и возвращает текущее значение контекста, как указано ближайшим поставщиком контекста для данного контекста. Когда провайдер обновляется, этот хук инициирует повторный рендер с последним значением контекста. ## Дополнительные хуки {#additional-hooks} -Следующие хуки являются вариантами базовых из предыдущего раздела или необходимы только для конкретных крайних случаев. Не переживайте, изучая их заранее. +Следующие хуки являются вариантами базовых из предыдущего раздела или необходимы только для конкретных крайних случаев. Их не требуется основательно изучать заранее. ### `useReducer` {#usereducer} @@ -178,11 +178,11 @@ const context = useContext(Context); const [state, dispatch] = useReducer(reducer, initialArg, init); ``` -Альтернатива для [`useState`](#usestate). Принимает редьюсер типа `(state, action) => newState` и возвращает текущее состояние в паре с методом `dispatch`. (Если вы знакомы с Redux, вы уже знаете, как это работает.) +Альтернатива для [`useState`](#usestate). Принимает редюсер типа `(state, action) => newState` и возвращает текущее состояние в паре с методом `dispatch`. (Если вы знакомы с Redux, вы уже знаете, как это работает.) -`useReducer` обычно предпочтительнее `useState`, когда у вас сложная логика состояния, которая включает в себя несколько значений, или когда следующее состояние зависит от предыдущего. `useReducer` также позволяет оптимизировать производительность компонентов, которые запускают глубокие обновления, [поскольку вы можете передавать `dispatch` вместо обратных вызовов](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down). +Хук `useReducer` обычно предпочтительнее `useState`, когда у вас сложная логика состояния, которая включает в себя несколько значений, или когда следующее состояние зависит от предыдущего. `useReducer` также позволяет оптимизировать производительность компонентов, которые запускают глубокие обновления, [поскольку вы можете передавать `dispatch` вместо колбэков](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down). -Вот пример счетчика из раздела [`useState`](#usestate), переписанный для использования редьюсера: +Вот пример счётчика из раздела [`useState`](#usestate), переписанный для использования редюсера: ```js const initialState = {count: 0}; @@ -212,7 +212,7 @@ function Counter({initialState}) { #### Указание начального состояния {#specifying-the-initial-state} -Существует два разных способа инициализации состояния `useReducer`. Вы можете выбрать любой из них в зависимости от варианта использования. Самый простой способ передать начальное состояние в качестве второго аргумента: +Существует два разных способа инициализации состояния `useReducer`. Вы можете выбрать любой из них в зависимости от ситуации. Самый простой способ -- передать начальное состояние в качестве второго аргумента: ```js{3} const [state, dispatch] = useReducer( @@ -223,13 +223,13 @@ function Counter({initialState}) { >Примечание > ->React не использует соглашение об аргументах `state = initialState`, популярное в Redux. Начальное значение иногда должно зависеть от реквизита и поэтому указывается вместо вызова хука. Если вы сильно в этом уверены, вы можете вызвать `useReducer(reducer, undefined, reducer)`, чтобы эмулировать поведение Redux, но это не рекомендуется. +>React не использует соглашение об аргументах `state = initialState`, популярное в Redux. Начальное значение иногда должно зависеть от пропсов и поэтому указывается вместо вызова хука. Если вы сильно в этом уверены, вы можете вызвать `useReducer(reducer, undefined, reducer)`, чтобы эмулировать поведение Redux, но это не рекомендуется. #### Ленивая инициализация {#lazy-initialization} -Вы также можете создать начальное состояние лениво. Для этого вы можете передать функцию `init` в качестве третьего аргумента. Начальное состояние будет установлено в `init(initialArg)`. +Вы также можете создать начальное состояние лениво. Для этого вы можете передать функцию `init` в качестве третьего аргумента. Начальное состояние будет установлено равным результату вызова `init(initialArg)`. -Это позволяет извлечь логику для расчёта начального состояния за пределами редьюсера. Это также удобно для сброса состояния позже в ответ на действие: +Это позволяет извлечь логику для расчёта начального состояния за пределы редюсера. Это также удобно для сброса состояния позже в ответ на действие: ```js{1-3,11-12,19,24} function init(initialCount) { @@ -265,9 +265,9 @@ function Counter({initialCount}) { } ``` -#### Выход из отправки {#bailing-out-of-a-dispatch} +#### Досрочное прекращение `dispatch` {#bailing-out-of-a-dispatch} -Если вы вернёте то же значение из редьюсера хука, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [алгоритм сравнения Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) +Если вы вернёте то же значение из редюсера хука, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [алгоритм сравнения Object.is](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) ### `useCallback` {#usecallback} @@ -280,9 +280,9 @@ const memoizedCallback = useCallback( ); ``` -Возвращает [запомненный](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) обратный вызов. +Возвращает [запомненный](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) колбэк. -Передайте встроенный обратный вызов и массив входных данных. `useCallback` вернёт запомненную версию обратного вызова, которая изменяется только в случае изменения одного из входных данных. Это полезно при передаче обратных вызовов оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных рендеров (например, `shouldComponentUpdate`). +Передайте встроенный колбэк и массив входных данных. Хук `useCallback` вернёт запомненную версию колбэка, который изменяется только в случае изменения одного из входных данных. Это полезно при передаче колбэков оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных рендеров (например, `shouldComponentUpdate`). `useCallback(fn, inputs)` – это эквивалент `useMemo(() => fn, inputs)`. @@ -298,13 +298,13 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); Возвращает [запомненное](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) значение. -Передайте функцию «создать» и массив входов. `useMemo` будет повторно вычислять запомненное значение только тогда, когда одно из входных данных изменится. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере. +Передайте «создающую» функцию и массив входных данных. `useMemo` будет повторно вычислять запомненное значение только тогда, когда одно из входных данных изменится. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере. Помните, что функция, переданная `useMemo`, запускается во время рендеринга. Не делайте там ничего, что вы обычно не делаете во время рендеринга. Например, побочные эффекты принадлежат `useEffect`, а не `useMemo`. Если массив не указан, новое значение будет вычислено всякий раз, когда в качестве первого аргумента передаётся новый экземпляр функции. (Со встроенной функцией на каждом рендере.) -**Вы можете использовать `useMemo` как оптимизацию производительности, а не как семантическую гарантию.** В будущем React может выбрать «забыть» некоторые ранее запомненные значения и пересчитать их при следующем рендере, например, освободить память для закадровых компонентов. Напишите свой код, чтобы он по-прежнему работал без `useMemo`, а затем добавьте его для оптимизации производительности. +**Вы можете использовать `useMemo` как оптимизацию производительности, а не как семантическую гарантию.** В будущем React может решить «забыть» некоторые ранее запомненные значения и пересчитать их при следующем рендере, например, чтобы освободить память для компонентов вне области видимости экрана. Напишите свой код, чтобы он по-прежнему работал без `useMemo`, а затем добавьте его для оптимизации производительности. > Примечание > @@ -316,15 +316,15 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); const refContainer = useRef(initialValue); ``` -`useRef` возвращает изменяемый объект ref, свойство `.current` которого инициализируется переданным аргументом (`initialValue`). Возвращенный объект будет сохраняться в течение всего времени жизни компонента. +`useRef` возвращает изменяемый ref-объект, свойство `.current` которого инициализируется переданным аргументом (`initialValue`). Возвращенный объект будет сохраняться в течение всего времени жизни компонента. -Обычный случай использования – это обязательный доступ к ребенку: +Обычный случай использования – это доступ к потомку в императивном стиле: ```js function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { - // `current` указывает на смонтированный элемент ввода текста + // `current` указывает на смонтированный элемент `input` inputEl.current.focus(); }; return ( @@ -336,7 +336,7 @@ function TextInputWithFocusButton() { } ``` -Обратите внимание, что `useRef()` полезен не только для атрибута `ref`. Это [удобно для хранения любого изменяемого значения](/docs/hooks-faq.html#is-there-something-like-instance-variables) примерно так же, как вы используете поля экземпляров в классах. +Обратите внимание, что `useRef()` полезен не только для атрибута `ref`. Он также [удобен для хранения любого изменяемого значения](/docs/hooks-faq.html#is-there-something-like-instance-variables) примерно так же, как вы используете поля экземпляров в классах. ### `useImperativeHandle` {#useimperativehandle} @@ -363,11 +363,11 @@ FancyInput = forwardRef(FancyInput); ### `useLayoutEffect` {#uselayouteffect} -Подпись идентична `useEffect`, но она запускается синхронно после всех мутаций DOM. Используйте это для чтения макета из DOM и синхронного повторного рендеринга. Обновления, запланированные внутри `useLayoutEffect`, будут сбрасываться синхронно до того, как браузер сможет рисовать. +Сигнатура идентична `useEffect`, но этот хук запускается синхронно после всех изменений DOM. Используйте его для чтения макета из DOM и синхронного повторного рендеринга. Обновления, запланированные внутри `useLayoutEffect`, будут полностью применены синхронно перед тем, как браузер получит шанс осуществить отрисовку. Предпочитайте стандартный `useEffect`, когда это возможно, чтобы избежать блокировки визуальных обновлений. -> Cовет +> Совет > > Если вы переносите код из классового компонента, `useLayoutEffect` запускается в той же фазе, что и `componentDidMount` и `componentDidUpdate`, поэтому, если вы не уверены, какой хук эффект использовать, это, вероятно, наименее рискованно. @@ -403,9 +403,9 @@ function useFriendStatus(friendID) { В некоторых случаях форматирование значения для отображения может быть дорогой операцией. Это также не нужно, если хук не проверен. -По этой причине `useDebugValue` принимает функцию форматирования в качестве необязательного второго параметра. Эта функция вызывается только при проверке хуков. Он получает значение отладки в качестве параметра и должен возвращать форматированное отображаемое значение. +По этой причине `useDebugValue` принимает функцию форматирования в качестве необязательного второго параметра. Эта функция вызывается только при проверке хуков. Она получает значение отладки в качестве параметра и должна возвращать форматированное отображаемое значение. -Например, пользовательский хук, который возвратил значение `Date`, может избежать ненужного вызова функции `toDateString`, передав следующий форматер: +Например, пользовательский хук, который возвратил значение `Date`, может избежать ненужного вызова функции `toDateString`, передав следующую функцию форматирования: ```js useDebugValue(date, date => date.toDateString()); From dc5a6e191ff100ecb552920e960ef738b9f6104c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Mar 2019 09:59:48 -0700 Subject: [PATCH 34/34] Update nav.yml --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index c8f4f622c..3353ee95d 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -120,7 +120,7 @@ - id: hooks-custom title: Building Your Own Hooks - id: hooks-reference - title: Справочник API Хуков + title: Справочник API хуков - id: hooks-faq title: Hooks FAQ - title: Участие в проекте