Translate separating-events-from-effects#971
Open
gybber-dev wants to merge 2 commits intoreactjs:mainfrom
Open
Translate separating-events-from-effects#971gybber-dev wants to merge 2 commits intoreactjs:mainfrom
gybber-dev wants to merge 2 commits intoreactjs:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
gybber-dev
changed the title
gybber-dev
force-pushed
the
separating-events-from-effects
branch
from
12535b0 to
7b578fd
Compare
titovmx
requested changes
Oct 6, 2024
Collaborator
titovmx
left a comment
titovmx
left a comment
There was a problem hiding this comment.
Спасибо за перевод! Оставил несколько комментариев.
Кроме того, есть некоторые сомнения насчёт написания Эффектов и Событий эффектов с заглавной буквы - более общая практика в русском переводе термины НЕ писать с большой буквы, хотя и не думаю, что тут была чёткая договорённость. Однако, если посмотреть на старый перевод там эффекты писались с маленькой буквы.
| ## Реактивные значения и реактивная логика {/*reactive-values-and-reactive-logic*/} | ||
|
|
||
| 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. | ||
| Интуитивно мы понимаем, что обработчики событий всегда запускаются "вручную", например, при нажатии на кнопку. Эффекты же запускаются "автоматически": они запускаются и перезапускаются так часто, как это необходимо, чтобы оставаться синхронизированным. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Интуитивно мы понимаем, что обработчики событий всегда запускаются "вручную", например, при нажатии на кнопку. Эффекты же запускаются "автоматически": они запускаются и перезапускаются так часто, как это необходимо, чтобы оставаться синхронизированным. | |
| Интуитивно мы понимаем, что обработчики событий всегда запускаются "вручную", например, при нажатии на кнопку. Эффекты же запускаются и перезапускаются "автоматически" так часто, как это необходимо, чтобы поддерживать компонент синхронизированным. |
предлагаю тут избежать повтора и уточнить что остаётся синхронизированным
Author
There was a problem hiding this comment.
Да, так звучит лучше. Исправил
| ``` | ||
|
|
||
| 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> и перезапускался при изменении этого значения. Поэтому он относится к Эффекту: |
Collaborator
There was a problem hiding this comment.
keep up - значит, наоборот, что должен соответствовать и "не отставал"
| useEffect(() => { | ||
| logVisit(url); | ||
| }, []); // 🔴 React Hook useEffect has a missing dependency: 'url' | ||
| }, []); // 🔴 В зависимостях React хука useEffect отсутствует: 'url' |
Collaborator
There was a problem hiding this comment.
Suggested change
| }, []); // 🔴 В зависимостях React хука useEffect отсутствует: 'url' | |
| }, []); // 🔴 В зависимостях React-хука useEffect отсутствует: 'url' |
| useEffect(() => { | ||
| logVisit(url, numberOfItems); | ||
| }, [url]); // 🔴 React Hook useEffect has a missing dependency: 'numberOfItems' | ||
| }, [url]); // 🔴 В зависимостях React хука useEffect отсутствует: 'numberOfItems' |
Collaborator
There was a problem hiding this comment.
Suggested change
| }, [url]); // 🔴 В зависимостях React хука useEffect отсутствует: 'numberOfItems' | |
| }, [url]); // 🔴 В зависимостях React-хука useEffect отсутствует: 'numberOfItems' |
| После того как `useEffectEvent` станет стабильной частью React, мы рекомендуем **никогда не подавлять линтер**. | ||
|
|
||
| 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 напомнил вам сделать это. Вы больше не будете получать такие напоминания при редактировании этого Эффекта, если вы отключите линтер. Это ведёт к ошибкам. |
Collaborator
There was a problem hiding this comment.
как-будто последний "Эффект" в первом предложении абзаца лишний?
| Проблема заключается в отключении линтера зависимостей. Если вы включите линтер, то увидите, что этот Эффект должен зависеть от функции `handleMove`. Это имеет смысл: `handleMove` объявлен внутри тела компонента, что делает его реактивным значением. Каждое реактивное значение должно быть включено в зависимость, иначе оно может устареть! | ||
|
|
||
| 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` из первого рендера всегда будет видеть это значение. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Автор исходного кода «солгал» React'у, сказав, что Эффект не зависит (`[]`) от каких-либо реактивных значений. Вот почему React не перезапустил Эффект после изменения `canMove` (и `handleMove` вместе с ним). Поскольку React не перезапустил Эффект, `handleMove`, присоединённый в качестве слушателя, является функцией `handleMove`, созданной во время первого рендера. Во время первого рендера `canMove` был `true`, поэтому `handleMove` из первого рендера всегда будет видеть это значение. | |
| Автор исходного кода «солгал» React, сказав, что Эффект не зависит (`[]`) от каких-либо реактивных значений. Вот почему React не перезапустил Эффект после изменения `canMove` (и `handleMove` вместе с ним). Поскольку React не перезапустил Эффект, `handleMove`, присоединённый в качестве слушателя, является функцией `handleMove`, созданной во время первого рендера. Во время первого рендера `canMove` был `true`, поэтому `handleMove` из первого рендера всегда будет видеть это значение. |
| }); | ||
|
|
||
| useTimer(onTick, 1000); // 🔴 Avoid: Passing Effect Events | ||
| useTimer(onTick, 1000); // 🔴 Избегай передачи Эффекта событий |
Collaborator
There was a problem hiding this comment.
Suggested change
| useTimer(onTick, 1000); // 🔴 Избегай передачи Эффекта событий | |
| useTimer(onTick, 1000); // 🔴 Избегайте передачи Эффекта событий |
| clearInterval(id); | ||
| }; | ||
| }, [delay, callback]); // Need to specify "callback" in dependencies | ||
| }, [delay, callback]); // Необходимо указать "колбэк" в качестве зависимости |
Collaborator
There was a problem hiding this comment.
мне кажется, так как тут взято в кавычки - идёт ссылка на само имя переменной, поэтому переводить не нужно
| ``` | ||
|
|
||
| Effect Events are non-reactive "pieces" of your Effect code. They should be next to the Effect using them. | ||
| События эффекта — это не реактивные «части» кода вашего Эффекта. Они должны быть рядом с Эффектом, который их использует. |
Collaborator
There was a problem hiding this comment.
Suggested change
| События эффекта — это не реактивные «части» кода вашего Эффекта. Они должны быть рядом с Эффектом, который их использует. | |
| События эффекта — это нереактивные «части» кода вашего Эффекта. Они должны быть рядом с Эффектом, который их использует. |
прилагательное с приставкой
| Как обычно, при поиске ошибок в Эффектах начните с поиска отключений линтера. | ||
|
|
||
| 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` в массив зависимостей: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Если вы удалите комментарий, отключающий линтер, React скажет вам, что Эффект зависит от `increment`, но вы «солгали» React'у, заявив, что этот Эффект не зависит ни от одного реактивного значения (`[]`). Добавьте `increment` в массив зависимостей: | |
| Если вы удалите комментарий, отключающий линтер, React скажет вам, что Эффект зависит от `increment`, но вы «солгали» React, заявив, что этот Эффект не зависит ни от одного реактивного значения (`[]`). Добавьте `increment` в массив зависимостей: |
Author
Спасибо за ревью. Да, договоренностей я не нашел, но подумал, что написание подобных терминов с заглавной буквы более явно выделит их в тексте, и позволит легче отделить их от нарицательных аналогов. Хотел обсудить этот вопрос с сообществом, если есть предложения, присоединяйтесь |
Contributor
|
@gybber-dev Привет! Есть ли планы вернуться к этому ПРу? Если что, могу помочь с правками или доработать его |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Если ваш пулреквест является исправлением бага, а не переводом, то сперва убедитесь, что проблема относится ТОЛЬКО к https://ru.reactjs.org, а не к https://reactjs.org. Если это не так, то пулреквест следует открыть в родительском репозитории.