Skip to content

Commit 7773e61

Browse files
authored
docs(cn): reference/react/useEffectEvent to Chinese (#1813)
2 parents 5d3292f + 20d804e commit 7773e61

File tree

1 file changed

+19
-20
lines changed

1 file changed

+19
-20
lines changed

src/content/reference/react/useEffectEvent.md

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ version: canary
1414

1515
<Intro>
1616

17-
`useEffectEvent` is a React Hook that lets you extract non-reactive logic from your Effects into a reusable function called an [Effect Event](/learn/separating-events-from-effects#declaring-an-effect-event).
17+
`useEffectEvent` 是一个 React Hook,它可以让你将 Effect 中的非响应式逻辑提取到一个可复用的函数中,这个函数称为 [Effect Event](/learn/separating-events-from-effects#declaring-an-effect-event)
1818

1919
```js
2020
const onSomething = useEffectEvent(callback)
@@ -24,18 +24,18 @@ const onSomething = useEffectEvent(callback)
2424

2525
<InlineToc />
2626

27-
## Reference {/*reference*/}
27+
## 参考 {/*reference*/}
2828

2929
### `useEffectEvent(callback)` {/*useeffectevent*/}
3030

31-
Call `useEffectEvent` at the top level of your component to declare an Effect Event. Effect Events are functions you can call inside Effects, such as `useEffect`:
31+
在组件的顶层调用 `useEffectEvent` 来声明一个 Effect EventEffect Event 是你可以在 Effect 中调用的函数,例如 `useEffect`
3232

3333
```js {4-6,11}
3434
import { useEffectEvent, useEffect } from 'react';
3535

3636
function ChatRoom({ roomId, theme }) {
3737
const onConnected = useEffectEvent(() => {
38-
showNotification('Connected!', theme);
38+
showNotification('已连接!', theme);
3939
});
4040

4141
useEffect(() => {
@@ -51,33 +51,33 @@ function ChatRoom({ roomId, theme }) {
5151
}
5252
```
5353

54-
[See more examples below.](#usage)
54+
[在下方查看更多示例](#usage)
5555

56-
#### Parameters {/*parameters*/}
56+
#### 参数 {/*parameters*/}
5757

58-
- `callback`: A function containing the logic for your Effect Event. When you define an Effect Event with `useEffectEvent`, the `callback` always accesses the latest values from props and state when it is invoked. This helps avoid issues with stale closures.
58+
- `callback`:一个包含你 Effect Event 逻辑的函数。当你使用 `useEffectEvent` 定义一个 Effect Event 时,`callback` 在被调用时总是可以访问到最新的 props state。这有助于避免陈旧闭包问题。
5959

60-
#### Returns {/*returns*/}
60+
#### 返回值 {/*returns*/}
6161

62-
Returns an Effect Event function. You can call this function inside `useEffect`, `useLayoutEffect`, or `useInsertionEffect`.
62+
返回一个 Effect Event 函数。你可以在 `useEffect``useLayoutEffect` `useInsertionEffect` 中调用这个函数。
6363

64-
#### Caveats {/*caveats*/}
64+
#### 注意事项 {/*caveats*/}
6565

66-
- **Only call inside Effects:** Effect Events should only be called within Effects. Define them just before the Effect that uses them. Do not pass them to other components or hooks.
67-
- **Not a dependency shortcut:** Do not use `useEffectEvent` to avoid specifying dependencies in your Effect's dependency array. This can hide bugs and make your code harder to understand. Prefer explicit dependencies or use refs to compare previous values if needed.
68-
- **Use for non-reactive logic:** Only use `useEffectEvent` to extract logic that does not depend on changing values.
66+
- **仅在 Effect 中调用**Effect Event 应该只在 Effect 中调用。在使用它的 Effect 之前定义它。不要将它传递给其他组件或 hooks
67+
- **不是依赖数组的捷径**:不要用 `useEffectEvent` 来避免在 Effect 的依赖数组中声明依赖。这可能会隐藏 bug 并让代码更难理解。更推荐显式依赖,或使用 ref 来比较之前的值。
68+
- **用于非响应式逻辑**:仅在逻辑不依赖变化的值时使用 `useEffectEvent` 来提取。
6969

7070
___
7171

72-
## Usage {/*usage*/}
72+
## 用法 {/*usage*/}
7373

74-
### Reading the latest props and state {/*reading-the-latest-props-and-state*/}
74+
### 读取最新的 props state {/*reading-the-latest-props-and-state*/}
7575

76-
Typically, when you access a reactive value inside an Effect, you must include it in the dependency array. This makes sure your Effect runs again whenever that value changes, which is usually the desired behavior.
76+
通常,当你在 Effect 中访问一个响应式值时,你必须把它包含在依赖数组里。这样可以确保当这个值改变时,Effect 会再次运行,这通常是期望的行为。
7777

78-
But in some cases, you may want to read the most recent props or state inside an Effect without causing the Effect to re-run when those values change.
78+
但在某些情况下,你可能只想在 Effect 中读取最新的 props state,而不希望当这些值改变时让 Effect 重新运行。
7979

80-
To [read the latest props or state](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events) in your Effect, without making those values reactive, include them in an Effect Event.
80+
要在 Effect 中[读取最新的 props state](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events),而不让这些值成为响应式依赖,请把它们放进一个 Effect Event 中。
8181

8282
```js {7-9,12}
8383
import { useEffect, useContext, useEffectEvent } from 'react';
@@ -98,5 +98,4 @@ function Page({ url }) {
9898
}
9999
```
100100

101-
You can pass reactive values like `url` as arguments to the Effect Event. This lets you access the latest values without making your Effect re-run for every change.
102-
101+
你可以将 `url` 这样的响应式值作为参数传递给 Effect Event。这让你可以访问最新的值,而不必因为这些值的改变而让 Effect 重新运行。

0 commit comments

Comments
 (0)