You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/hooks-faq.md
+111-1
Original file line number
Diff line number
Diff line change
@@ -18,6 +18,7 @@ prev: hooks-reference.html
18
18
).join('\n')
19
19
-->
20
20
21
+
<<<<<<< HEAD
21
22
*[Внедрение хуков](#adoption-strategy)
22
23
*[В какой версии React появились хуки?](#which-versions-of-react-include-hooks)
23
24
*[Нужно ли переписать все мои классовые компоненты?](#do-i-need-to-rewrite-all-my-class-components)
@@ -61,6 +62,52 @@ prev: hooks-reference.html
61
62
### В какой версии React появились хуки? {#which-versions-of-react-include-hooks}
62
63
63
64
Начиная с релиза 16.8.0, React включает в себя стабильную реализацию хуков для:
65
+
=======
66
+
***[Adoption Strategy](#adoption-strategy)**
67
+
*[Which versions of React include Hooks?](#which-versions-of-react-include-hooks)
68
+
*[Do I need to rewrite all my class components?](#do-i-need-to-rewrite-all-my-class-components)
69
+
*[What can I do with Hooks that I couldn't with classes?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
70
+
*[How much of my React knowledge stays relevant?](#how-much-of-my-react-knowledge-stays-relevant)
71
+
*[Should I use Hooks, classes, or a mix of both?](#should-i-use-hooks-classes-or-a-mix-of-both)
72
+
*[Do Hooks cover all use cases for classes?](#do-hooks-cover-all-use-cases-for-classes)
73
+
*[Do Hooks replace render props and higher-order components?](#do-hooks-replace-render-props-and-higher-order-components)
74
+
*[What do Hooks mean for popular APIs like Redux connect() and React Router?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
75
+
*[Do Hooks work with static typing?](#do-hooks-work-with-static-typing)
76
+
*[How to test components that use Hooks?](#how-to-test-components-that-use-hooks)
77
+
*[What exactly do the lint rules enforce?](#what-exactly-do-the-lint-rules-enforce)
78
+
***[From Classes to Hooks](#from-classes-to-hooks)**
79
+
*[How do lifecycle methods correspond to Hooks?](#how-do-lifecycle-methods-correspond-to-hooks)
80
+
*[How can I do data fetching with Hooks?](#how-can-i-do-data-fetching-with-hooks)
81
+
*[Is there something like instance variables?](#is-there-something-like-instance-variables)
82
+
*[Should I use one or many state variables?](#should-i-use-one-or-many-state-variables)
83
+
*[Can I run an effect only on updates?](#can-i-run-an-effect-only-on-updates)
84
+
*[How to get the previous props or state?](#how-to-get-the-previous-props-or-state)
85
+
*[Why am I seeing stale props or state inside my function?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
86
+
*[How do I implement getDerivedStateFromProps?](#how-do-i-implement-getderivedstatefromprops)
87
+
*[Is there something like forceUpdate?](#is-there-something-like-forceupdate)
88
+
*[Can I make a ref to a function component?](#can-i-make-a-ref-to-a-function-component)
89
+
*[How can I measure a DOM node?](#how-can-i-measure-a-dom-node)
90
+
*[What does const [thing, setThing] = useState() mean?](#what-does-const-thing-setthing--usestate-mean)
*[Can I skip an effect on updates?](#can-i-skip-an-effect-on-updates)
93
+
*[Is it safe to omit functions from the list of dependencies?](#is-it-safe-to-omit-functions-from-the-list-of-dependencies)
94
+
*[What can I do if my effect dependencies change too often?](#what-can-i-do-if-my-effect-dependencies-change-too-often)
95
+
*[How do I implement shouldComponentUpdate?](#how-do-i-implement-shouldcomponentupdate)
96
+
*[How to memoize calculations?](#how-to-memoize-calculations)
97
+
*[How to create expensive objects lazily?](#how-to-create-expensive-objects-lazily)
98
+
*[Are Hooks slow because of creating functions in render?](#are-hooks-slow-because-of-creating-functions-in-render)
99
+
*[How to avoid passing callbacks down?](#how-to-avoid-passing-callbacks-down)
100
+
*[How to read an often-changing value from useCallback?](#how-to-read-an-often-changing-value-from-usecallback)
101
+
***[Under the Hood](#under-the-hood)**
102
+
*[How does React associate Hook calls with components?](#how-does-react-associate-hook-calls-with-components)
103
+
*[What is the prior art for Hooks?](#what-is-the-prior-art-for-hooks)
104
+
105
+
## Adoption Strategy {#adoption-strategy}
106
+
107
+
### Which versions of React include Hooks? {#which-versions-of-react-include-hooks}
108
+
109
+
Starting with 16.8.0, React includes a stable implementation of React Hooks for:
110
+
>>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
64
111
65
112
* React DOM
66
113
* React DOM Server
@@ -454,7 +501,65 @@ function ScrollView({row}) {
454
501
455
502
Несмотря на то, что вам не понадобится это часто, вы можете предоставить некоторые императивные методы родительскому компоненту, используя хук [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle).
456
503
504
+
<<<<<<< HEAD
457
505
### Что значит `const [thing, setThing] = useState()`? {#what-does-const-thing-setthing--usestate-mean}
506
+
=======
507
+
### How can I measure a DOM node? {#how-can-i-measure-a-dom-node}
508
+
509
+
In order to measure the position or size of a DOM node, you can use a [callback ref](/docs/refs-and-the-dom.html#callback-refs). React will call that callback whenever the ref gets attached to a different node. Here is a [small demo](https://codesandbox.io/s/l7m0v5x4v9):
510
+
511
+
```js{4-8,12}
512
+
function MeasureExample() {
513
+
const [height, setHeight] = useState(0);
514
+
515
+
const measuredRef = useCallback(node => {
516
+
if (node !== null) {
517
+
setHeight(node.getBoundingClientRect().height);
518
+
}
519
+
}, []);
520
+
521
+
return (
522
+
<>
523
+
<h1 ref={measuredRef}>Hello, world</h1>
524
+
<h2>The above header is {Math.round(height)}px tall</h2>
525
+
</>
526
+
);
527
+
}
528
+
```
529
+
530
+
We didn't choose `useRef` in this example because an object ref doesn't notify us about *changes* to the current ref value. Using a callback ref ensures that [even if a child component displays the measured node later](https://codesandbox.io/s/818zzk8m78) (e.g. in response to a click), we still get notified about it in the parent component and can update the measurements.
531
+
532
+
Note that we pass `[]` as a dependency array to `useCallback`. This ensures that our ref callback doesn't change between the re-renders, and so React won't call it unnecessarily.
533
+
534
+
If you want, you can [extract this logic](https://codesandbox.io/s/m5o42082xy) into a reusable Hook:
535
+
536
+
```js{2}
537
+
function MeasureExample() {
538
+
const [rect, ref] = useClientRect();
539
+
return (
540
+
<>
541
+
<h1 ref={ref}>Hello, world</h1>
542
+
{rect !== null &&
543
+
<h2>The above header is {Math.round(rect.height)}px tall</h2>
544
+
}
545
+
</>
546
+
);
547
+
}
548
+
549
+
function useClientRect() {
550
+
const [rect, setRect] = useState(null);
551
+
const ref = useCallback(node => {
552
+
if (node !== null) {
553
+
setRect(node.getBoundingClientRect());
554
+
}
555
+
}, []);
556
+
return [rect, ref];
557
+
}
558
+
```
559
+
560
+
561
+
### What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean}
562
+
>>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
458
563
459
564
Если вы не знакомы с этим синтаксисом, ознакомьтесь с [объяснением](/docs/hooks-state.html#tip-what-do-square-brackets-mean) в документации хука состояния.
460
565
@@ -857,8 +962,13 @@ function Form() {
857
962
const [text, updateText] = useState('');
858
963
const textRef = useRef();
859
964
965
+
<<<<<<< HEAD
860
966
useLayoutEffect(() => {
861
967
textRef.current = text; // Записать в реф
968
+
=======
969
+
useEffect(() => {
970
+
textRef.current = text; // Write it to the ref
971
+
>>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
862
972
});
863
973
864
974
const handleSubmit = useCallback(() => {
@@ -898,7 +1008,7 @@ function useEventCallback(fn, dependencies) {
898
1008
throw new Error('Невозможно вызвать обработчик события во время рендера.');
Если вы обновите состояние хука тем же значением, что и текущее состояние, React досрочно выйдет из хука без повторного рендера дочерних элементов и запуска эффектов. (React использует [алгоритм сравнения `Object.is`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).)
98
98
99
+
Note that React may still need to render that specific component again before bailing out. That shouldn't be a concern because React won't unnecessarily go "deeper" into the tree. If you're doing expensive calculations while rendering, you can optimize them with `useMemo`.
100
+
99
101
### `useEffect` {#useeffect}
100
102
101
103
```js
@@ -171,12 +173,32 @@ useEffect(
171
173
### `useContext` {#usecontext}
172
174
173
175
```js
174
-
constcontext=useContext(Context);
176
+
constvalue=useContext(MyContext);
175
177
```
176
178
179
+
<<<<<<< HEAD
177
180
Принимает объект контекста (значение, возвращённое из `React.createContext`) и возвращает текущее значение контекста, как указано ближайшим поставщиком контекста для данного контекста.
178
181
179
182
Когда провайдер обновляется, этот хук инициирует повторный рендер с последним значением контекста.
183
+
=======
184
+
Accepts a context object (the value returned from `React.createContext`) and returns the current context value for that context. The current context value is determined by the `value` prop of the nearest `<MyContext.Provider>` above the calling component in the tree.
185
+
186
+
When the nearest `<MyContext.Provider>` above the component updates, this Hook will trigger a rerender with the latest context `value` passed to that `MyContext` provider.
187
+
188
+
Don't forget that the argument to `useContext` must be the *context object itself*:
189
+
190
+
***Correct:**`useContext(MyContext)`
191
+
***Incorrect:**`useContext(MyContext.Consumer)`
192
+
***Incorrect:**`useContext(MyContext.Provider)`
193
+
194
+
A component calling `useContext` will always re-render when the context value changes. If re-rendering the component is expensive, you can [optimize it by using memoization](https://github.com/facebook/react/issues/15156#issuecomment-474590693).
195
+
196
+
>Tip
197
+
>
198
+
>If you're familiar with the context API before Hooks, `useContext(MyContext)` is equivalent to `static contextType = MyContext` in a class, or to `<MyContext.Consumer>`.
199
+
>
200
+
>`useContext(MyContext)` only lets you *read* the context and subscribe to its changes. You still need a `<MyContext.Provider>` above in the tree to *provide* the value for this context.
201
+
>>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
180
202
181
203
## Дополнительные хуки {#additional-hooks}
182
204
@@ -283,6 +305,8 @@ function Counter({initialCount}) {
283
305
284
306
Если вы вернёте то же значение из редюсера хука, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [алгоритм сравнения Object.is](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).)
285
307
308
+
Note that React may still need to render that specific component again before bailing out. That shouldn't be a concern because React won't unnecessarily go "deeper" into the tree. If you're doing expensive calculations while rendering, you can optimize them with `useMemo`.
309
+
286
310
### `useCallback` {#usecallback}
287
311
288
312
```js
@@ -354,7 +378,20 @@ function TextInputWithFocusButton() {
354
378
}
355
379
```
356
380
381
+
<<<<<<< HEAD
357
382
Обратите внимание, что `useRef()` полезен не только для атрибута `ref`. Он также [удобен для хранения любого изменяемого значения](/docs/hooks-faq.html#is-there-something-like-instance-variables) примерно так же, как вы используете поля экземпляров в классах.
383
+
=======
384
+
Essentially, `useRef` is like a "box" that can hold a mutable value in its `.current` property.
385
+
386
+
You might be familiar with refs primarily as a way to [access the DOM](/docs/refs-and-the-dom.html). If you pass a ref object to React with `<div ref={myRef} />`, React will set its `.current` property to the corresponding DOM node whenever that node changes.
387
+
388
+
However, `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.
389
+
390
+
This works because `useRef()` creates a plain JavaScript object. The only difference between `useRef()` and creating a `{current: ...}` object yourself is that `useRef` will give you the same ref object on every render.
391
+
392
+
Keep in mind that `useRef`*doesn't* notify you when its content changes. Mutating the `.current` property doesn't cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a [callback ref](/docs/hooks-faq.html#how-can-i-measure-a-dom-node) instead.
> Если вы переносите код из классового компонента, `useLayoutEffect` запускается в той же фазе, что и `componentDidMount` и `componentDidUpdate`, поэтому, если вы не уверены, какой хук эффект использовать, это, вероятно, наименее рискованно.
429
+
=======
430
+
> If you're migrating code from a class component, note `useLayoutEffect` fires in the same phase as `componentDidMount` and `componentDidUpdate`. However, **we recommend starting with `useEffect` first** and only trying `useLayoutEffect` if that causes a problem.
431
+
>
432
+
>If you use server rendering, keep in mind that *neither*`useLayoutEffect` nor `useEffect` can run until the JavaScript is downloaded. This is why React warns when a server-rendered component contains `useLayoutEffect`. To fix this, either move that logic to `useEffect` (if it isn't necessary for the first render), or delay showing that component until after the client renders (if the HTML looks broken until `useLayoutEffect` runs).
433
+
>
434
+
>To exclude a component that needs layout effects from the server-rendered HTML, render it conditionally with `showChild && <Child />` and defer showing it with `useEffect(() => { setShowChild(true); }, [])`. This way, the UI doesn't appear broken before hydration.
0 commit comments