Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Translate separating-events-from-effects #971

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

Open
gybber-dev wants to merge 2 commits into reactjs:main
base: main
Choose a base branch
Loading
from gybber-dev:separating-events-from-effects

Conversation

@gybber-dev
Copy link

@gybber-dev gybber-dev commented Sep 20, 2024

Если ваш пулреквест является исправлением бага, а не переводом, то сперва убедитесь, что проблема относится ТОЛЬКО к https://ru.reactjs.org, а не к https://reactjs.org. Если это не так, то пулреквест следует открыть в родительском репозитории.

Copy link

vercel bot commented Sep 20, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
ru-legacy-reactjs-org ⬜️ Ignored (Inspect) Visit Preview Oct 12, 2024 4:54pm

@gybber-dev gybber-dev changed the title (削除) translated separating-events-from-effects (削除ここまで) (追記) Translate separating-events-from-effects (追記ここまで) Sep 20, 2024
Copy link
Collaborator

@titovmx titovmx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Спасибо за перевод! Оставил несколько комментариев.
Кроме того, есть некоторые сомнения насчёт написания Эффектов и Событий эффектов с заглавной буквы - более общая практика в русском переводе термины НЕ писать с большой буквы, хотя и не думаю, что тут была чёткая договорённость. Однако, если посмотреть на старый перевод там эффекты писались с маленькой буквы.

## Реактивные значения и реактивная логика {/*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.
Интуитивно мы понимаем, что обработчики событий всегда запускаются "вручную", например, при нажатии на кнопку. Эффекты же запускаются "автоматически": они запускаются и перезапускаются так часто, как это необходимо, чтобы оставаться синхронизированным.
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Интуитивно мы понимаем, что обработчики событий всегда запускаются "вручную", например, при нажатии на кнопку. Эффекты же запускаются "автоматически": они запускаются и перезапускаются так часто, как это необходимо, чтобы оставаться синхронизированным.
Интуитивно мы понимаем, что обработчики событий всегда запускаются "вручную", например, при нажатии на кнопку. Эффекты же запускаются и перезапускаются "автоматически" так часто, как это необходимо, чтобы поддерживать компонент синхронизированным.

предлагаю тут избежать повтора и уточнить что остаётся синхронизированным

Copy link
Author

@gybber-dev gybber-dev Oct 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Да, так звучит лучше. Исправил

```

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> и перезапускался при изменении этого значения. Поэтому он относится к Эффекту:
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

keep up - значит, наоборот, что должен соответствовать и "не отставал"

Copy link
Author

@gybber-dev gybber-dev Oct 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Да, точно. Исправил

useEffect(() => {
logVisit(url);
}, []); // 🔴 React Hook useEffect has a missing dependency: 'url'
}, []); // 🔴 В зависимостях React хука useEffect отсутствует: 'url'
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}, []); // 🔴 В зависимостях Reactхука useEffect отсутствует: 'url'
}, []); // 🔴 В зависимостях React-хука useEffect отсутствует: 'url'

gybber-dev reacted with thumbs up emoji
useEffect(() => {
logVisit(url, numberOfItems);
}, [url]); // 🔴 React Hook useEffect has a missing dependency: 'numberOfItems'
}, [url]); // 🔴 В зависимостях React хука useEffect отсутствует: 'numberOfItems'
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}, [url]); // 🔴 В зависимостях Reactхука useEffect отсутствует: 'numberOfItems'
}, [url]); // 🔴 В зависимостях React-хука useEffect отсутствует: 'numberOfItems'

gybber-dev reacted with thumbs up emoji
После того как `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 напомнил вам сделать это. Вы больше не будете получать такие напоминания при редактировании этого Эффекта, если вы отключите линтер. Это ведёт к ошибкам.
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

как-будто последний "Эффект" в первом предложении абзаца лишний?

Copy link
Author

@gybber-dev gybber-dev Oct 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Так и есть. Исправил

Проблема заключается в отключении линтера зависимостей. Если вы включите линтер, то увидите, что этот Эффект должен зависеть от функции `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` из первого рендера всегда будет видеть это значение.
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Автор исходного кода «солгал» React'у, сказав, что Эффект не зависит (`[]`) от каких-либо реактивных значений. Вот почему React не перезапустил Эффект после изменения `canMove` (и `handleMove` вместе с ним). Поскольку React не перезапустил Эффект, `handleMove`, присоединённый в качестве слушателя, является функцией `handleMove`, созданной во время первого рендера. Во время первого рендера `canMove` был `true`, поэтому `handleMove` из первого рендера всегда будет видеть это значение.
Автор исходного кода «солгал» React, сказав, что Эффект не зависит (`[]`) от каких-либо реактивных значений. Вот почему React не перезапустил Эффект после изменения `canMove` (и `handleMove` вместе с ним). Поскольку React не перезапустил Эффект, `handleMove`, присоединённый в качестве слушателя, является функцией `handleMove`, созданной во время первого рендера. Во время первого рендера `canMove` был `true`, поэтому `handleMove` из первого рендера всегда будет видеть это значение.

Copy link
Author

@gybber-dev gybber-dev Oct 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Поправил, спасибо

});

useTimer(onTick, 1000); // 🔴 Avoid: Passing Effect Events
useTimer(onTick, 1000); // 🔴 Избегай передачи Эффекта событий
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
useTimer(onTick, 1000); // 🔴 Избегай передачи Эффекта событий
useTimer(onTick, 1000); // 🔴 Избегайте передачи Эффекта событий

Copy link
Author

@gybber-dev gybber-dev Oct 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Исправлено

clearInterval(id);
};
}, [delay, callback]); // Need to specify "callback" in dependencies
}, [delay, callback]); // Необходимо указать "колбэк" в качестве зависимости
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

мне кажется, так как тут взято в кавычки - идёт ссылка на само имя переменной, поэтому переводить не нужно

Copy link
Author

@gybber-dev gybber-dev Oct 12, 2024

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.
События эффекта — это не реактивные «части» кода вашего Эффекта. Они должны быть рядом с Эффектом, который их использует.
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
События эффекта — это не реактивные «части» кода вашего Эффекта. Они должны быть рядом с Эффектом, который их использует.
События эффекта — это нереактивные «части» кода вашего Эффекта. Они должны быть рядом с Эффектом, который их использует.

прилагательное с приставкой

Copy link
Author

@gybber-dev gybber-dev Oct 12, 2024

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` в массив зависимостей:
Copy link
Collaborator

@titovmx titovmx Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Если вы удалите комментарий, отключающий линтер, React скажет вам, что Эффект зависит от `increment`, но вы «солгали» React'у, заявив, что этот Эффект не зависит ни от одного реактивного значения (`[]`). Добавьте `increment` в массив зависимостей:
Если вы удалите комментарий, отключающий линтер, React скажет вам, что Эффект зависит от `increment`, но вы «солгали» React, заявив, что этот Эффект не зависит ни от одного реактивного значения (`[]`). Добавьте `increment` в массив зависимостей:

gybber-dev reacted with thumbs up emoji
Copy link
Author

есть некоторые сомнения насчёт написания Эффектов и Событий эффектов с заглавной буквы

Спасибо за ревью. Да, договоренностей я не нашел, но подумал, что написание подобных терминов с заглавной буквы более явно выделит их в тексте, и позволит легче отделить их от нарицательных аналогов. Хотел обсудить этот вопрос с сообществом, если есть предложения, присоединяйтесь
#851 (comment)

Copy link
Contributor

@gybber-dev Привет! Есть ли планы вернуться к этому ПРу? Если что, могу помочь с правками или доработать его

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@titovmx titovmx Awaiting requested review from titovmx

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /