Skip to content

Commit aad51f2

Browse files
merging all conflicts
2 parents eb7b32c + 1f2dbb7 commit aad51f2

File tree

4 files changed

+173
-4
lines changed

4 files changed

+173
-4
lines changed

content/community/conferences.md

+5
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ July 15-21, 2019. New York City, USA
5757

5858
[Website](https://reactweek.nyc) - [Twitter](https://twitter.com/ReactWeek)
5959

60+
### React Rally 2019
61+
August 22-23, 2019. Salt Lake City, USA.
62+
63+
[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
64+
6065
### ComponentsConf 2019 {#componentsconf-2019}
6166
September 6, 2019 in Melbourne, Australia
6267
[Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf)

content/docs/hooks-faq.md

+111-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ prev: hooks-reference.html
1818
).join('\n')
1919
-->
2020

21+
<<<<<<< HEAD
2122
* [Внедрение хуков](#adoption-strategy)
2223
* [В какой версии React появились хуки?](#which-versions-of-react-include-hooks)
2324
* [Нужно ли переписать все мои классовые компоненты?](#do-i-need-to-rewrite-all-my-class-components)
@@ -61,6 +62,52 @@ prev: hooks-reference.html
6162
### В какой версии React появились хуки? {#which-versions-of-react-include-hooks}
6263

6364
Начиная с релиза 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)
91+
* **[Performance Optimizations](#performance-optimizations)**
92+
* [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
64111
65112
* React DOM
66113
* React DOM Server
@@ -454,7 +501,65 @@ function ScrollView({row}) {
454501

455502
Несмотря на то, что вам не понадобится это часто, вы можете предоставить некоторые императивные методы родительскому компоненту, используя хук [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle).
456503

504+
<<<<<<< HEAD
457505
### Что значит `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
458563
459564
Если вы не знакомы с этим синтаксисом, ознакомьтесь с [объяснением](/docs/hooks-state.html#tip-what-do-square-brackets-mean) в документации хука состояния.
460565

@@ -857,8 +962,13 @@ function Form() {
857962
const [text, updateText] = useState('');
858963
const textRef = useRef();
859964
965+
<<<<<<< HEAD
860966
useLayoutEffect(() => {
861967
textRef.current = text; // Записать в реф
968+
=======
969+
useEffect(() => {
970+
textRef.current = text; // Write it to the ref
971+
>>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
862972
});
863973
864974
const handleSubmit = useCallback(() => {
@@ -898,7 +1008,7 @@ function useEventCallback(fn, dependencies) {
8981008
throw new Error('Невозможно вызвать обработчик события во время рендера.');
8991009
});
9001010
901-
useLayoutEffect(() => {
1011+
useEffect(() => {
9021012
ref.current = fn;
9031013
}, [fn, ...dependencies]);
9041014

content/docs/hooks-reference.md

+46-1
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@ const [state, setState] = useState(() => {
9696

9797
Если вы обновите состояние хука тем же значением, что и текущее состояние, React досрочно выйдет из хука без повторного рендера дочерних элементов и запуска эффектов. (React использует [алгоритм сравнения `Object.is`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).)
9898

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+
99101
### `useEffect` {#useeffect}
100102

101103
```js
@@ -171,12 +173,32 @@ useEffect(
171173
### `useContext` {#usecontext}
172174

173175
```js
174-
const context = useContext(Context);
176+
const value = useContext(MyContext);
175177
```
176178

179+
<<<<<<< HEAD
177180
Принимает объект контекста (значение, возвращённое из `React.createContext`) и возвращает текущее значение контекста, как указано ближайшим поставщиком контекста для данного контекста.
178181

179182
Когда провайдер обновляется, этот хук инициирует повторный рендер с последним значением контекста.
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
180202
181203
## Дополнительные хуки {#additional-hooks}
182204

@@ -283,6 +305,8 @@ function Counter({initialCount}) {
283305

284306
Если вы вернёте то же значение из редюсера хука, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует [алгоритм сравнения Object.is](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).)
285307

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+
286310
### `useCallback` {#usecallback}
287311

288312
```js
@@ -354,7 +378,20 @@ function TextInputWithFocusButton() {
354378
}
355379
```
356380

381+
<<<<<<< HEAD
357382
Обратите внимание, что `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.
393+
394+
>>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
358395
359396
### `useImperativeHandle` {#useimperativehandle}
360397

@@ -387,7 +424,15 @@ FancyInput = forwardRef(FancyInput);
387424

388425
> Совет
389426
>
427+
<<<<<<< HEAD
390428
> Если вы переносите код из классового компонента, `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.
435+
>>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
391436
392437
### `useDebugValue` {#usedebugvalue}
393438

content/languages.yml

+11-2
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,15 @@
6666
- name: Italian
6767
translated_name: Italiano
6868
code: it
69-
status: 0
69+
status: 1
7070
- name: Japanese
7171
translated_name: 日本語
7272
code: ja
7373
status: 2
74+
- name: Georgian
75+
translated_name: ქართული
76+
code: ka
77+
status: 0
7478
- name: Central Khmer
7579
translated_name: ភាសាខ្មែរ
7680
code: km
@@ -126,6 +130,7 @@
126130
- name: Swedish
127131
translated_name: Svenska
128132
code: sv
133+
status: 0
129134
- name: Tamil
130135
translated_name: தமிழ்
131136
code: ta
@@ -134,6 +139,10 @@
134139
translated_name: తెలుగు
135140
code: te
136141
status: 0
142+
- name: Thai
143+
translated_name: ไทย
144+
code: th
145+
status: 0
137146
- name: Turkish
138147
translated_name: Türkçe
139148
code: tr
@@ -157,7 +166,7 @@
157166
- name: Simplified Chinese
158167
translated_name: 简体中文
159168
code: zh-hans
160-
status: 1
169+
status: 2
161170
- name: Traditional Chinese
162171
translated_name: 繁體中文
163172
code: zh-hant

0 commit comments

Comments
 (0)