Skip to content

Commit 36ac6c5

Browse files
merging all conflicts
2 parents 4a76825 + 1fe2e0a commit 36ac6c5

File tree

8 files changed

+398
-42
lines changed

8 files changed

+398
-42
lines changed

content/community/conferences.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,11 @@ September 26-28, 2019 in Goa, India
7676

7777
[Website](https://www.reactindia.io/) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia)
7878

79+
### React Alicante 2019 {#react-alicante-2019}
80+
September 26-28, 2019 in Alicante, Spain
81+
82+
[Website](http://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante) - [Facebook](https://www.facebook.com/ReactAlicante)
83+
7984
## Past Conferences {#past-conferences}
8085

8186
### React.js Conf 2015 {#reactjs-conf-2015}

content/docs/hooks-custom.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ import React, { useState, useEffect } from 'react';
1818
function FriendStatus(props) {
1919
const [isOnline, setIsOnline] = useState(null);
2020
21-
function handleStatusChange(status) {
22-
setIsOnline(status.isOnline);
23-
}
24-
2521
useEffect(() => {
22+
function handleStatusChange(status) {
23+
setIsOnline(status.isOnline);
24+
}
25+
2626
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
2727
return () => {
2828
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
@@ -44,11 +44,11 @@ import React, { useState, useEffect } from 'react';
4444
function FriendListItem(props) {
4545
const [isOnline, setIsOnline] = useState(null);
4646
47-
function handleStatusChange(status) {
48-
setIsOnline(status.isOnline);
49-
}
50-
5147
useEffect(() => {
48+
function handleStatusChange(status) {
49+
setIsOnline(status.isOnline);
50+
}
51+
5252
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
5353
return () => {
5454
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
@@ -79,11 +79,11 @@ import React, { useState, useEffect } from 'react';
7979
function useFriendStatus(friendID) {
8080
const [isOnline, setIsOnline] = useState(null);
8181
82-
function handleStatusChange(status) {
83-
setIsOnline(status.isOnline);
84-
}
85-
8682
useEffect(() => {
83+
function handleStatusChange(status) {
84+
setIsOnline(status.isOnline);
85+
}
86+
8787
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
8888
return () => {
8989
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);

content/docs/hooks-effect.md

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -198,17 +198,17 @@ class FriendStatus extends React.Component {
198198
199199
Вы должно быть подумали, что нам потребуется отдельный эффект для выполнения сброса. Так как код для оформления и отмены подписки тесно связан с `useEffect`, мы решили объединить их. Если ваш эффект возвращает функцию, React выполнит её только тогда, когда наступит время сбросить эффект.
200200
201-
```js{10-16}
201+
```js{6-16}
202202
import React, { useState, useEffect } from 'react';
203203

204204
function FriendStatus(props) {
205205
const [isOnline, setIsOnline] = useState(null);
206206

207-
function handleStatusChange(status) {
208-
setIsOnline(status.isOnline);
209-
}
210-
211207
useEffect(() => {
208+
function handleStatusChange(status) {
209+
setIsOnline(status.isOnline);
210+
}
211+
212212
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
213213
// Указываем, как сбросить этот эффект:
214214
return function cleanup() {
@@ -237,6 +237,10 @@ function FriendStatus(props) {
237237
238238
```js
239239
useEffect(() => {
240+
function handleStatusChange(status) {
241+
setIsOnline(status.isOnline);
242+
}
243+
240244
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
241245
return () => {
242246
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
@@ -316,15 +320,15 @@ function FriendStatusWithCounter(props) {
316320

317321
const [isOnline, setIsOnline] = useState(null);
318322
useEffect(() => {
323+
function handleStatusChange(status) {
324+
setIsOnline(status.isOnline);
325+
}
326+
319327
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
320328
return () => {
321329
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
322330
};
323331
});
324-
325-
function handleStatusChange(status) {
326-
setIsOnline(status.isOnline);
327-
}
328332
// ...
329333
}
330334
```
@@ -394,6 +398,7 @@ function FriendStatusWithCounter(props) {
394398
function FriendStatus(props) {
395399
// ...
396400
useEffect(() => {
401+
// ...
397402
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
398403
return () => {
399404
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
@@ -449,8 +454,12 @@ useEffect(() => {
449454
450455
Это также работает для эффектов с этапом сброса:
451456
452-
```js{6}
457+
```js{10}
453458
useEffect(() => {
459+
function handleStatusChange(status) {
460+
setIsOnline(status.isOnline);
461+
}
462+
454463
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
455464
return () => {
456465
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
@@ -462,9 +471,19 @@ useEffect(() => {
462471
463472
>Примечание
464473
>
474+
<<<<<<< HEAD
465475
>Если вы хотите использовать эту оптимизацию, обратите внимание на то, чтобы массив включал в себя **все значения из внешней области видимости, которые могут изменяться с течением времени, и которые будут использоваться эффектом**. В противном случае, ваш код будет ссылаться на устаревшее значение из предыдущих рендеров. Мы рассмотрим другие возможные оптимизации на странице [справочник API хуков](/docs/hooks-reference.html).
466476
>
467477
>Если вы хотите выполнять эффект и сбрасывать его однократно (при монтировании и размонтировании), вы можете передать пустой массив вторым аргументом. React посчитает, что ваш эффект не зависит от *каких-либо* значений из пропсов или состояния, и таким образом, он будет знать, что ему не надо его выполнять повторно. Это не расценивается как особый случай -- он напрямую следует из логики работы массивов при вводе. Хотя передача `[]` ближе по мысли к модели знакомых `componentDidMount` и `componentWillUnmount`, мы не советуем привыкать к этому, так как это часто приводит к багам, [как было рассмотрено ранее](#explanation-why-effects-run-on-each-update). Не забывайте, что React откладывает выполнение `useEffect` пока браузер не отрисует все изменения, поэтому выполнение дополнительной работы не является существенной проблемой.
478+
=======
479+
>If you use this optimization, make sure the array includes **all values from the component scope (such as props and state) that change over time and that are used by the effect**. Otherwise, your code will reference stale values from previous renders. Learn more about [how to deal with functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) and [what to do when the array changes too often](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often).
480+
>
481+
>If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the inputs array always works.
482+
>
483+
>If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem.
484+
>
485+
>We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix.
486+
>>>>>>> 1fe2e0ae29b2fe8a8a09ab10048bb9fe284ff568
468487
469488
## Следующие шаги {#next-steps}
470489

0 commit comments

Comments
 (0)