diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index cf9611bd27..c959e27752 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -1,10 +1,10 @@
 ---
-title: '使用 Effect 同步'
+title: '使用 Effect 进行同步'
 ---
 
 <Intro>
 
-有些组件需要与外部系统同步。例如，你可能希望根据 React state 控制非 React 组件、设置服务器连接或在组件出现在屏幕上时发送分析日志。Effects 会在渲染后运行一些代码，以便可以将组件与 React 之外的某些系统同步。
+有些组件需要与外部系统同步。例如，你可能希望根据 React state 控制非 React 组件、建立服务器连接或当组件在页面显示时发送分析日志。Effect 允许你在渲染结束后执行一些代码，以便将组件与 React 外部的某个系统相同步。
 
 </Intro>
 
@@ -14,52 +14,52 @@ title: '使用 Effect 同步'
 - Effect 与事件（event）有何不同
 - 如何在组件中声明 Effect
 - 如何避免不必要地重新运行 Effect
-- 为什么 Effect 在开发环境中会影响两次，如何修复它们
+- 为什么 Effect 在开发环境中会运行两次以及如何解决这个问题
 
 </YouWillLearn>
 
 ## 什么是 Effect，它与事件（event）有何不同？ {/*what-are-effects-and-how-are-they-different-from-events*/}
 
-在谈到 Effect 之前，你需要熟悉 React 组件中的两种逻辑类型：
+在接触 Effect 之前，你需要熟悉 React 组件中的两种逻辑类型：
 
-- **渲染逻辑代码**（在 [描述 UI](/learn/describing-the-ui) 中有介绍）位于组件的顶层。你将在这里接收 props 和 state，并对它们进行转换，最终返回你想在屏幕上看到的 JSX。[渲染的代码必须是纯粹的](/learn/keeping-components-pure)——就像数学公式一样，它只应该“计算”结果，而不做其他任何事情。
+- **渲染代码**（在 [描述 UI](/learn/describing-the-ui) 中有介绍）位于组件的顶层。你在这里处理 props 和 state，对它们进行转换，并返回希望在页面上显示的 JSX。[渲染代码必须是纯粹的](/learn/keeping-components-pure)——就像数学公式一样，它只应该“计算”结果，而不做其他任何事情。
 
-- **事件处理程序**（在 [添加交互性](/learn/adding-interactivity) 中介绍）是嵌套在组件内部的函数，而不仅仅是计算函数。事件处理程序可能会更新输入字段、提交 HTTP POST 请求以购买产品，或者将用户导航到另一个屏幕。事件处理程序包含由特定用户操作（例如按钮点击或键入）引起的“副作用”（它们改变了程序的状态）。
+- **事件处理程序**（在 [添加交互性](/learn/adding-interactivity) 中有介绍）是组件内部的嵌套函数，它们不光进行计算, 还会执行一些操作。事件处理程序可能会更新输入字段、提交 HTTP POST 请求来购买产品，或者将用户导航到另一个页面。事件处理程序包含由特定用户操作（例如按钮点击或输入）引起的“副作用”（它们改变了程序的状态）。
 
-有时这还不够。考虑一个 `ChatRoom` 组件，它在屏幕上可见时必须连接到聊天服务器。连接到服务器不是一个纯计算（它包含副作用），因此它不能在渲染过程中发生。然而，并没有一个特定的事件（比如点击）导致 `ChatRoom` 被显示。
+有时这还不够。考虑一个 `ChatRoom` 组件，它在页面上显示时必须连接到聊天服务器。连接到服务器并不是纯粹的计算（它是一个副作用），因此它不能在渲染期间发生。然而，并没有一个特定的事件（比如点击）能让 `ChatRoom` 被显示。
 
-**Effect 允许你指定由渲染本身，而不是特定事件引起的副作用**。在聊天中发送消息是一个“事件”，因为它直接由用户点击特定按钮引起。然而，建立服务器连接是 Effect，因为无论哪种交互致使组件出现，它都会发生。Effect 在屏幕更新后的 [提交阶段](/learn/render-and-commit) 运行。这是一个很好的时机，可以将 React 组件与某个外部系统（如网络或第三方库）同步。
+**Effect 允许你指定由渲染自身，而不是特定事件引起的副作用**。在聊天中发送消息是一个“事件”，因为它直接由用户点击特定按钮引起。然而，建立服务器连接是一个 Effect，因为无论哪种交互致使组件出现，它都应该发生。Effect 在 [提交](/learn/render-and-commit) 结束后、页面更新后运行。此时是将 React 组件与外部系统（如网络或第三方库）同步的最佳时机。
 
 <Note>
 
-在本文和后续文本中，`Effect` 在 React 中是专有定义——由渲染引起的副作用。为了指代更广泛的编程概念，也可以将其称为“副作用（side effect）”。
+在本文此处和后续文本中，大写的 `Effect` 是 React 中的专有定义——由渲染引起的副作用。至于更广泛的编程概念(任何改变程序状态或外部系统的行为)，我们则使用“副作用（side effect）” 来指代。
 
 </Note>
 
 
 ## 你可能不需要 Effect {/*you-might-not-need-an-effect*/}
 
-**不要随意在你的组件中使用 Effect**。记住，Effect 通常用于暂时“跳出” React 代码并与一些 **外部** 系统进行同步。这包括浏览器 API、第三方小部件，以及网络等等。如果你想用 Effect 仅根据其他状态调整某些状态，那么 [你可能不需要 Effect](/learn/you-might-not-need-an-effect)。
+**不要急着在你的组件中使用 Effect**。记住，Effect 通常用于暂时“跳出” React 并与一些 **外部** 系统进行同步。这包括浏览器 API、第三方小部件，以及网络等等。如果你的 Effect 只是根据其他状态来调整某些状态，那么 [你可能并不需要一个 Effect](/learn/you-might-not-need-an-effect)。
 
 ## 如何编写 Effect {/*how-to-write-an-effect*/}
 
-编写 Effect 需要遵循以下三个规则：
+要编写一个 Effect, 请遵循以下三个步骤：
 
-1. **声明 Effect**。默认情况下，Effect 会在每次 [提交](/learn/render-and-commit) 后都会执行。
-2. **指定 Effect 依赖**。大多数 Effect 应该按需执行，而不是在每次渲染后都执行。例如，淡入动画应该只在组件出现时触发。连接和断开服务器的操作只应在组件出现和消失时，或者切换聊天室时执行。文章将介绍如何通过指定依赖来控制如何按需执行。
-3. **必要时添加清理（cleanup）函数**。有时 Effect 需要指定如何停止、撤销，或者清除它的效果。例如，“连接”操作需要“断连”，“订阅”需要“退订”，“获取”既需要“取消”也需要“忽略”。你将学习如何使用 **清理函数** 来做到这一切。
+1. **声明 Effect**。通常 Effect 会在每次 [提交](/learn/render-and-commit) 后运行。
+2. **指定 Effect 依赖**。大多数 Effect 应该按需运行，而不是在每次渲染后都运行。例如，淡入动画应该只在组件出现时触发。连接和断开服务器的操作只应在组件出现和消失时，或者切换聊天室时执行。你将通过指定 **依赖项** 来学习如何控制这一点。
+3. **必要时添加清理操作**。一些 Effect 需要指定如何停止、撤销，或者清除它们所执行的操作。例如，“连接”需要“断开”，“订阅”需要“退订”，而“获取数据”需要“取消”或者“忽略”。你将学习如何通过返回一个 **清理函数** 来实现这些。
 
-以下是具体步骤。
+让我们详细看看每一步。
 
 ### 第一步：声明 Effect {/*step-1-declare-an-effect*/}
 
-首先在 React 中引入 [`useEffect` Hook](/reference/react/useEffect)：
+先从 React 中导入 [`useEffect` Hook](/reference/react/useEffect)：
 
 ```js
 import { useEffect } from 'react';
 ```
 
-然后，在组件顶部调用它，并传入在每次渲染时都需要执行的代码：
+再在组件顶部调用, 并在其中加入一些代码：
 
 ```js {2-4}
 function MyComponent() {
@@ -70,15 +70,15 @@ function MyComponent() {
 }
 ```
 
-每当你的组件渲染时，React 将更新屏幕，然后运行 `useEffect` 中的代码。换句话说，**`useEffect` 会把这段代码放到屏幕更新渲染之后执行**。
+每当你的组件渲染时，React 会先更新页面，然后再运行 `useEffect` 中的代码。换句话说，**`useEffect` 会“延迟”一段代码的运行，直到渲染结果反映在页面上**。
 
-让我们看看如何使用 Effect 与外部系统同步。考虑一个 `<VideoPlayer>` React 组件。通过传递布尔类型的 `isPlaying` prop 以控制是播放还是暂停：
+接下来，让我们看看如何使用 Effect 来与外部系统同步。考虑一个 `<VideoPlayer>` React 组件。我们想要通过传递一个 `isPlaying` prop 来控制它播放或者暂停：
 
 ```js
 <VideoPlayer isPlaying={isPlaying} />;
 ```
 
-自定义的 `VideoPlayer` 组件渲染了内置的 [`<video>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video) 标签：
+这个 `VideoPlayer` 组件渲染了浏览器内置的 [`<video>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video) 标签：
 
 ```js
 function VideoPlayer({ src, isPlaying }) {
@@ -87,11 +87,11 @@ function VideoPlayer({ src, isPlaying }) {
 }
 ```
 
-但是，浏览器的 `<video>` 标签没有 `isPlaying` 属性。控制它的唯一方式是在 DOM 元素上调用 [`play()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/play) 和 [`pause()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/pause) 方法。因此，**你需要将 `isPlaying` prop 的值与 `play()` 和 `pause()` 等函数的调用进行同步，该属性用于告知当前视频是否应该播放**。
+但是，浏览器的 `<video>` 标签没有 `isPlaying` 属性。控制它的唯一方式是在 DOM 元素上调用 [`play()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/play) 和 [`pause()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/pause) 方法。因此，**你需要将 `isPlaying` prop 的值（表示视频当前是否应该播放）与 `play()` 和 `pause()` 等函数的调用进行同步**。
 
-首先要获取 `<video>`  DOM 节点的 [对象引用](/learn/manipulating-the-dom-with-refs)。
+我们首先需要获取 `<video>` DOM 节点的 [对象引用](/learn/manipulating-the-dom-with-refs)。
 
-你可能会尝试在渲染期间调用 `play()` 或 `pause()`，但这种做法是错的：
+你可能会尝试在渲染期间调用 `play()` 或 `pause()`，但这样做是不对的：
 
 <Sandpack>
 
@@ -133,9 +133,9 @@ video { width: 250px; }
 
 </Sandpack>
 
-这段代码之所以不正确，是因为它试图在渲染期间对 DOM 节点进行操作。在 React 中，[JSX 的渲染必须是纯粹操作](/learn/keeping-components-pure)，不应该包含任何像修改 DOM 的副作用。
+这段代码之所以不对，是因为它试图在渲染期间对 DOM 节点进行操作。在 React 中，[渲染应该是纯粹的计算](/learn/keeping-components-pure) JSX，不应该包含任何像修改 DOM 这样的副作用。
 
-而且，当第一次调用 `VideoPlayer` 时，对应的 DOM 节点甚至还不存在！如果连 DOM 节点都没有，那么如何调用 `play()` 或 `pause()` 方法呢！在返回 JSX 之前，React 不知道要创建什么 DOM。
+而且，当第一次调用 `VideoPlayer` 时，对应的 DOM 节点还不存在！因为 React 在你返回 JSX 之前不知道要创建什么样的 DOM，所以没有 DOM 节点可以调用 `play()` 或 `pause()` 方法。
 
 解决办法是 **使用 `useEffect` 包裹副作用，把它分离到渲染逻辑的计算过程之外**：
 
@@ -157,11 +157,11 @@ function VideoPlayer({ src, isPlaying }) {
 }
 ```
 
-把调用 DOM 方法的操作封装在 Effect 中，你可以让 React 先更新屏幕，确定相关 DOM 创建好了以后然后再运行 Effect。
+通过将 DOM 更新封装在 Effect 中，你可以让 React 先更新页面，然后再运行 Effect。
 
-当 `VideoPlayer` 组件渲染时（无论是否为首次渲染），都会发生以下事情。首先，React 会刷新屏幕，确保 `<video>` 元素已经正确地出现在 DOM 中；然后，React 将运行 Effect；最后，Effect 将根据 `isPlaying` 的值调用 `play()` 或 `pause()`。
+当 `VideoPlayer` 组件渲染时（无论是否为首次渲染），会发生以下几件事：首先 React 会更新页面，确保 `<video>` 标签带着正确的 props 出现在 DOM 中；接着 React 将运行 Effect；最后 Effect 将根据 `isPlaying` 的值调用 `play()` 或 `pause()`。
 
-试试按下几次播放和暂停操作，观察视频播放器的播放、暂停行为是如何与 `isPlaying` prop 同步的：
+试试点击几次播放和暂停按钮，观察视频播放器的行为是如何与 `isPlaying` 的值相同步的：
 
 <Sandpack>
 
@@ -205,13 +205,13 @@ video { width: 250px; }
 
 </Sandpack>
 
-在这个示例中，你同步到 React state 的“外部系统”是浏览器媒体 API；也可以使用类似的方法将旧的非 React 代码（如 jQuery 插件）封装成声明性的 React 组件。
+在这个示例中，你同步到 React state 的“外部系统”是浏览器媒体 API。你也可以使用类似的方法将传统的非 React 代码（如 jQuery 插件）封装成声明式的 React 组件。
 
-请注意，控制视频播放器在实际应用中复杂得多：比如调用 `play()` 可能会失败，用户可能会使用内置浏览器控件播放或暂停等等。这只是一个简化了很多具体细节的例子。
+需要注意的是，控制视频播放器在实际应用中要复杂得多：比如调用 `play()` 可能会失败、用户可能会使用内置的浏览器控件来进行播放或暂停等操作。本例子是一个非常简化且不完整的示例。
 
 <Pitfall>
 
-一般来说，Effect 会在  **每次** 渲染后执行，**而以下代码会陷入死循环中**：
+默认情况下，Effect 会在 **每次** 渲染后运行。**正因如此，以下代码会陷入死循环**：
 
 ```js
 const [count, setCount] = useState(0);
@@ -220,20 +220,20 @@ useEffect(() => {
 });
 ```
 
-每次渲染结束都会执行 Effect；而更新 state 会触发重新渲染。但是新一轮渲染时又会再次执行 Effect，然后 Effect 再次更新 state……如此周而复始，从而陷入死循环。
+Effect 在渲染结束后运行。更新 state 会触发重新渲染。在 Effect 中直接更新 state 就像是把电源插座的插头插回自身：Effect 运行、更新 state、触发重新渲染、于是又触发 Effect 运行、再次更新 state，继而再次触发重新渲染。如此反复，从而陷入死循环。
 
-Effect 通常应该使组件与 **外部** 系统保持同步。如果没有外部系统，你只想根据其他状态调整一些状态，那么 [你也许不需要 Effect](/learn/you-might-not-need-an-effect)。
+Effect 应该用于将你的组件与一个 **外部** 的系统保持同步。如果没有外部系统，你只是想根据其他状态调整一些状态，那么 [你也许不需要 Effect](/learn/you-might-not-need-an-effect)。
 
 </Pitfall>
 
-### 第二步：指定 Effect 依赖 {/*step-2-specify-the-effect-dependencies*/}
+### 第二步：指定 Effect 的依赖项 {/*step-2-specify-the-effect-dependencies*/}
 
-一般来说，Effect 会在 **每次** 渲染时执行。**但更多时候，并不需要每次渲染的时候都执行 Effect**。
+默认情况下，Effect 会在 **每次** 渲染后运行。但往往 **这并不是你想要的**：
 
-- 有时这会拖慢运行速度。因为与外部系统的同步操作总是有一定时耗，在非必要时可能希望跳过它。例如，没有人会希望每次用键盘打字时都重新连接聊天服务器。
-- 有时这会导致程序逻辑错误。例如，组件的淡入动画只需要在第一轮渲染出现时播放一次，而不是每次触发新一轮渲染后都播放。
+- 有时，它可能会很慢。与外部系统的同步并不总是即时的，所以你可能希望在不必要时跳过它。例如，你不会想在每次打字时都得重新连接聊天服务器。
+- 有时，它可能会出错。例如，你不会想在每次按键时都触发组件的淡入动画。动画应该只在组件首次出现时播放。
 
-为了演示这个问题，我们在前面的示例中加入一些 `console.log` 语句和更新父组件 state 的文本输入。请注意键入是如何导致 Effect 重新运行的：
+为了演示这个问题，以下是在之前的示例中加入了一些 `console.log` 调用和一个更新父组件 state 的文本输入框。注意在输入时是如何触发 Effect 重新运行的：
 
 <Sandpack>
 
@@ -281,7 +281,7 @@ video { width: 250px; }
 
 </Sandpack>
 
-将 **依赖数组** 传入 `useEffect` 的第二个参数，以告诉 React **跳过不必要地重新运行 Effect**。在上面示例的第 14 行中传入一个空数组 `[]`：
+通过在调用 `useEffect` 时指定一个 **依赖数组** 作为第二个参数，你可以让 React **跳过不必要地重新运行 Effect**。首先，在上面示例的第 14 行中传入一个空数组 `[]`：
 
 ```js {3}
   useEffect(() => {
@@ -289,7 +289,7 @@ video { width: 250px; }
   }, []);
 ```
 
-你会发现 React 报错：`React Hook useEffect has a missing dependency: 'isPlaying'`：
+你会看到一个错误提示：`React Hook useEffect has a missing dependency: 'isPlaying'`：
 
 <Sandpack>
 
@@ -337,7 +337,7 @@ video { width: 250px; }
 
 </Sandpack>
 
-问题出现在 Effect 中使用了 `isPlaying` prop 以控制逻辑，但又没有直接告诉 Effect 需要依赖这个属性。为了解决这个问题，将 `isPlaying` 添加至依赖数组中：
+原因在于，你的 Effect 内部代码依赖于 `isPlaying` prop 来决定该做什么，但你并没有显式声明这个依赖关系。为了解决这个问题，将 `isPlaying` 添加至依赖数组中：
 
 ```js {2,7}
   useEffect(() => {
@@ -349,7 +349,7 @@ video { width: 250px; }
   }, [isPlaying]); // ……所以它必须在此处声明！
 ```
 
-现在所有的依赖都已经声明，所以没有错误了。指定 `[isPlaying]` 会告诉 React，如果 `isPlaying` 在上一次渲染时与当前相同，它应该跳过重新运行 Effect。通过这个改变，输入框的输入不会导致 Effect 重新运行，但是按下播放/暂停按钮会重新运行 Effect。
+现在所有的依赖都已经声明，所以没有错误了。指定 `[isPlaying]` 作为依赖数组会告诉 React：如果 `isPlaying` 与上次渲染时相同，就跳过重新运行 Effect。这样一来，输入框的输入不会触发 Effect 重新运行，只有按下播放/暂停按钮会触发。
 
 <Sandpack>
 
@@ -397,29 +397,29 @@ video { width: 250px; }
 
 </Sandpack>
 
-依赖数组可以包含多个依赖项。当指定的所有依赖项在上一次渲染期间的值与当前值完全相同时，React 会跳过重新运行该 Effect。React 使用 [`Object.is`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 比较依赖项的值。有关详细信息，请参阅 [`useEffect` 参考文档](/reference/react/useEffect#reference)。
+依赖数组可以包含多个依赖项。只有当你指定的 **所有** 依赖项的值都与上一次渲染时完全相同，React 才会跳过重新运行该 Effect。React 使用 [`Object.is`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 来比较依赖项的值。有关详细信息，请参阅 [`useEffect` 参考文档](/reference/react/useEffect#reference)。
 
-**请注意，不能随意选择依赖项**。如果你指定的依赖项不能与 Effect 代码所期望的相匹配时，lint 将会报错，这将帮助你找到代码中的问题。如果你不希望某些代码重新运行，[那么你应当 **重新编辑 Effect 代码本身**，使其不需要该依赖项](/learn/lifecycle-of-reactive-effects#what-to-do-when-you-dont-want-to-re-synchronize)。
+**请注意，你不能随意“选择”依赖项**。如果你指定的依赖项与 React 根据 Effect 内部代码所推断出的依赖项不匹配，你将收到来自 lint 的错误提示。这有助于捕捉代码中的许多 bug。如果你不希望某些代码重新运行，[那么你应当 **修改 Effect 代码本身**，使其不再“需要”该依赖项](/learn/lifecycle-of-reactive-effects#what-to-do-when-you-dont-want-to-re-synchronize)。
 
 <Pitfall>
 
-没有依赖数组作为第二个参数，与依赖数组位空数组 `[]` 的行为是不一致的：
+没有依赖数组和使用空数组 `[]` 作为依赖数组，行为是不同的：
 
 ```js {3,7,11}
 useEffect(() => {
-  // 这里的代码会在每次渲染后执行
+  // 这里的代码会在每次渲染后运行
 });
 
 useEffect(() => {
-  // 这里的代码只会在组件挂载后执行
+  // 这里的代码只会在组件挂载（首次出现）时运行
 }, []);
 
 useEffect(() => {
-  //这里的代码只会在每次渲染后，并且 a 或 b 的值与上次渲染不一致时执行
+  // 这里的代码不但会在组件挂载时运行，而且当 a 或 b 的值自上次渲染后发生变化后也会运行
 }, [a, b]);
 ```
 
-接下来，我们将进一步介绍什么是 **挂载（mount）**。
+我们会在下一步详细了解什么是 **挂载（mount）**。
 
 </Pitfall>
 
@@ -427,7 +427,7 @@ useEffect(() => {
 
 #### 为什么依赖数组中可以省略 ref? {/*why-was-the-ref-omitted-from-the-dependency-array*/}
 
-下面的 Effect 同时使用了 `ref` 与 `isPlaying` prop，但是只有 `isPlaying` 被声明为了依赖项：
+下面的 Effect 同时使用了 `ref` 与 `isPlaying` prop，但是只有 `isPlaying` 被声明为依赖项：
 
 ```js {9}
 function VideoPlayer({ src, isPlaying }) {
@@ -441,7 +441,7 @@ function VideoPlayer({ src, isPlaying }) {
   }, [isPlaying]);
 ```
 
-这是因为 `ref` 具有 **稳定** 的标识：React 保证 [每轮渲染中调用 `useRef` 所产生的引用对象时，获取到的对象引用总是相同的](/reference/react/useRef#returns)，即获取到的对象引用永远不会改变，所以它不会导致重新运行 Effect。因此，依赖数组中是否包含它并不重要。当然也可以包括它，这样也可以：
+这是因为 `ref` 具有 **稳定** 的标识：React 确保你在 [每轮渲染中调用同一个 `useRef` 时，总能获得相同的对象](/reference/react/useRef#returns)。ref 不会改变，所以它不会导致重新运行 Effect。因此，在依赖数组中它可有可无。把它加进去也可以：
 
 ```js {9}
 function VideoPlayer({ src, isPlaying }) {
@@ -455,17 +455,17 @@ function VideoPlayer({ src, isPlaying }) {
   }, [isPlaying, ref]);
 ```
 
-`useState` 返回的 [`set` 函数](/reference/react/useState#setstate) 也有稳定的标识符，所以也可以把它从依赖数组中忽略掉。如果在忽略某个依赖项时 linter 不会报错，那么这么做就是安全的。
+`useState` 返回的 [`set` 函数](/reference/react/useState#setstate) 也具有稳定的标识，因此它们通常也会被省略。如果在省略某个依赖项时 linter 不会报错，那么这么做就是安全的。
 
-但是，仅在 linter 可以“看到”对象稳定时，忽略稳定依赖项的规则才会起作用。例如，如果 `ref` 是从父组件传递的，则必须在依赖项数组中指定它。这样做是合适的，因为无法确定父组件是否始终是传递相同的 ref，或者可能是有条件地传递几个 ref 之一。因此，你的 Effect 将取决于传递的是哪个 ref。
+省略始终稳定的依赖项仅在 linter 能“看到”对象是稳定的时候才有效。例如，如果 `ref` 是从父组件传递过来的，则必须在依赖数组中指定它。这很有必要，因为你无法确定父组件是一直传递相同的 ref，还是根据条件传递不同的 ref。所以，你的 Effect 会依赖于被传递的是哪个 ref。
 
 </DeepDive>
 
 ### 第三步：按需添加清理（cleanup）函数 {/*step-3-add-cleanup-if-needed*/}
 
-考虑一个不同的例子。你正在编写一个 `ChatRoom` 组件，该组件出现时需要连接到聊天服务器。现在为你提供了 `createConnection()` API，该 API 返回一个包含 `connect()` 与 `disconnection()` 方法的对象。考虑当组件展示给用户时，应该如何保持连接？
+考虑一个不同的例子。假如你正在编写一个 `ChatRoom` 组件，该组件在显示时需要连接到聊天服务器。现在为你提供了 `createConnection()` API，该 API 返回一个包含 `connect()` 与 `disconnection()` 方法的对象。如何确保组件在显示时始终保持连接？
 
-从编写 Effect 逻辑开始：
+从编写 Effect 的逻辑开始：
 
 ```js
 useEffect(() => {
@@ -474,7 +474,7 @@ useEffect(() => {
 });
 ```
 
-每次重新渲染后连接到聊天室会很慢，因此可以添加依赖数组：
+如果每次重新渲染后都得进行连接，这会很慢，所以你需要添加依赖数组：
 
 ```js {4}
 useEffect(() => {
@@ -483,7 +483,7 @@ useEffect(() => {
 }, []);
 ```
 
-**在这个例子中，Effect 中的代码没有使用任何 props 或 state，此时指定依赖数组为空数组 `[]`。这告诉 React 仅在组件“挂载”时运行此代码，即首次出现在屏幕上这一阶段**。
+**由于 Effect 中的代码没有使用任何 props 或 state，所以依赖数组为空数组 `[]`。这告诉 React 仅在组件“挂载”（即首次显示在页面上）时运行此代码**。
 
 试试运行下面的代码：
 
@@ -504,7 +504,7 @@ export default function ChatRoom() {
 
 ```js src/chat.js
 export function createConnection() {
-  // 真实的实现会将其连接到服务器，此处代码只是示例
+  // 真正的实现实际上会连接到服务器
   return {
     connect() {
       console.log('✅ 连接中……');
@@ -522,15 +522,15 @@ input { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-这里的 Effect 仅在组件挂载时执行，所以 `"✅ 连接中……"` 在控制台中只会打印一次。**然而控制台实际打印 `"✅ 连接中……"` 了两次！为什么会这样**？
+这里的 Effect 仅在组件挂载时运行，所以你可能以为 `"✅ 连接中……"` 只会在控制台中被打印一次。**然而实际情况是 `"✅ 连接中……"` 被打印了两次！为什么会这样**？
 
-想象 `ChatRoom` 组件是一个大规模的 App 中许多界面中的一部分。用户切换到含有 `ChatRoom` 组件的页面上时，该组件被挂载，并调用 `connection.connect()` 方法连接服务器。然后想象用户此时突然导航到另一个页面，比如切换到“设置”页面。这时，`ChatRoom` 组件就被卸载了。接下来，用户在“设置”页面忙完后，单击“返回”，回到上一个页面，并再次挂载 `ChatRoom`。这将建立第二次连接，但是，第一次时创建的连接从未被销毁！当用户在应用程序中不断切换界面再返回时，与服务器的连接会不断堆积。
+假设 `ChatRoom` 组件是一个大型多页面应用中的一部分。用户最初在 `ChatRoom` 页面上。组件挂载并调用 `connection.connect()` 。接着用户可能会导航到另一个页面，比如切换到“设置”页面，于是 `ChatRoom` 组件被卸载。最后，当用户点击“返回”时，`ChatRoom` 组件再次挂载。这将建立第二个连接——但第一个连接从未被销毁！随着用户在应用中来回切换，连接将会不断累积。
 
-如果不进行大量的手动测试，这样的错误很容易被遗漏。为了帮助你快速发现它们，在开发环境中，React 会在初始挂载组件后，立即再挂载一次。
+这类 bug 在没有大量手动测试的情况下很容易被忽略。为了帮助你快速发现它们，在开发环境中，React 会在组件首次挂载后立即重新挂载一次。
 
-观察到 `"✅ 连接中……"` 出现了两次，可以帮助找到问题所在：在代码中，组件被卸载时没有关闭连接。
+两次出现 `"✅ 连接中……"` 能够帮助你注意到真正的问题：在代码中，组件被卸载时没有关闭连接。
 
-为了解决这个问题，可以在 Effect 中返回一个 **清理（cleanup）** 函数。
+为了解决这个问题，可以在 Effect 中返回一个 **清理（cleanup）函数** 。
 
 ```js {4-6}
   useEffect(() => {
@@ -542,7 +542,7 @@ input { display: block; margin-bottom: 20px; }
   }, []);
 ```
 
-每次重新执行 Effect 之前，React 都会调用清理函数；组件被卸载时，也会调用清理函数。让我们看看执行清理函数会做些什么：
+React 会在每次 Effect 重新运行之前调用清理函数，并在组件卸载（被移除）时最后一次调用清理函数。让我们看看实现清理函数后会发生什么：
 
 <Sandpack>
 
@@ -562,7 +562,7 @@ export default function ChatRoom() {
 
 ```js src/chat.js
 export function createConnection() {
-  // 真实的实现会将其连接到服务器，此处代码只是示例
+  // 真正的实现实际上会连接到服务器
   return {
     connect() {
       console.log('✅ 连接中……');
@@ -580,34 +580,34 @@ input { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-现在在开发模式下，控制台会打印三条记录：
+现在在开发环境下，你会看到三条控制台日志：
 
 1. `"✅ 连接中……"`
 2. `"❌ 连接断开。"`
 3. `"✅ 连接中……"`
 
-**在开发环境下，出现这样的结果才是符合预期的**。重复挂载组件，可以确保在 React 中离开和返回页面时不会导致代码运行出现问题。上面的代码中规定了挂载组件时连接服务器、卸载组件时断连服务器。所以断开、连接再重新连接是符合预期的行为。当为 Effect 正确实现清理函数时，无论 Effect 执行一次，还是执行、清理、再执行，用户都不会感受到明显的差异。所以，在开发环境下，出现额外的连接、断连时，这是 React 正在调试你的代码。这是很正常的现象，不要试图消除它！
+**在开发环境下，这是正确的行为**。通过重新挂载你的组件，React 验证了离开页面再返回不会导致代码出错。因为本就应该先断开然后再重新连接！如果你很好地实现了清理函数，那么无论是只执行一次 Effect ，还是执行、清理、再执行，都应该没有用户可见的区别。之所以会有额外的一次 connect/disconnect 调用，是因为在开发环境下 React 在检测你代码中的 bug。因此这是正常现象，不要去试图消除它！
 
-**在生产环境下，`"✅ 连接中……"` 只会被打印一次**。也就是说仅在开发环境下才会重复挂载组件，以帮助你找到需要清理的 Effect。你可以选择关闭 [严格模式](/reference/react/StrictMode) 来关闭开发环境下特有的行为，但我们建议保留它。这可以帮助发现许多上面这样的错误。
+**在生产环境下，你只会看到 `"✅ 连接中……"` 打印一次**。这是因为重新挂载组件只会在开发环境下发生，以此帮助你找到需要清理的 Effect。你可以通过关闭 [严格模式](/reference/react/StrictMode) 来禁用这个行为，但我们建议保留它。它可以帮助你发现许多类似上述的 bug。
 
-## 如何处理在开发环境中 Effect 执行两次？ {/*how-to-handle-the-effect-firing-twice-in-development*/}
+## 如何处理在开发环境下 Effect 运行了两次？ {/*how-to-handle-the-effect-firing-twice-in-development*/}
 
-在开发环境中，React 有意重复挂载你的组件，以查找像上面示例中的错误。**正确的态度是“如何修复 Effect 以便它在重复挂载后能正常工作”，而不是“如何只运行一次 Effect”**。
+React 有意在开发环境下重新挂载你的组件，来找到类似上例中的 bug。**你需要思考的不是“如何只运行一次 Effect”，而是“如何修复我的 Effect 来让它在重新挂载后正常运行”**。
 
-通常的解决办法是实现清理函数。清理函数应该停止或撤销 Effect 正在执行的任何操作。简单来说，用户不应该感受到 Effect 只执行一次（如在生产环境中）和执行“挂载 → 清理 → 挂载”过程（如在开发环境中）之间的差异。
+通常，答案是实现清理函数。清理函数应该停止或撤销 Effect 所做的一切。原则是用户不应该感受到 Effect 只执行一次（在生产环境中）和连续执行“挂载 → 清理 → 挂载”（在开发环境中）之间的区别。
 
-下面提供一些常用的 Effect 应用模式。
+你将编写的大多数 Effect 都会符合下列的常见模式之一。
 
 <Pitfall>
 
-#### 不要使用 refs 来防止触发 Effects {/*dont-use-refs-to-prevent-effects-from-firing*/}
+#### 不要使用 ref 来防止触发 Effect {/*dont-use-refs-to-prevent-effects-from-firing*/}
 
-在开发过程中，防止Effects触发两次的一个常见陷阱是使用 `ref` 来防止Effect运行多次。例如，你使用 `useRef` “修复”上述错误：
+为了防止 Effect 在开发环境中触发两次，一个常见错误是使用 `ref` 来让 Effect 只运行一次。例如，你可能会用 `useRef` “修复”上述的 bug：
 
 ```js {1,3-4}
   const connectionRef = useRef(null);
   useEffect(() => {
-    // 🚩 这并不能修复这个错误！！！
+    // 🚩 这并不能修复这个 bug！！！
     if (!connectionRef.current) {
       connectionRef.current = createConnection();
       connectionRef.current.connect();
@@ -615,19 +615,19 @@ input { display: block; margin-bottom: 20px; }
   }, []);
 ```
 
-这使得你在开发过程中确实只看到了一次 `“✅ 正在连接...”`，但其实并没有修复这个错误。
+它虽然使你在开发环境下只看到一次 `“✅ 正在连接...”`，但并没有修复这个 bug。
 
-当用户导航离开时，连接仍未关闭，当他们导航返回时，又会创建一个新的连接。当用户在应用程序中导航时，连接会不断堆积，就像“修复”之前一样。
+当用户离开时，连接没有被关闭，当用户返回时，又会创建一个新的连接。随着用户浏览应用，连接会不断累积，就像“修复”之前一样。
 
-要修复这个错误，仅仅让Effect只运行一次是不够的。要让副作用在重载后能正确工作，意味着需要像上面的解决方案一样清理连接。
+要修复这个 bug，仅仅让 Effect 只运行一次是不够的。想要 Effect 在重新挂载后正常运行，就得按照之前的方法清除连接。
 
 请看下面的示例，了解如何处理常见模式。
 
 </Pitfall>
 
-### 控制非 React 组件 {/*controlling-non-react-widgets*/}
+### 管理非 React 小部件 {/*controlling-non-react-widgets*/}
 
-有时需要添加不是使用 React 编写的 UI 小部件。例如，假设你要向页面添加地图组件，并且它有一个 `setZoomLevel()` 方法，你希望调整缩放级别（zoom level）并与 React 代码中的 `zoomLevel` state 变量保持同步。Effect 看起来应该与下面类似：
+有时你需要添加不是用 React 实现的 UI 小部件。比如说你想在你的页面添加一个地图组件。它有一个 `setZoomLevel()` 方法，然后你希望地图的缩放比例和代码中的 `zoomLevel` state 保持同步。你的 Effect 应该类似于：
 
 ```js
 useEffect(() => {
@@ -636,9 +636,9 @@ useEffect(() => {
 }, [zoomLevel]);
 ```
 
-请注意，在这种情况下不需要清理。在开发环境中，虽然 React 会调用 Effect 两次，但这两次挂载时依赖项 `zoomLevel` 都是相同的，所以即使执行两次 Effect，也不会造成任何影响。开发环境中它可能会稍微慢一些，但这问题不大，因为它在生产中不会进行不必要的重复挂载。
+请注意，这种情况下不需要清理操作。在开发环境中，虽然 React 会调用 Effect 两次，但这没关系，因为用相同的值调用 `setZoomLevel` 两次不会造成任何影响。虽然在开发环境下它可能会稍微慢一些，但问题不大，因为在生产环境下它不会多余地重新挂载。
 
-某些 API 可能不允许连续调用两次。例如，内置的 [`<dialog>`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLDialogElement) 元素的 [`showModal`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLDialogElement/showModal) 方法在连续调用两次时会抛出异常，此时实现清理函数并使其关闭对话框：
+有些 API 可能不允许你连续调用两次。例如，内置的 [`<dialog>`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLDialogElement) 元素的 [`showModal`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLDialogElement/showModal) 方法在连续被调用两次时会抛出异常。此时可以通过实现清理函数来使其关闭对话框：
 
 ```js {4}
 useEffect(() => {
@@ -648,11 +648,11 @@ useEffect(() => {
 }, []);
 ```
 
-在开发环境中，Effect 将调用 `showModal()`，然后立即调用 `close()`，然后再次调用 `showModal()`。这与调用只一次 `showModal()` 的效果相同。也正如在生产环境中看到的那样。
+在开发环境中，你的 Effect 会先调用 `showModal()`，然后立即调用 `close()`，之后再次调用 `showModal()`。这与在生产环境中只调用一次 `showModal()` 的用户可见行为是相同的。
 
 ### 订阅事件 {/*subscribing-to-events*/}
 
-如果 Effect 订阅了某些事件，清理函数应该退订这些事件：
+如果你的 Effect 订阅了某些事件，清理函数应退订这些事件：
 
 ```js {6}
 useEffect(() => {
@@ -664,11 +664,11 @@ useEffect(() => {
 }, []);
 ```
 
-在开发环境中，Effect 会调用 `addEventListener()`，然后立即调用 `removeEventListener()`，然后再调用相同的 `addEventListener()`，这与只订阅一次事件的 Effect 等效；这也与用户在生产环境中只调用一次 `addEventListener()` 具有相同的感知效果。
+在开发环境中，你的 Effect 会先调用 `addEventListener()`，然后立即调用 `removeEventListener()`，接着再次使用相同的处理函数调用 `addEventListener()`。因此，每次只会有一个有效订阅。这与在生产环境中只调用一次 `addEventListener()` 所产生的用户可见行为是相同的。
 
 ### 触发动画 {/*triggering-animations*/}
 
-如果 Effect 对某些内容加入了动画，清理函数应将动画重置：
+如果你的 Effect 触发了一些动画，清理函数应将动画重置为初始状态：
 
 ```js {4-6}
 useEffect(() => {
@@ -680,11 +680,11 @@ useEffect(() => {
 }, []);
 ```
 
-在开发环境中，透明度由 `1` 变为 `0`，再变为 `1`。这与在生产环境中，直接将其设置为 `1` 具有相同的感知效果，如果你使用支持过渡的第三方动画库，你的清理函数应将时间轴重置为其初始状态。
+在开发环境中，透明度由 `1` 变为 `0`，再变为 `1`。这与在生产环境中，直接将其设置为 `1` 具有相同的用户可见行为。如果你使用了支持补间动画的第三方动画库，你的清理函数应将时间轴重置为初始状态。
 
 ### 获取数据 {/*fetching-data*/}
 
-如果 Effect 将会获取数据，清理函数应该要么 [中止该数据获取操作](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController)，要么忽略其结果：
+如果你的 Effect 需要获取数据，清理函数应 [中止请求](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController) 或忽略其结果：
 
 ```js {2,6,13-15}
 useEffect(() => {
@@ -705,11 +705,11 @@ useEffect(() => {
 }, [userId]);
 ```
 
-我们无法撤消已经发生的网络请求，但是清理函数应当确保获取数据的过程以及获取到的结果不会继续影响程序运行。如果 `userId` 从 `'Alice'` 变为 `'Bob'`，那么请确保 `'Alice'` 响应数据被忽略，即使它在 `'Bob'` 之后到达。
+你无法“撤销”已经发生的网络请求，但是你的清理函数应当确保那些不再相关的请求不会继续影响你的应用。如果 `userId` 从 `'Alice'` 变为 `'Bob'`，那么请确保 `'Alice'` 的响应数据被忽略，即使它在 `'Bob'` 之后到达。
 
-**在开发环境中，浏览器调试工具的“网络”选项卡中会出现两个 fetch 请求**。这是正常的。使用上述方法，第一个 Effect 将立即被清理，而 `ignore` 将被设置为 `true`。因此，即使有额外的请求，由于有 `if (!ignore)` 判断检查，也不会影响程序状态。
+**在开发环境中，你会在浏览器调试工具的“网络”选项卡中看到两条请求**。这是正常的。使用上述方法，第一个 Effect 将立即被清理，所以它的 `ignore` 变量会被设置为 `true`。因此，即使有额外的请求，由于有 `if (!ignore)` 的检查，也不会影响 state。
 
-**在生产环境中，只会显示发送了一条获取请求**。如果开发环境中，第二次请求给你造成了困扰，最好的方法是使用一种可以删除重复请求、并缓存请求响应的解决方案：
+**在生产环境中，只会有一条请求**。如果开发环境中的第二次请求给你造成了困扰，最好的办法是使用一个能够对请求去重并缓存响应的方案：
 
 ```js
 function TodoList() {
@@ -717,23 +717,23 @@ function TodoList() {
   // ...
 ```
 
-这不仅可以提高开发体验，还可以让你的应用程序速度更快。例如，用户按下按钮时，如果数据已经被缓存了，那么就不必再次等待加载。你可以自己构建这样的缓存，也可以使用很多在 Effect 中手动加载数据的替代方法。
+这不仅可以提高开发体验，还可以让你的应用程序响应更快。例如，当用户点击返回按钮时，不用再等待数据重新加载，因为它已经被缓存。你可以自己构建这样的缓存机制，也可以使用很多在 Effect 中手动获取数据的替代方法。
 
 <DeepDive>
 
-#### Effect 中有哪些好的数据获取替代方案？ {/*what-are-good-alternatives-to-data-fetching-in-effects*/}
+#### 在 Effect 中进行数据请求的替代方案 {/*what-are-good-alternatives-to-data-fetching-in-effects*/}
 
-在 Effect 中调用 `fetch` 请求数据 [是一种非常受欢迎的方式](https://www.robinwieruch.de/react-hooks-fetch-data/)，特别是在客户端应用中。然而，它非常依赖手动操作，有很多的缺点：
+在 Effect 中直接编写 `fetch` 请求 [是一种常见的数据获取方式](https://www.robinwieruch.de/react-hooks-fetch-data/)，特别是在完全客户端渲染的应用中。然而，这种方法非常手动化，并且有明显的弊端：
 
-- **Effect 不能在服务端执行**。这意味着服务器最初传递的 HTML 不会包含任何数据。客户端的浏览器必须下载所有 JavaScript 脚本来渲染应用程序，然后才能加载数据——这并不高效。
-- **直接在 Effect 中获取数据容易产生网络瀑布（network waterfall）**。首先渲染了父组件，它会获取一些数据并进行渲染；然后渲染子组件，接着子组件开始获取它们的数据。如果网络速度不够快，这种方式比同时获取所有数据要慢得多。
-- **直接在 Effect 中获取数据通常意味着无法预加载或缓存数据**。例如，在组件卸载后然后再次挂载，那么它必须再次获取数据。
-- **这不是很符合人机交互原则**。如果你不想出现像 [条件竞争（race condition）](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect) 之类的问题，那么你需要编写更多的样板代码。
+- **Effect 不会在服务端运行**。这意味着最初由服务器渲染的 HTML 只会包含加载状态，而没有实际数据。客户端必须先下载所有的 JavaScript 并渲染应用，才会发现它需要加载数据——这并不高效。
+- **直接在 Effect 中进行数据请求，容易产生“网络瀑布（network waterfall）”**。首先父组件渲染时请求一些数据，随后渲染子组件，接着子组件开始请求它们的数据。如果网络速度不快，这种方式会比并行获取所有数据慢得多。
+- **直接在 Effect 中进行数据请求往往无法预加载或缓存数据**。例如，如果组件卸载后重新挂载，它必须重新获取数据。
+- **不够简洁**。编写 fecth 请求时为了避免 [竞态条件（race condition）](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect) 等问题，会需要很多样板代码。
 
-以上所列出来的缺点并不是 React 特有的。在任何框架或者库上的组件挂载过程中获取数据，都会遇到这些问题。与路由一样，要做好数据获取并非易事，因此我们推荐以下方法：
+这些弊端并不仅限于 React。任何库在组件挂载时进行数据获取都会遇到这些问题。与路由处理一样，要做好数据获取并非易事，因此我们推荐以下方法：
 
-- **如果你正在使用 [框架](/learn/start-a-new-react-project#production-grade-react-frameworks) ，使用其内置的数据获取机制**。现代 React 框架集成了高效的数据获取机制，不会出现上述问题。
-- **否则，请考虑使用或构建客户端缓存**。目前受欢迎的开源解决方案是 [React Query](https://tanstack.com/query/latest)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以构建自己的解决方案，在这种情况下，你可以在幕后使用 Effect，但是请注意添加用于删除重复请求、缓存响应和避免网络瀑布（通过预加载数据或将数据需求提升到路由）的逻辑。
+- **如果你正在使用 [框架](/learn/start-a-new-react-project#production-grade-react-frameworks) ，请使用其内置的数据获取机制**。现代 React 框架集成了高效的数据获取机制，不会出现上述问题。
+- **否则，请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [React Query](https://tanstack.com/query/latest)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以自己构建解决方案：在底层使用 Effect，但添加对请求的去重、缓存响应以及避免网络瀑布（通过预加载数据或将数据请求提升到路由层次）的逻辑。
 
 如果这些方法都不适合你，你可以继续直接在 Effect 中获取数据。
 
@@ -741,7 +741,7 @@ function TodoList() {
 
 ### 发送分析报告 {/*sending-analytics*/}
 
-考虑在访问页面时发送日志分析：
+考虑以下代码，它在页面访问时发送一个分析事件：
 
 ```js
 useEffect(() => {
@@ -749,15 +749,15 @@ useEffect(() => {
 }, [url]);
 ```
 
-在开发环境中，`logVisit` 会为每个 URL 发送两次请求，所以你可能会想尝试解决这个问题。**不过我们建议不必修改此处代码**，与前面的示例一样，从用户的角度来看，运行一次和运行两次之间不会 **感知** 到行为差异。从实际的角度来看，`logVisit` 不应该在开发环境中做任何影响生产事情。由于每次保存代码文件时都会重新挂载组件，因此在开发环境中会额外记录访问次数。
+在开发环境中，对于每个 URL，`logVisit` 都会被调用两次，因此你可能会尝试修复这个问题。**我们建议保持不动**。与之前示例类似，运行一次还是运行两次，在用户可见的行为上没有区别。从实际角度来看，`logVisit` 不应该在开发环境中执行任何操作，因为你不会想让开发设备的日志影响生产环境的统计数据。每次保存文件时组件都会重新挂载，因此在开发环境中会记录额外的访问日志。
 
-**在生产环境中，不会产生有重复的访问日志**。
+**在生产环境中，不会有重复的访问日志**。
 
-为了调试发送的分析事件，可以将应用部署到一个运行在生产模式下的暂存环境，或者暂时取消 [严格模式](/reference/react/StrictMode) 及其仅在开发环境中重新加载检查；还可以从路由变更事件处理程序中发送分析数据，而不是从 Effect 中发送。为了更精确的分析，可以使用 [Intersection Observer](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API) 来跟踪哪些组件位于视口中以及它们保持可见的时间。
+为了调试发送的分析事件，你可以将应用部署到一个运行在生产模式下的暂存环境，或者暂时禁用 [严格模式](/reference/react/StrictMode) 及其仅在开发环境中的重新挂载检查。你还可以在路由更改的事件处理程序中发送分析数据，而不是在 Effect 中发送。对于更精确的分析，可以使用[交叉观察器](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API) 来跟踪哪些组件位于视口中以及它们保持可见的时间。
 
-### 初始化应用时不需要使用 Effect 的情形 {/*not-an-effect-initializing-the-application*/}
+### 不适用于 Effect：初始化应用 {/*not-an-effect-initializing-the-application*/}
 
-某些逻辑应该只在应用程序启动时运行一次。比如，验证登陆状态和加载本地程序数据。你可以将其放在组件之外：
+某些逻辑应该只在应用启动时运行一次。你可以将它放在组件外部：
 
 ```js {2-3}
 if (typeof window !== 'undefined') { // 检查是否在浏览器中运行
@@ -770,37 +770,37 @@ function App() {
 }
 ```
 
-这保证了这种逻辑在浏览器加载页面后只运行一次。
+这可以确保此类逻辑只在浏览器加载页面后运行一次。
 
-### 不要在 Effect 中执行购买商品一类的操作 {/*not-an-effect-buying-a-product*/}
+### 不适用于 Effect：购买商品 {/*not-an-effect-buying-a-product*/}
 
-有时，即使编写了一个清理函数，也不能避免执行两次 Effect。例如，Effect 包含会发送 POST 请求以执行购买操作：
+有时，即使你编写了清理函数，也无法避免用户观察到 Effect 运行了两次。比如你的 Effect 发送了一个像购买商品这样的 POST 请求：
 
 ```js {2-3}
 useEffect(() => {
-  // 🔴 错误：此处的 Effect 会在开发环境中执行两次，这在代码中是有问题的。
+  // 🔴 错误：此处的 Effect 在开发环境中会触发两次，暴露出代码中的问题。
   fetch('/api/buy', { method: 'POST' });
 }, []);
 ```
 
-一方面，开发环境下，Effect 会执行两次，这意味着购买操作执行了两次，但是这并非是预期的结果，所以不应该把这个业务逻辑放在 Effect 中。另一方面，如果用户转到另一个页面，然后按“后退”按钮回到了这个界面，该怎么办？Effect 会随着组件再次挂载而再次执行。所以，当用户重新访问某个页面时，不应当执行购买操作；当只有用户点击“购买”按钮时，才执行购买操作。
+你肯定不希望购买两次商品。这也是为什么你不应该把这种逻辑放在 Effect 中。如果用户跳转到另一个页面，然后按下“返回”按钮，你的 Effect 就会再次运行。你不希望用户在访问页面时就购买产品，而是在他们点击“购买”按钮时才购买。
 
-因此，“购买”的操作不应由组件的挂载、渲染引起的；它是由特定的交互作用引起的，它应该只在用户按下按钮时运行。因此，**它不应该写在 Effect 中，应当把 `/api/buy` 请求操作移动到购买按钮事件处理程序中**：
+购买操作并不是由渲染引起的，而是由特定的交互引起的。它应该只在用户按下按钮时执行。因此，**它不应该写在 Effect 中，应当把 `/api/buy` 请求移动到“购买”按钮的事件处理程序中**：
 
 ```js {2-3}
   function handleClick() {
-    // ✅ 购买商品应当在事件中执行，因为这是由特定的操作引起的。
+    // ✅ 购买行为是一个事件，因为它是由特定的交互引起的。
     fetch('/api/buy', { method: 'POST' });
   }
 ```
 
-**这个例子说明如果重新挂载破坏了应用程序的逻辑，则通常含有未被发现的错误**。从用户的角度来看，访问一个页面不应该与访问它、点击链接然后按下返回键再次查看页面有什么不同。React 通过在开发环境中重复挂载组件以验证组件是否遵守此原则。
+**这说明了如果重新挂载破坏了应用的逻辑，通常便暴露了存在的 bug**。对用户而言，访问一个页面不应该与访问页面后点击链接、再按下“返回”按钮查看页面有区别。React 通过在开发环境中重新挂载组件来验证你的组件是否遵守这一原则。
 
-## 总结 {/*putting-it-all-together*/}
+## 综合以上内容 {/*putting-it-all-together*/}
 
-下面的 playground 可以帮助你在实践中找到对 Effect 的感觉。
+这个演练场可以帮助你“感受” Effect 在实际中的工作方式。
 
-这个例子使用 [`setTimeout`](https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout) 来安排控制台日志，在 Effect 运行后三秒钟显示输入文本。清理函数会取消挂起的超时。从按下“挂载组件”开始：
+这个例子使用 [`setTimeout`](https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout) 调度一个日志记录，日志会在 Effect 运行三秒后显示输入的文本。清理函数会取消挂起的延时器。从按下“挂载组件”开始：
 
 <Sandpack>
 
@@ -815,7 +815,7 @@ function Playground() {
       console.log('⏰ ' + text);
     }
 
-    console.log('🔵 安排 "' + text + '" 日志');
+    console.log('🔵 调度 "' + text + '" 日志');
     const timeoutId = setTimeout(onTimeout, 3000);
 
     return () => {
@@ -843,7 +843,7 @@ export default function App() {
   return (
     <>
       <button onClick={() => setShow(!show)}>
-        {show ? '卸载' : '挂载'} 组件
+        {show ? '卸载' : '挂载'}组件
       </button>
       {show && <hr />}
       {show && <Playground />}
@@ -854,21 +854,21 @@ export default function App() {
 
 </Sandpack>
 
-在最开始时可以看到三个日志输出：`安排 "a" 日志`，`取消 "a" 日志`，还有一个 `安排 "a" 日志`。三秒后，还会有一条日志显示：`a`。正如之前所说，额外的安排/取消动作产生的原因是：React 在开发环境中，会重新挂载组件一次，以验证你是否正确地实现了清理函数。
+你首先会看到三条日志：`调度 "a" 日志`，`取消 "a" 日志`，再一条 `调度 "a" 日志`。三秒后，你还会看到一条日志：`a`。正如你先前所学，额外的调度/取消日志是因为 React 在开发环境中会重新挂载组件一次，以验证你是否正确实现了清理操作。
 
-现在编辑输入框，输入 `abc`。如果输入速度足够快，你会看到 `安排 "ab" 日志`，紧接着的是 `取消 "ab" 日志` 和 `安排 "abc" 日志`。**React 总是在执行下一轮渲染的 Effect 之前清理上一轮渲染的 Effect**。这就是为什么即使你快速输入，最多也只有一个安排操作。试试多次编辑输入框，并观察控制台以了解 Effect 是如何被清理的。
+现在编辑输入框，输入 `abc`。如果输入速度足够快，你会看到 `调度 "ab" 日志`，紧接着 `取消 "ab" 日志` 和 `调度 "abc" 日志`。**React 总是在执行下一轮渲染的 Effect 之前清理上一轮渲染的 Effect**。这就是为什么即使你快速输入，最多也只有一个延时器被调度。试试多次编辑输入框，并观察控制台以了解 Effect 是如何被清理的。
 
-在输入框中输入一些内容，然后立即按下“卸载组件”按钮。注意卸载时如何清理最后一轮渲染的 Effect。在这里，它在触发卸载之前，清除了最后一次安排操作。
+在输入框中输入一些内容，然后立即按下“卸载组件”。注意卸载组件时是如何清理最后一轮渲染的 Effect 的。在这里，它会在最后一个延迟器要触发之前取消它。
 
-最后，在上面的代码中注释掉清理函数，这样安排操作就不会被取消。尝试快速输入 `abcde`。你预期三秒钟内会发生什么？计时器安排内的 `console.log(text)` 会打印 **最新** 的 `text` 并产生五个 `abcde` 日志吗？验证你的直觉吧！
+最后，在上面的代码中注释掉清理函数，这样延时器就不会被取消。尝试快速输入 `abcde`。你觉得三秒后会发生什么？延时器中的 `console.log(text)` 会打印 **最新** 的 `text` 值并生成五条 `abcde` 日志吗？试试看吧，验证一下你的直觉！
 
-三秒后，你应该看到一系列日志：`a`、`ab`、`abc`、`abcd` 与 `abcde`，而不是五个 `abcde`。**每个 Effect 都会“捕获”其对应渲染的 `text` 值**。`text` state 发生变化并不重要：来自 `text = 'ab'` 的渲染的 Effect 始终会得到 `'ab'`。换句话说，每个渲染的 Effect 都是相互隔离的。如果你对这是如何工作的感到好奇，你可以阅读有关 [闭包](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures) 的内容。
+三秒后，你应该会看到一系列的日志：`a`、`ab`、`abc`、`abcd` 与 `abcde`，而不是五条 `abcde` 日志。这是因为 **每个 Effect 都会“捕获”它对应渲染时的 `text` 值**。即使 `text` 的值发生了变化，渲染时 `text = 'ab'` 的 Effect 总是会得到 `'ab'`。换句话说，每个渲染的 Effect 都是相互独立的。如果你对这种机制感兴趣，可以阅读有关 [闭包](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures) 的内容。
 
 <DeepDive>
 
-#### 每一轮渲染都有自己的 Effect {/*each-render-has-its-own-effects*/}
+#### 每一轮渲染都有其自己的 Effect {/*each-render-has-its-own-effects*/}
 
-你可以将 `useEffect` 认为其将一段行为“附加”到渲染输出。考虑这种情况：
+你可以将 `useEffect` 理解为“附加”一段行为到渲染输出中。考虑下面这个 Effect：
 
 ```js
 export default function ChatRoom({ roomId }) {
@@ -884,9 +884,9 @@ export default function ChatRoom({ roomId }) {
 
 让我们看看当用户在应用程序中切换页面时到底发生了什么。
 
-#### 初始渲染 {/*initial-render*/}
+#### 初次渲染 {/*initial-render*/}
 
-用户访问 `<ChatRoom roomId="general" />`，在这里让我们 [假设](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `roomId` 的值为 `'general'` ：
+用户访问 `<ChatRoom roomId="general" />`。我们 [假设](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `roomId` 的值为 `'general'` ：
 
 ```js
   // 首次渲染时的 JSX（roomId 为 "general"）
@@ -906,18 +906,18 @@ export default function ChatRoom({ roomId }) {
   ['general']
 ```
 
-React 将会执行用于连接到 `'general'` 聊天室的 Effect。
+React 运行这个 Effect 来连接到 `'general'` 聊天室。
 
 #### 依赖项相同时的重新渲染 {/*re-render-with-same-dependencies*/}
 
-让我们探讨下 `<ChatRoom roomId="general" />` 的重复渲染。JSX 的输出结果仍然相同：
+假设 `<ChatRoom roomId="general" />` 重新渲染。输出的 JSX 不变：
 
 ```js
   // 第二次渲染时的 JSX（roomId 为 "general"）
   return <h1>Welcome to general!</h1>;
 ```
 
-React 看到渲染输出没有改变，所以它不会更新 DOM 。
+React 看到渲染输出没有改变，所以不更新 DOM 。
 
 第二次渲染的 Effect 如下所示：
 
@@ -932,18 +932,18 @@ React 看到渲染输出没有改变，所以它不会更新 DOM 。
   ['general']
 ```
 
-React 将第二次渲染时的 `['general']` 与第一次渲染时的 `['general']` 进行比较。**因为所有的依赖项都是相同的，React 会忽略第二次渲染时的 Effect**。所以此时 Effect 不会被调用。
+React 将第二次渲染时的 `['general']` 与第一次渲染时的 `['general']` 进行比较。**因为所有的依赖项都相同，React 忽略第二次渲染时的 Effect**。Effect 不会被调用。
 
 #### 依赖项不同时的重新渲染 {/*re-render-with-different-dependencies*/}
 
-接下来，用户开始访问 `<ChatRoom roomId="travel" />`。注意这里 `roomId` 的属性值改为了 `'travel'`，返回的是不同的 JSX 输出结果：
+接着，用户访问了 `<ChatRoom roomId="travel" />`。这一次，组件返回了不同的 JSX：
 
 ```js
   // 第三次渲染时的 JSX（roomId 为 "travel"）
   return <h1>欢迎来到 travel！</h1>;
 ```
 
-这时的 React 会更新 DOM ，将 `"欢迎来到 general"` 更新为 `"欢迎来到 travel"`。
+React 更新 DOM ，将 `"欢迎来到 general"` 改为 `"欢迎来到 travel"`。
 
 第三次渲染的 Effect 如下所示：
 
@@ -958,33 +958,33 @@ React 将第二次渲染时的 `['general']` 与第一次渲染时的 `['general
   ['travel']
 ```
 
-React 将第三次渲染时的 `['travel']` 与第二次渲染时的 `['general']` 相互比较。会发现依赖项不同：`Object.is('travel', 'general')` 为 `false`：所以这次的 Effect 不能跳过。
+React 将第三次渲染时的 `['travel']` 与第二次渲染时的 `['general']` 相比较。发现依赖项不同：`Object.is('travel', 'general')` 为 `false`。因此 Effect 不能被跳过。
 
-**在 React 执行第三次渲染的 Effect 之前，它需要清理最近渲染的 Effect**。第二次渲染的 Effect 被跳过了。所以 React 需要清理第一次渲染时的 Effect。如果你回看第一次渲染的 Effect，你可以看到第一次渲染时的清理函数需要执行的内容，是在 `createConnection('general')` 所创建的连接上调用 `disconnect()`。也就是从 `'general'` 聊天室断开连接。
+**在 React 执行第三次渲染的 Effect 之前，它需要清理上一个运行的 Effect**。第二次渲染的 Effect 被跳过了。所以 React 需要清理第一次渲染时的 Effect。如果你回看第一次渲染，你会发现第一次渲染时的清理函数所做的事，是在 `createConnection('general')` 所创建的连接上调用 `disconnect()`。也就是从 `'general'` 聊天室断开连接。
 
 之后，React 执行第三次渲染的 Effect。它连接到 `'travel'` 聊天室。
 
 #### 组件卸载 {/*unmount*/}
 
-最后，假设用户离开了当前页面，`ChatRoom` 组件将被卸载时，React 会执行最近的 Effect 的清理函数，也就是第三次渲染时 Effect 的清理函数。第三次渲染后再清理时，清理函数破坏了 `createConnection('travel')` 方法创建的连接。因此，该应用程序与 `travel` 房间断开了连接。
+最后，假设用户离开了当前页面，`ChatRoom` 组件被卸载。React 执行上一个运行的 Effect 的清理函数，也就是第三次渲染时的 Effect。这个清理函数会销毁 `createConnection('travel')` 所创建的连接。这样，应用与 `travel` 房间断开了连接。
 
 #### 仅开发环境下的行为 {/*development-only-behaviors*/}
 
-在 [严格模式](/reference/react/StrictMode) 下，React 在每次挂载组件后都会重新挂载组件（但是组件的 state 与 创建的 DOM 都会被保留）。[它可以帮助你找出需要添加清理函数的 Effect](#step-3-add-cleanup-if-needed)，以及早暴露出像条件竞争那样的问题。此外，每当你在开发环境中保存更新代码文件时，React 也会重新挂载 Effect，不过这两种行为都仅限于开发环境。
+开启 [严格模式](/reference/react/StrictMode) 时，React 在每次挂载组件后都会重新挂载组件（组件的 state 与 创建的 DOM 都会被保留）。[它可以帮助你找出需要添加清理函数的 Effect](#step-3-add-cleanup-if-needed)，并在早期暴露类似竞态条件这样的 bug。此外，每当你在开发环境中保存文件时，React 也会重新挂载 Effect。这些行为都仅限于开发环境。
 
 </DeepDive>
 
 <Recap>
 
-- 与事件不同，Effect 是由渲染本身，而非特定交互引起的。
+- 与事件不同，Effect 由渲染本身引起，而非特定的交互。
 - Effect 允许你将组件与某些外部系统（第三方 API、网络等）同步。
 - 默认情况下，Effect 在每次渲染（包括初始渲染）后运行。
-- 如果 React 的所有依赖项都与上次渲染时的值相同，则将跳过本次 Effect。
-- 不能随意选择依赖项，它们是由 Effect 内部的代码决定的。
-- 空的依赖数组（`[]`）对应于组件“挂载”，即添加到屏幕上。
+- 如果所有依赖项都与上一次渲染时相同，React 会跳过本次 Effect。
+- 你不能“选择”依赖项，它们是由 Effect 内部的代码所决定的。
+- 空的依赖数组（`[]`）对应于组件的“挂载”，即组件被添加到页面上时。
 - 仅在严格模式下的开发环境中，React 会挂载两次组件，以对 Effect 进行压力测试。
-- 如果 Effect 因为重新挂载而中断，那么需要实现一个清理函数。
-- React 将在下次 Effect 运行之前以及卸载期间这两个时候调用清理函数。
+- 如果你的 Effect 因为重新挂载而出现问题，那么你需要实现一个清理函数。
+- React 会在 Effect 再次运行之前和在组件卸载时调用你的清理函数。
 
 </Recap>
 
@@ -994,7 +994,7 @@ React 将第三次渲染时的 `['travel']` 与第二次渲染时的 `['general'
 
 在下面的例子中，表单中渲染了一个 `<MyInput />` 组件。
 
-使用输入框的 [`focus()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/focus) 方法，以在 `MyInput` 出现在屏幕上时自动聚焦。下面有一种实现方式，但是被注释掉了，因为它并没有很好地工作。找出它为什么不起作用，并修复它。如果你熟悉 `autoFocus` 属性，请假装它不存在：我们正在从头开始重新实现相同的功能。
+使用输入框的 [`focus()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/focus) 方法，让 `MyInput` 在页面上出现时自动聚焦。已经有一个被注释掉的实现，但它并不能正常工作。找出它为什么不起作用，并修复它。如果你熟悉 `autoFocus` 属性，请假装它不存在：我们正在从头开始实现相同的功能。
 
 <Sandpack>
 
@@ -1070,15 +1070,15 @@ body {
 </Sandpack>
 
 
-按下“展示表单”按钮并验证是否聚焦于 `<input />`（高亮显示，光标位于内部）；再次按下“隐藏表单”和“展示表单”，以验证是否再次聚焦于输入框。
+要验证你的方法是否奏效，请点击“展示表单”，并确认输入框获得焦点（高亮显示并且光标位于内部）；再次点击“隐藏表单”和“展示表单”，确认输入框是否再次被高亮显示。
 
-仅在 **挂载** 时聚焦于 `MyInput`，而非每次渲染后。为了验证这一行为，按下“展示表单”，然后重复按下“大写”的复选框。点击复选框时，上方的输入框不应该获取焦点。
+`MyInput` 组件应该只在 **挂载** 时获得焦点，而非每次渲染后。为了验证这一行为是否正确，点击“展示表单”，然后反复点击“大写”的复选框。点击复选框时，上方的输入框不应该获得焦点。
 
 <Solution>
 
-在渲染期间调用 `ref.current.focus()` 本身是不正确的。因为这会产生“副作用”。副作用要么应该放在事件处理程序里面，要么在 `useEffect` 中。在这种情况下，副作用是组件渲染引起的，而不是任何特定的交互引起的，因此应该将它放在 Effect 中。
+在渲染期间调用 `ref.current.focus()` 是错误的。因为它是一个“副作用”。副作用应该放在事件处理程序中或通过 `useEffect` 来声明。在这里，这个副作用是由组件渲染引起的，而不是任何特定的交互引起的，因此应该将它放在 Effect 中。
 
-为了修复这个错误，可以对 `ref.current.focus()` 的调用包裹在 Effect 中。然后确保这个 Effect 只在组件挂载时执行而不是在每一轮渲染时都执行，可以为 Effect 的声明加一个空的依赖数组 `[]`。
+要修复这个错误，需要将 `ref.current.focus()` 调用包裹在 Effect 中。然后，为了确保这个 Effect 只在组件挂载时运行，而不是每一轮渲染后都运行，再添加一个空的依赖数组 `[]`。
 
 <Sandpack>
 
@@ -1156,13 +1156,13 @@ body {
 
 </Solution>
 
-#### 有条件地聚焦于表单 {/*focus-a-field-conditionally*/}
+#### 有条件地聚焦于表单字段 {/*focus-a-field-conditionally*/}
 
 下面的表单渲染两个 `<MyInput />` 组件。
 
-按下“展示表单”，同时注意自动聚焦于第二个输入框，这是因为两个 `<MyInput />` 组件都在试图把焦点往自身上转移。当你连续为两个输入框调用 `focus()` 时，总是聚焦于最后面的输入框。
+点击“展示表单”后，注意第二个输入框会自动获取焦点。这是因为两个 `<MyInput />` 组件在内部抢占焦点。当你连续为两个输入框调用 `focus()` 时，最后一个总会“获胜”。
 
-假设聚焦于第一个输入框，那么，第一个 `MyInput` 组件现在接收到 `shouldFocus` 属性，并且应当被设置为 `true`。更改下程序逻辑，规定仅当 `MyInput` 接收到的 `shouldFocus` 属性为 `true` 时才调用 `focus()` 。
+假设你希望聚焦于第一个输入框。现在，第一个 `MyInput` 组件接收一个布尔类型的 `shouldFocus` 属性，且值设置为 `true`。请修改程序逻辑，使得仅当 `MyInput` 接收到的 `shouldFocus` 属性为 `true` 时才调用 `focus()` 。
 
 <Sandpack>
 
@@ -1242,17 +1242,17 @@ body {
 
 </Sandpack>
 
-试着重复按下“展示表单”和“隐藏表单”以验证你的解决方式。当表单出现时，这里只有第一个输入框获得了焦点。那是因为它的父组件渲染的第一个输入框时，第一个输入框带着 `shouldFocus={true}` 这个属性值，而渲染第二个输入框时，第二个输入框则带着 `shouldFocus={false}` 的属性值。可以发现，即使你往两个输入框里都输入一些内容时，它们仍然能正常工作。
+要验证你的方法是否奏效，请重复点击“展示表单”和“隐藏表单”。当表单显示时，只有第一个输入框该获得焦点。因为父组件在渲染第一个输入框时传入了 `shouldFocus={true}`，而渲染第二个输入框时传入了 `shouldFocus={false}`。同时，请确认两个输入框都能正常工作并且你都能在其中输入。
 
 <Hint>
 
-所以，不能有条件地声明 Effect，但 Effect 中可以包含条件逻辑。
+你不能有条件地声明 Effect，但你的 Effect 中可以包含条件逻辑。
 
 </Hint>
 
 <Solution>
 
-向 Effect 中加入条件逻辑。由于 Effect 使用了 `shouldFocus`，你需要为 Effect 指定 `shouldFocus` 这个依赖项。这也意味着如果输入框的 `shouldFocus` 由 `false` 变为 `true` 时，它才会在下次渲染时获得焦点。
+在 Effect 中加入条件逻辑。由于你在 Effect 中使用了 `shouldFocus`，因此需要将它指定为依赖项。这意味着如果某个输入框的 `shouldFocus` 由 `false` 变为 `true`，它将在挂载后获得焦点。
 
 <Sandpack>
 
@@ -1335,15 +1335,15 @@ body {
 
 </Solution>
 
-#### 修复计时器触发两次的问题 {/*fix-an-interval-that-fires-twice*/}
+#### 修复会触发两次的定时器 {/*fix-an-interval-that-fires-twice*/}
 
-下面的 `Counter` 组件显示一个计数器，应该每秒递增一次。在组件挂载时，它调用 [`setInterval`](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval)。这会导致 `onTick` 每秒运行一次。`onTick` 函数会递增计数器。
+这个 `Counter` 组件展示了一个每秒递增的计数器。在组件挂载时，它调用了 [`setInterval`](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval)。这使得 `onTick` 每秒运行一次。`onTick` 函数会递增计数器。
 
-然而，计数器不是每秒递增一次，而是两次。这是为什么呢？找出错误的原因并修复它。
+然而，计数器不是每秒递增一次，而是两次。这是为什么呢？找出 bug 的原因并修复它。
 
 <Hint>
 
-请记住，`setInterval` 返回一个 interval ID，你可以将其传递给 [`clearInterval`](https://developer.mozilla.org/zh-CN/docs/Web/API/clearInterval) 来停止计时。
+请记住，`setInterval` 返回一个 interval ID，你可以将它传递给 [`clearInterval`](https://developer.mozilla.org/zh-CN/docs/Web/API/clearInterval) 来停止这个定时器。
 
 </Hint>
 
@@ -1375,7 +1375,7 @@ export default function Form() {
   const [show, setShow] = useState(false);
   return (
     <>
-      <button onClick={() => setShow(s => !s)}>{show ? '隐藏' : '展示'}计时器</button>
+      <button onClick={() => setShow(s => !s)}>{show ? '隐藏' : '展示'}计数器</button>
       <br />
       <hr />
       {show && <Counter />}
@@ -1400,11 +1400,11 @@ body {
 
 <Solution>
 
-在 [严格模式](/reference/react/StrictMode) 下，（本网站中的示例沙盒（sandbox）都已开启严格模式），React 在开发模式中，每个组件都会重复挂载一次。这也就导致计数器组件被挂载了两次。所以，计时器也被设立了两次，这就是计数器每秒递增两次的原因。
+当开启 [严格模式](/reference/react/StrictMode) 时（例如在本站的示例沙盒（sandbox）中），React 在开发环境中会将每个组件重新挂载一次。这使得计数器组件被挂载了两次，于是定时器也被设置了两次，因此计数器会每秒增加两次。
 
-然而，这并不是 React 本身的错：而是 Effect 代码中本身就存在问题。React 只不过把这个问题放大了。真正的错误原因是这样的 Effect 启动后，但没有提供清理函数，所以上一次的 Effect 残留就没有被除去。
+然而，React 的行为并不是导致这个 bug 的根本原因：代码中本就存在这个 bug。React 的行为只是让这个 bug 更加明显。真正的原因是这个 Effect 开启了一个进程但没有提供清理它的方式。
 
-要修复这个问题，保存 `setInterval` 返回的 interval ID，并使用 [`clearInterval`](https://developer.mozilla.org/zh-CN/docs/Web/API/clearInterval) 实现一个清理函数：
+要修复这段代码，保存 `setInterval` 返回的 interval ID，并使用 [`clearInterval`](https://developer.mozilla.org/zh-CN/docs/Web/API/clearInterval) 实现一个清理函数：
 
 <Sandpack>
 
@@ -1435,7 +1435,7 @@ export default function App() {
   const [show, setShow] = useState(false);
   return (
     <>
-      <button onClick={() => setShow(s => !s)}>{show ? '隐藏' : '展示'}计时器</button>
+      <button onClick={() => setShow(s => !s)}>{show ? '隐藏' : '展示'}计数器</button>
       <br />
       <hr />
       {show && <Counter />}
@@ -1458,13 +1458,13 @@ body {
 
 </Sandpack>
 
-在开发环境中，React 仍然会重复挂载一次组件，通过放大问题，以确保已经正确地实现了清理函数。这样，调用一次 `setInterval` 后就紧接着调用 `clearInterval`，然后再调用 `setInterval`。在生产环境中与开发环境不同，React 只挂载一次组件，即只调用一次 `setInterval`。两种情况下用户感知的效果是相同的：计数器每秒递增一次。
+在开发环境中，React 仍然会重新挂载一次你的组件，以确保你已经正确地实现了清理函数。因此，在调用 `setInterval` 后会紧接着调用 `clearInterval`，然后再调用 `setInterval`。在生产环境中，则只调用一次 `setInterval`。两种情况下用户可见的行为都是相同的：计数器每秒递增一次。
 
 </Solution>
 
-#### 修复在 Effect 中获取数据的问题 {/*fix-fetching-inside-an-effect*/}
+#### 解决在 Effect 中获取数据的问题 {/*fix-fetching-inside-an-effect*/}
 
-下面这个组件显示所选人物的传记。它在挂载时和每当 `person` 改变时通过调用一个异步函数 `fetchBio(person)` 来加载传记。该异步函数返回一个 [Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，最终解析为一个字符串。当获取完成时，它调用 `setBio` 以将该字符串显示在选择框下方。
+下面这个组件显示所选人物的传记。它在挂载时和每当 `person` 改变时，通过调用一个异步函数 `fetchBio(person)` 来加载传记。该异步函数返回一个 [Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，最终解析为一个字符串。当请求结束时，它调用 `setBio` 以将该字符串显示在选择框下方。
 
 <Sandpack>
 
@@ -1514,30 +1514,30 @@ export async function fetchBio(person) {
 </Sandpack>
 
 
-这段代码中有一个错误。试试首先选择 `Alice`，然后选择 `Bob`，然后紧接着选择 `Taylor`。如果操作得足够快，会注意到这个错误：Taylor 被选中了，但下面的一段却说：“这是Bob的传记。”
+这段代码中有一个 bug。试试先选择 `Alice`，再选择 `Bob`，接着立即选择 `Taylor`。如果操作得足够快，你会观察到这个 bug：虽然 Taylor 被选中了，但下面的一段却说：“这是 Bob 的传记。”
 
-为什么会发生这种情况？试着修复此 Effect 中的错误。
+为什么会出现这种情况？试试修复这个 Effect 中的 bug。
 
 <Hint>
 
-如果 Effect 需要异步获取某些数据，它通常需要清理函数。
+如果 Effect 需要异步获取某些数据，它往往需要清理函数。
 
 </Hint>
 
 <Solution>
 
-触发问题时，程序的指令序列是这样的：
+要触发这个 bug，事情需要按以下顺序发生：
 
 - 选中 `'Bob'` 触发 `fetchBio('Bob')`
 - 选中 `'Taylor'` 触发 `fetchBio('Taylor')`
-- **在 `'Bob'` 的数据完成加载之前，就已经完成了对 `'Taylor'` 的数据的加载**
-- 加载 `'Taylor'` 数据的 Effect 调用了 `setBio('这是Taylor的传记')`
-- 加载完成 `'Bob'` 的数据
-- 加载 `'Bob'` 数据的 Effect 调用了 `setBio('这是Bob的传记')`
+- **`fetchBio('Taylor')` 在 `fetchBio('Bob')` 之前完成。**
+- 渲染 `'Taylor'` 时的 Effect 调用 `setBio('这是Taylor的传记')`
+- `fetchBio('Bob')` 请求完成
+- 渲染 `'Bob'` 时的 Effect 调用 `setBio('这是Bob的传记')`
 
-这就是为什么即使 Taylor 被选中了，但显示的仍然是 Bob 的数据。这种问题被称之为 [条件竞争](https://en.wikipedia.org/wiki/Race_condition)，因为两个异步操作都在彼此竞争，谁先谁后是不可预期的。
+这就是为什么即使选择了 Taylor，但显示的仍然是 Bob 的传记。像这样的 bug 被称为 [竞态条件](https://en.wikipedia.org/wiki/Race_condition)，因为两个异步操作在“竞速”，并且可能会以意外的顺序完成。
 
-为了修复这种问题，在 Effect 中添加清理函数：
+要修复这个 bug，添加一个清理函数：
 
 <Sandpack>
 
@@ -1591,16 +1591,16 @@ export async function fetchBio(person) {
 
 </Sandpack>
 
-其实，每个 Effect 都可以在里面设置一个 `ignore` 标记变量。在最开始，`ignore` 被设置为 `false`。然而，当 Effect 执行清理函数后（就像你选中了列表中不同的人时），`ignore` 就会被设置为 `true`。所以此时请求完成的顺序并不重要。只有最后选中的人在执行它的 Effect 时，`ignore` 会被设为 `false`，所以它会调用 `setBio(result)`。而之前的 Effect 都被清理掉了。所以检查 `if (!ignore)` 会阻止调用 `setBio`：
+每轮渲染的 Effect 都有其独立的 `ignore` 变量。最初，`ignore` 变量被设置为 `false`。但如果一个 Effect 被清理（例如，当你选择不同的人时），它的 `ignore` 变量会变为 `true`。因此，请求完成的顺序已经不再重要。只有最后选中的人的 Effect 的 `ignore` 变量会是 `false`，因此它将会调用 `setBio(result)`。而之前的 Effect 已经被清理，所以 `if (!ignore)` 的检查会阻止它们调用 `setBio`：
 
 - 选中 `'Bob'` 触发 `fetchBio('Bob')`
-- 选中 `'Taylor'` 触发 `fetchBio('Taylor')`，**然后清理之前加载（Bob）数据时的 Effect**
-- 在加载完 `'Bob'` 的数据 **之前**，就已经完成加载 `'Taylor'` 的数据
+- 选中 `'Taylor'` 触发 `fetchBio('Taylor')`，**并清理之前的（Bob 的） Effect**
+- `fetchBio('Taylor')` 在 `fetchBio('Bob')` **之前** 完成。
 - 渲染 `'Taylor'` 时的 Effect 调用 `setBio('这是Taylor的传记')`
-- 加载完成 `'Bob'` 的数据
-- 渲染 `'Bob'` 时的 Effect 不会做任何事情，因为 `ignore` 已经被设为了 `true`。
+- `fetchBio('Bob')` 请求完成
+- 渲染 `'Bob'` 时的 Effect 不会做任何事情，因为它的 `ignore` 变量被设为了 `true`。
 
-除了忽略过时 API 调用的结果外，你还可以使用 [`AbortController`](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController) 来取消不再需要的请求。然而，仅靠这个还不足以防止竞态条件。更多的异步步骤可能会在获取之后链接起来，因此使用显式标记，如 `ignore` 变量，是修复这类问题最可靠的方法。
+除了忽略过时 API 调用的结果外，你还可以使用 [`AbortController`](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController) 来取消不再需要的请求。然而，仅凭这一点还不足以防止竞态条件。因为可能在 fetch 之后还有更多的异步操作，因此使用像 `ignore` 这样的显式标志是解决这类问题最可靠的方法。
 
 </Solution>