-
Notifications
You must be signed in to change notification settings - Fork 386
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Translate separating-events-from-effects #971
base: main
Are you sure you want to change the base?
Translate separating-events-from-effects #971
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
12535b0
to
7b578fd
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Спасибо за перевод! Оставил несколько комментариев.
Кроме того, есть некоторые сомнения насчёт написания Эффектов и Событий эффектов с заглавной буквы - более общая практика в русском переводе термины НЕ писать с большой буквы, хотя и не думаю, что тут была чёткая договорённость. Однако, если посмотреть на старый перевод там эффекты писались с маленькой буквы.
|
||
Intuitively, you could say that event handlers are always triggered "manually", for example by clicking a button. Effects, on the other hand, are "automatic": they run and re-run as often as it's needed to stay synchronized. | ||
Интуитивно мы понимаем, что обработчики событий всегда запускаются "вручную", например, при нажатии на кнопку. Эффекты же запускаются "автоматически": они запускаются и перезапускаются так часто, как это необходимо, чтобы оставаться синхронизированным. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Интуитивно мы понимаем, что обработчики событий всегда запускаются "вручную", например, при нажатии на кнопку. Эффекты же запускаются "автоматически": они запускаются и перезапускаются так часто, как это необходимо, чтобы оставаться синхронизированным. | |
Интуитивно мы понимаем, что обработчики событий всегда запускаются "вручную", например, при нажатии на кнопку. Эффекты же запускаются и перезапускаются "автоматически" так часто, как это необходимо, чтобы поддерживать компонент синхронизированным. |
предлагаю тут избежать повтора и уточнить что остаётся синхронизированным
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Да, так звучит лучше. Исправил
@@ -210,7 +210,7 @@ Now let's return to these lines: | |||
// ... | |||
``` | |||
|
|||
From the user's perspective, **a change to the `roomId` *does* mean that they want to connect to a different room.** In other words, the logic for connecting to the room should be reactive. You *want* these lines of code to "keep up" with the <CodeStep step={2}>reactive value</CodeStep>, and to run again if that value is different. That's why it belongs in an Effect: | |||
С точки зрения пользователя, **изменение `roomId` *означает*, что он хочет подключиться к другому чату.** Другими словами, логика подключения к чату должна быть реактивной. Вы *хотите*, чтобы этот код "отставал" от <CodeStep step={2}>реактивного значения</CodeStep> и перезапускался при изменении этого значения. Поэтому он относится к Эффекту: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
keep up - значит, наоборот, что должен соответствовать и "не отставал"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Да, точно. Исправил
|
||
```js {1,3} | ||
function Page({ url }) { | ||
useEffect(() => { | ||
logVisit(url); | ||
}, []); // 🔴 React Hook useEffect has a missing dependency: 'url' | ||
}, []); // 🔴 В зависимостях React хука useEffect отсутствует: 'url' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
}, []); // 🔴 В зависимостях React хука useEffect отсутствует: 'url' | |
}, []); // 🔴 В зависимостях React-хука useEffect отсутствует: 'url' |
@@ -628,14 +628,14 @@ function Page({ url }) { | |||
|
|||
useEffect(() => { | |||
logVisit(url, numberOfItems); | |||
}, [url]); // 🔴 React Hook useEffect has a missing dependency: 'numberOfItems' | |||
}, [url]); // 🔴 В зависимостях React хука useEffect отсутствует: 'numberOfItems' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
}, [url]); // 🔴 В зависимостях React хука useEffect отсутствует: 'numberOfItems' | |
}, [url]); // 🔴 В зависимостях React-хука useEffect отсутствует: 'numberOfItems' |
|
||
The first downside of suppressing the rule is that React will no longer warn you when your Effect needs to "react" to a new reactive dependency you've introduced to your code. In the earlier example, you added `url` to the dependencies *because* React reminded you to do it. You will no longer get such reminders for any future edits to that Effect if you disable the linter. This leads to bugs. | ||
Первый недостаток при отключении этого правила заключается в том, что React перестанет предупреждать, чтобы вы добавили зависимости в свой Эффект при использовании новых реактивных значений Эффект. В предыдущем примере вы добавили `url` к зависимостям, *потому что* React напомнил вам сделать это. Вы больше не будете получать такие напоминания при редактировании этого Эффекта, если вы отключите линтер. Это ведёт к ошибкам. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
как-будто последний "Эффект" в первом предложении абзаца лишний?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Так и есть. Исправил
|
||
The author of the original code has "lied" to React by saying that the Effect does not depend (`[]`) on any reactive values. This is why React did not re-synchronize the Effect after `canMove` has changed (and `handleMove` with it). Because React did not re-synchronize the Effect, the `handleMove` attached as a listener is the `handleMove` function created during the initial render. During the initial render, `canMove` was `true`, which is why `handleMove` from the initial render will forever see that value. | ||
Автор исходного кода «солгал» React'у, сказав, что Эффект не зависит (`[]`) от каких-либо реактивных значений. Вот почему React не перезапустил Эффект после изменения `canMove` (и `handleMove` вместе с ним). Поскольку React не перезапустил Эффект, `handleMove`, присоединённый в качестве слушателя, является функцией `handleMove`, созданной во время первого рендера. Во время первого рендера `canMove` был `true`, поэтому `handleMove` из первого рендера всегда будет видеть это значение. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Автор исходного кода «солгал» React'у, сказав, что Эффект не зависит (`[]`) от каких-либо реактивных значений. Вот почему React не перезапустил Эффект после изменения `canMove` (и `handleMove` вместе с ним). Поскольку React не перезапустил Эффект, `handleMove`, присоединённый в качестве слушателя, является функцией `handleMove`, созданной во время первого рендера. Во время первого рендера `canMove` был `true`, поэтому `handleMove` из первого рендера всегда будет видеть это значение. | |
Автор исходного кода «солгал» React, сказав, что Эффект не зависит (`[]`) от каких-либо реактивных значений. Вот почему React не перезапустил Эффект после изменения `canMove` (и `handleMove` вместе с ним). Поскольку React не перезапустил Эффект, `handleMove`, присоединённый в качестве слушателя, является функцией `handleMove`, созданной во время первого рендера. Во время первого рендера `canMove` был `true`, поэтому `handleMove` из первого рендера всегда будет видеть это значение. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Поправил, спасибо
@@ -899,7 +899,7 @@ function Timer() { | |||
setCount(count + 1); | |||
}); | |||
|
|||
useTimer(onTick, 1000); // 🔴 Avoid: Passing Effect Events | |||
useTimer(onTick, 1000); // 🔴 Избегай передачи Эффекта событий |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useTimer(onTick, 1000); // 🔴 Избегай передачи Эффекта событий | |
useTimer(onTick, 1000); // 🔴 Избегайте передачи Эффекта событий |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Исправлено
@@ -912,11 +912,11 @@ function useTimer(callback, delay) { | |||
return () => { | |||
clearInterval(id); | |||
}; | |||
}, [delay, callback]); // Need to specify "callback" in dependencies | |||
}, [delay, callback]); // Необходимо указать "колбэк" в качестве зависимости |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
мне кажется, так как тут взято в кавычки - идёт ссылка на само имя переменной, поэтому переводить не нужно
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Да, точно. Исправил
} | ||
``` | ||
|
||
Effect Events are non-reactive "pieces" of your Effect code. They should be next to the Effect using them. | ||
События эффекта — это не реактивные «части» кода вашего Эффекта. Они должны быть рядом с Эффектом, который их использует. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
События эффекта — это не реактивные «части» кода вашего Эффекта. Они должны быть рядом с Эффектом, который их использует. | |
События эффекта — это нереактивные «части» кода вашего Эффекта. Они должны быть рядом с Эффектом, который их использует. |
прилагательное с приставкой
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Да, исправил, спасибо
|
||
If you remove the suppression comment, React will tell you that this Effect's code depends on `increment`, but you "lied" to React by claiming that this Effect does not depend on any reactive values (`[]`). Add `increment` to the dependency array: | ||
Если вы удалите комментарий, отключающий линтер, React скажет вам, что Эффект зависит от `increment`, но вы «солгали» React'у, заявив, что этот Эффект не зависит ни от одного реактивного значения (`[]`). Добавьте `increment` в массив зависимостей: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Если вы удалите комментарий, отключающий линтер, React скажет вам, что Эффект зависит от `increment`, но вы «солгали» React'у, заявив, что этот Эффект не зависит ни от одного реактивного значения (`[]`). Добавьте `increment` в массив зависимостей: | |
Если вы удалите комментарий, отключающий линтер, React скажет вам, что Эффект зависит от `increment`, но вы «солгали» React, заявив, что этот Эффект не зависит ни от одного реактивного значения (`[]`). Добавьте `increment` в массив зависимостей: |
Спасибо за ревью. Да, договоренностей я не нашел, но подумал, что написание подобных терминов с заглавной буквы более явно выделит их в тексте, и позволит легче отделить их от нарицательных аналогов. Хотел обсудить этот вопрос с сообществом, если есть предложения, присоединяйтесь |
Если ваш пулреквест является исправлением бага, а не переводом, то сперва убедитесь, что проблема относится ТОЛЬКО к https://ru.reactjs.org, а не к https://reactjs.org. Если это не так, то пулреквест следует открыть в родительском репозитории.