Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 20 additions & 21 deletions src/content/reference/react/useEffectEvent.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ version: canary

<Intro>

`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).
`useEffectEvent` 是一个 React Hook,它可以让你将 Effect 中的非响应式逻辑提取到一个可复用的函数中,这个函数称为 [Effect Event](/learn/separating-events-from-effects#declaring-an-effect-event)

```js
const onSomething = useEffectEvent(callback)
Expand All @@ -24,18 +24,18 @@ const onSomething = useEffectEvent(callback)

<InlineToc />

## Reference {/*reference*/}
## 参考 {/*reference*/}

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

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`:
在组件的顶层调用 `useEffectEvent` 来声明一个 Effect EventEffect Event 是你可以在 Effect 中调用的函数,例如 `useEffect`

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

function ChatRoom({ roomId, theme }) {
const onConnected = useEffectEvent(() => {
showNotification('Connected!', theme);
showNotification('已连接!', theme);
});

useEffect(() => {
Expand All @@ -51,33 +51,33 @@ function ChatRoom({ roomId, theme }) {
}
```

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

#### Parameters {/*parameters*/}
#### 参数 {/*parameters*/}

- `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.
- `callback`:一个包含你 Effect Event 逻辑的函数。当你使用 `useEffectEvent` 定义一个 Effect Event 时,`callback` 在被调用时总是可以访问到最新的 props state。这有助于避免陈旧闭包问题。

#### Returns {/*returns*/}
#### 返回值 {/*returns*/}

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

#### Caveats {/*caveats*/}
#### 注意事项 {/*caveats*/}

- **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.
- **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.
- **Use for non-reactive logic:** Only use `useEffectEvent` to extract logic that does not depend on changing values.
- **仅在 Effect 中调用**:Effect Event 应该只在 Effect 中调用。在使用它的 Effect 之前定义它。不要将它传递给其他组件或 hooks
- **不是依赖数组的捷径**:不要用 `useEffectEvent` 来避免在 Effect 的依赖数组中声明依赖。这可能会隐藏 bug 并让代码更难理解。更推荐显式依赖,或使用 ref 来比较之前的值。
- **用于非响应式逻辑**:仅在逻辑不依赖变化的值时使用 `useEffectEvent` 来提取。

___
---

## Usage {/*usage*/}
## 用法 {/*usage*/}

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

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.
通常,当你在 Effect 中访问一个响应式值时,你必须把它包含在依赖数组里。这样可以确保当这个值改变时,Effect 会再次运行,这通常是期望的行为。

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.
但在某些情况下,你可能只想在 Effect 中读取最新的 props state,而不希望当这些值改变时让 Effect 重新运行。

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.
要在 Effect 中[读取最新的 props state](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events),而不让这些值成为响应式依赖,请把它们放进一个 Effect Event 中。

```js {7-9,12}
import { useEffect, useContext, useEffectEvent } from 'react';
Expand All @@ -98,5 +98,4 @@ function Page({ url }) {
}
```

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.

你可以将 `url` 这样的响应式值作为参数传递给 Effect Event。这让你可以访问最新的值,而不必因为这些值的改变而让 Effect 重新运行。