diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index ffff5997fb..83e2b0137e 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -45,14 +45,15 @@ const thumbsDownIcon = (
 );
 
 function sendGAEvent(isPositive: boolean) {
+  const category = isPositive ? 'like_button' : 'dislike_button';
   const value = isPositive ? 1 : 0;
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
   // @ts-ignore
   gtag('event', 'feedback', {
-    event_category: 'button',
+    event_category: category,
     event_label: window.location.pathname,
-    value,
+    event_value: value,
   });
 }
 
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 180ded8678..8a71d9e6e3 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -77,7 +77,7 @@ export function SidebarLink({
         {title}{' '}
         {canary && (
           <IconCanary
-            title="This feature is available in the latest Canary"
+            title=" - This feature is available in the latest Canary"
             className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
           />
         )}
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index 076a38be91..659295d0a1 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -34,7 +34,7 @@ function PageHeading({
           {title}
           {canary && (
             <IconCanary
-              title="This feature is available in the latest Canary"
+              title=" - This feature is available in the latest Canary"
               className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}
diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
index 765459c30e..a35e727062 100644
--- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md
+++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
@@ -224,8 +224,8 @@ function handleClick() {
 
 在 React 18 工作组，我们和第三方库的维护者合作，创建需要支持 styles 和外部存储中的特定用例的并发渲染的新 API。为了支持 React 18，一些第三方库可能需要切换到下面的 API 之一：
 
-* `useSyncExternalStore` 是一个新增 hook，它允许外部存储通过对 store 的强制更新保持同步从而支持并发读取。这个新 API 推荐用于任何和 React 的外部状态集成的库。了解更多信息请查看 [useSyncExternalStore 概览](https://github.com/reactwg/react-18/discussions/70) 和 [useSyncExternalStore API 细节](https://github.com/reactwg/react-18/discussions/86)。
-* `useInsertionEffect` 是一个新增 hook，它可以让 CSS-in-JS 库解决渲染中注入样式的性能问题。我们希望只有在你已经构建了一个 CSS-in-JS 库的情况下才使用它。这个 hook 会在 DOM 变化之后， layout effect 读取新的布局之前运行。这解决了 React 17 及其以下就已经存在但是在 React 18 更重要的问题，因为在并发渲染期间 React 会阻止浏览器，给了它一个重新计算布局的机会。了解更多信息，查看 [`<style>` 库升级指南](https://github.com/reactwg/react-18/discussions/110)。
+* `useSyncExternalStore` 是一个新增 Hook，它允许外部存储通过对 store 的强制更新保持同步从而支持并发读取。这个新 API 推荐用于任何和 React 的外部状态集成的库。了解更多信息请查看 [useSyncExternalStore 概览](https://github.com/reactwg/react-18/discussions/70) 和 [useSyncExternalStore API 细节](https://github.com/reactwg/react-18/discussions/86)。
+* `useInsertionEffect` 是一个新增 Hook，它可以让 CSS-in-JS 库解决渲染中注入样式的性能问题。我们希望只有在你已经构建了一个 CSS-in-JS 库的情况下才使用它。这个 Hook 会在 DOM 变化之后，layout effect 读取新的布局之前运行。这解决了 React 17 及其以下就已经存在但是在 React 18 更重要的问题，因为在并发渲染期间 React 会阻止浏览器，给了它一个重新计算布局的机会。了解更多信息，查看 [`<style>` 库升级指南](https://github.com/reactwg/react-18/discussions/110)。
 
 React 18 也引入了一些并发渲染的新 API，例如 `startTransition`、`useDeferredValue` 以及 `useId`，关于此更多信息我们在 [发布报告](/blog/2022/03/29/react-v18) 中有所分享。
 
diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md
index 98fe646405..6599b84d5e 100644
--- a/src/content/blog/2022/03/29/react-v18.md
+++ b/src/content/blog/2022/03/29/react-v18.md
@@ -139,8 +139,8 @@ startTransition(() => {
 被包裹在 `startTransition` 中的更新会被处理为过渡更新，如果有紧急更新出现，比如点击或者按键，则会中断过渡更新。如果一个过渡更新被用户中断（比如，快速输入多个字符），React 将会抛弃未完成的渲染结果，然后仅渲染最新的内容。
 
 
-* `useTransition`： 一个用于开启过渡更新的 hook，用于跟踪待定转场状态。
-* `startTransition`： 当 hook 不能使用时，用于开启过渡的方法。
+* `useTransition`： 一个用于开启过渡更新的 Hook，用于跟踪待定转场状态。
+* `startTransition`： 当 Hook 不能使用时，用于开启过渡的方法。
 
 并发渲染中将会加入过渡更新，允许更新被中断。如果更新内容被重新挂起，过渡机制也会告诉 React 在后台渲染过渡内容时继续展示当前内容（查看 [Suspense 意见征求](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) 了解更多信息）。
 
@@ -229,8 +229,7 @@ React 18 中的 Suspense 在与 transition API 结合时效果最好。如果你
 
 #### useId {/*useid*/}
 
-`useId` 是一个新的 hook，用于生成在客户端和服务端两侧都独一无二的 id，避免 hydrate 后两侧内容不匹配。它主要用于需要唯一 id 的，具有集成 API 的组件库。这个更新不仅解决了一个在 React 17 及更低版本中的存在的问题，而且它会在 React 18 中发挥更重要的作用，因为新的流式服务端渲染响应 HTML 的方式将是无序的，需要独一无二的 id 作为索引。[参阅文档](/reference/react/useId)。
-
+`useId` 是一个新的Hook，用于生成在客户端和服务端两侧都独一无二的 id，避免 hydrate 后两侧内容不匹配。它主要用于需要唯一 id 的，具有集成 API 的组件库。这个更新不仅解决了一个在 React 17 及更低版本中的存在的问题，而且它会在 React 18 中发挥更重要的作用，因为新的流式服务端渲染响应 HTML 的方式将是无序的，需要独一无二的 id 作为索引。[参阅文档](/reference/react/useId)。
 
 > Note
 >
@@ -246,7 +245,7 @@ React 18 中的 Suspense 在与 transition API 结合时效果最好。如果你
 
 #### useSyncExternalStore {/*usesyncexternalstore*/}
 
-`useSyncExternalStore` 是一个新的 hook，允许使用第三方状态管理来支持并发模式，并且能通过对 store 进行强制更新实现数据同步。对第三方数据源的订阅能力的实现上，消除了对 `useEffect` 的依赖，推荐任何 React 相关的第三方状态管理库使用这个新特性。[参阅文档](/reference/react/useSyncExternalStore)。
+`useSyncExternalStore` 是一个新的 Hook，允许使用第三方状态管理来支持并发模式，并且能通过对 store 进行强制更新实现数据同步。对第三方数据源的订阅能力的实现上，消除了对 `useEffect` 的依赖，推荐任何 React 相关的第三方状态管理库使用这个新特性。[参阅文档](/reference/react/useSyncExternalStore)。
 
 > Note
 >
@@ -254,7 +253,7 @@ React 18 中的 Suspense 在与 transition API 结合时效果最好。如果你
 
 #### useInsertionEffect {/*useinsertioneffect*/}
 
-`useInsertionEffect` 是一个新的 Hook ，允许 CSS-in-JS 库解决在渲染中注入样式的性能问题。除非你已经建立了一个 CSS-in-JS 库，否则我们不希望你使用它。这个 hook 将在 DOM 变更发生后，在 layout effect 获取新布局之前运行。这个功能不仅解决了一个在 React 17 及以下版本中已经存在的问题，而且在 React 18 中更加重要，因为 React 在并发渲染时会为浏览器让步，给它一个重新计算布局的机会。[参阅文档](/reference/react/useInsertionEffect)。
+`useInsertionEffect` 是一个新的 Hook ，允许 CSS-in-JS 库解决在渲染中注入样式的性能问题。除非你已经建立了一个 CSS-in-JS 库，否则我们不希望你使用它。这个 Hook 将在 DOM 变更发生后，在 layout effect 获取新布局之前运行。这个功能不仅解决了一个在 React 17 及以下版本中已经存在的问题，而且在 React 18 中更加重要，因为 React 在并发渲染时会为浏览器让步，给它一个重新计算布局的机会。[参阅文档](/reference/react/useInsertionEffect)。
 
 > Note
 >
diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
index 59248b63b9..4903fa67d0 100644
--- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
+++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
@@ -24,7 +24,7 @@ RSC 将面向服务器的多页面应用程序的简单“请求/响应”思维
 
 自上次更新以来，我们已将 [RFC](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) 合并以批准提案。我们解决了 [React 服务器模块约定](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) 提案中未解决的问题，并与我们的合作伙伴达成共识，采用 `use client` 协定。这些文件还作为符合 RSC 兼容实现应支持的规范。
 
-最大的变化是我们引入了 [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) 作为从服务器组件中进行数据提取的主要方式。我们还计划通过引入一个名为 `use` 的新钩子，从客户端支持数据加载，该钩子也将取消 Promises。虽然我们不能在仅限客户端的应用程序中的任意组件中支持 `async / await`，但我们计划在将客户端仅应用程序结构化类似于 RSC 应用程序的方式时添加支持。
+最大的变化是我们引入了 [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) 作为从服务器组件中进行数据提取的主要方式。我们还计划通过引入一个名为 `use` 的新 Hook，从客户端支持数据加载，该 Hook 也将取消 Promises。虽然我们不能在仅限客户端的应用程序中的任意组件中支持 `async / await`，但我们计划在将客户端仅应用程序结构化类似于 RSC 应用程序的方式时添加支持。
 
 现在我们已经相当好地解决了数据提取的问题，我们正在探索另一个方向：从客户端向服务器发送数据，以便可以执行数据库变更和实现表单。我们通过在服务器/客户端边界传递 Server Action 函数来实现这一点。客户端可以调用该函数，提供无缝 RPC。而在 JavaScript 加载之前，Server Action 还可以提供逐步增强的表单。
 
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index db3b1d113c..ab29ed1398 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -12,7 +12,7 @@ TypeScript 是一种向 JavaScript 代码添加类型定义的常用方法。Typ
 <YouWillLearn>
 
 * [在 React 组件中使用 TypeScript](/learn/typescript#typescript-with-react-components)
-* [带有 hooks 的类型示例](/learn/typescript#example-hooks)
+* [带有 Hook 的类型示例](/learn/typescript#example-hooks)
 * [来自 `@types/react` 的常见类型](/learn/typescript/#useful-types)
 * [更多学习资源](/learn/typescript/#further-learning)
 
@@ -124,13 +124,13 @@ export default App = AppTSX;
 
 ## Hooks 示例 {/*example-hooks*/}
 
-来自 `@types/react` 的类型定义包括内置的 hooks，因此你可以在组件中使用它们，无需任何额外设置。它们是根据你在组件中编写的代码构建的，所以你会得到很多 [类型推断](https://www.typescriptlang.org/docs/handbook/type-inference.html)，并且理想情况下不需要处理提供类型的细节。
+来自 `@types/react` 的类型定义包括内置的 Hook，因此你可以在组件中使用它们，无需任何额外设置。它们是根据你在组件中编写的代码构建的，所以你会得到很多 [类型推断](https://www.typescriptlang.org/docs/handbook/type-inference.html)，并且理想情况下不需要处理提供类型的细节。
 
-但是，我们可以看一下如何为 hooks 提供类型的几个示例。
+但是，我们可以看一下如何为 Hook 提供类型的几个示例。
 
 ### `useState` {/*typing-usestate*/}
 
-[`useState` hook](/reference/react/useState) 会重用作为初始 state 传入的值以确定值的类型。例如：
+[`useState` Hook](/reference/react/useState) 会重用作为初始 state 传入的值以确定值的类型。例如：
 
 ```ts
 // 推断类型为 "boolean"
@@ -166,7 +166,7 @@ const [requestState, setRequestState] = useState<RequestState>({ status: 'idle'
 
 ### `useReducer` {/*typing-usereducer*/}
 
-[`useReducer`](/reference/react/useReducer) 是一个更复杂的 hook，它接受一个 reducer 函数和一个初始 state 作为参数，并将从初始 state 推断出 reducer 函数的类型。你可以选择性地为 `useReducer` 提供类型参数以为 state 提供类型。但是更高的做法仍然是在初始 state 上添加类型：
+[`useReducer`](/reference/react/useReducer) 是一个更复杂的 Hook，它接受一个 reducer 函数和一个初始 state 作为参数，并将从初始 state 推断出 reducer 函数的类型。你可以选择性地为 `useReducer` 提供类型参数以为 state 提供类型。但是更高的做法仍然是在初始 state 上添加类型：
 
 <Sandpack>
 
@@ -242,7 +242,7 @@ export default function App() {
 
 ### `useContext` {/*typing-usecontext*/}
 
-[`useContext`](/reference/react/useContext) 是一种无需通过组件传递 props 而可以直接在组件树中传递数据的技术。它是通过创建 provider 组件使用，通常还会创建一个 hook 以在子组件中使用该值。
+[`useContext`](/reference/react/useContext) 是一种无需通过组件传递 props 而可以直接在组件树中传递数据的技术。它是通过创建 provider 组件使用，通常还会创建一个 Hook 以在子组件中使用该值。
 
 从传递给 `createContext` 调用的值推断 context 提供的值的类型：
 
@@ -286,7 +286,7 @@ export default App = AppTSX;
 
 当你没有一个合理的默认值时，这种技术是有效的，而在这些情况下，`null` 作为默认值可能感觉是合理的。但是，为了让类型系统理解你的代码，你需要在 `createContext` 上显式设置 `ContextShape | null`。
 
-这会导致一个问题，你需要在 context consumer 中消除 `| null` 的类型。我们建议让 hook 在运行时检查它的存在，并在不存在时抛出一个错误：
+这会导致一个问题，你需要在 context consumer 中消除 `| null` 的类型。我们建议让 Hook 在运行时检查它的存在，并在不存在时抛出一个错误：
 
 ```js {5, 16-20}
 import { createContext, useContext, useState, useMemo } from 'react';
@@ -299,7 +299,7 @@ type ComplexObject = {
 // 上下文在类型中创建为 `| null`，以准确反映默认值。
 const Context = createContext<ComplexObject | null>(null);
 
-// 这个 hook 会在运行时检查 context 是否存在，并在不存在时抛出一个错误。
+// 这个 Hook 会在运行时检查 context 是否存在，并在不存在时抛出一个错误。
 const useGetComplexObject = () => {
   const object = useContext(Context);
   if (!object) { throw new Error("useGetComplexObject must be used within a Provider") }
@@ -329,7 +329,7 @@ function MyComponent() {
 
 ### `useMemo` {/*typing-usememo*/}
 
-[`useMemo`](/reference/react/useMemo) 会从函数调用中创建/重新访问记忆化值，只有在第二个参数中传入的依赖项发生变化时，才会重新运行该函数。函数的类型是根据第一个参数中函数的返回值进行推断的，如果希望明确指定，可以为这个钩子提供一个类型参数以指定函数类型。
+[`useMemo`](/reference/react/useMemo) 会从函数调用中创建/重新访问记忆化值，只有在第二个参数中传入的依赖项发生变化时，才会重新运行该函数。函数的类型是根据第一个参数中函数的返回值进行推断的，如果希望明确指定，可以为该 Hook 提供一个类型参数以指定函数类型。
 
 ```ts
 // 从 filterTodos 的返回值推断 visibleTodos 的类型
@@ -339,7 +339,7 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
 
 ### `useCallback` {/*typing-usecallback*/}
 
-[`useCallback`](/reference/react/useCallback) 会在第二个参数中传入的依赖项保持不变的情况下，为函数提供相同的引用。与 `useMemo` 类似，函数的类型是根据第一个参数中函数的返回值进行推断的，如果希望明确指定，可以为这个钩子提供一个类型参数以指定函数类型。
+[`useCallback`](/reference/react/useCallback) 会在第二个参数中传入的依赖项保持不变的情况下，为函数提供相同的引用。与 `useMemo` 类似，函数的类型是根据第一个参数中函数的返回值进行推断的，如果希望明确指定，可以为这个 Hook 提供一个类型参数以指定函数类型。
 
 
 ```ts
diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index d103adbc90..dd1401ea8a 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -308,7 +308,7 @@ export default function Counter({initialValue = 0}) {
 
 </Sandpack>
 
-As `Counter` requires both the `useState` hook and event handlers to increment or decrement the value, this component must be a Client Component and will require a `'use client'` directive at the top.
+As `Counter` requires both the `useState` Hook and event handlers to increment or decrement the value, this component must be a Client Component and will require a `'use client'` directive at the top.
 
 In contrast, a component that renders UI without interaction will not need to be a Client Component.
 
diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
index d0511b1a9e..47593a0ae5 100644
--- a/src/content/reference/react/useOptimistic.md
+++ b/src/content/reference/react/useOptimistic.md
@@ -116,7 +116,7 @@ export default function App() {
   ]);
   async function sendMessage(formData) {
     const sentMessage = await deliverMessage(formData.get("message"));
-    setMessages([...messages, { text: sentMessage }]);
+    setMessages((messages) => [...messages, { text: sentMessage }]);
   }
   return <Thread messages={messages} sendMessage={sendMessage} />;
 }
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index fd56109a80..fcefbc1640 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -4,7 +4,7 @@ title: useRef
 
 <Intro>
 
-`useRef` 是一个 React Hook，它能让你引用一个不需要渲染的值。
+`useRef` 是一个 React Hook，它能帮助引用一个不需要渲染的值。
 
 ```js
 const ref = useRef(initialValue)
@@ -20,7 +20,7 @@ const ref = useRef(initialValue)
 
 ### `useRef(initialValue)` {/*useref*/}
 
-在你组件的顶层调用 `useRef` 声明一个 [ref](/learn/referencing-values-with-refs)。
+在组件顶层调用 `useRef` 以声明一个 [ref](/learn/referencing-values-with-refs)。
 
 ```js
 import { useRef } from 'react';
@@ -31,34 +31,34 @@ function MyComponent() {
   // ...
 ```
 
-[请看下面的更多例子](#usage)
+[请参阅下方更多示例](#usage)。
 
 #### 参数 {/*parameters*/}
 
-* `initialValue`：ref 对象的 `current` 属性的初始值。可以是任意类型的值。这个参数会首次渲染后被忽略。
+* `initialValue`：ref 对象的 `current` 属性的初始值。可以是任意类型的值。这个参数在首次渲染后被忽略。
 
 #### 返回值 {/*returns*/}
 
 `useRef` 返回一个只有一个属性的对象:
 
-* `current`：最初，它被设置为你传递的 `initialValue`。之后你可以把它设置为其他值。如果你把 ref 对象作为一个 JSX 节点的 `ref` 属性传递给 React，React 将为它设置 `current` 属性。
+* `current`：初始值为传递的 `initialValue`。之后可以将其设置为其他值。如果将 ref 对象作为一个 JSX 节点的 `ref` 属性传递给 React，React 将为它设置 `current` 属性。
 
 在后续的渲染中，`useRef` 将返回同一个对象。
 
-#### 注意事项 {/*caveats*/}
+#### 注意 {/*caveats*/}
 
-* 你可以修改 `ref.current` 属性。与 state 不同，它是可变的。然而，如果它持有一个用于渲染的对象（例如，你的 state 的一部分），那么你就不应该修改这个对象。
-* 当你改变 `ref.current` 属性时，React 不会重新渲染你的组件。React 不知道你何时改变它，因为 ref 是一个普通的 JavaScript 对象。
-* 除了 [初始化](#avoiding-recreating-the-ref-contents) 外不要在渲染期间写入 **或者读取** `ref.current`。这会使你的组件的行为不可预测。
-* 在严格模式下，React 将会 **调用两次组件方法**，这是为了 [帮助你发现意外的问题](#my-initializer-or-updater-function-runs-twice)。这只是开发模式下的行为，不影响生产模式。每个 ref 对象将会创建两次，但是其中一个版本将被丢弃。如果你的组件函数是纯的（应该如此），这不会影响其行为。
+* 可以修改 `ref.current` 属性。与 state 不同，它是可变的。然而，如果它持有一个用于渲染的对象（例如 state 的一部分），那么就不应该修改这个对象。
+* 改变 `ref.current` 属性时，React 不会重新渲染组件。React 不知道它何时会发生改变，因为 ref 是一个普通的 JavaScript 对象。
+* 除了 [初始化](#avoiding-recreating-the-ref-contents) 外不要在渲染期间写入或者读取 `ref.current`，否则会使组件行为变得不可预测。
+* 在严格模式下，React 将会 **调用两次组件方法**，这是为了 [帮助发现意外问题](#my-initializer-or-updater-function-runs-twice)。但这只是开发模式下的行为，不会影响生产模式。每个 ref 对象都将会创建两次，但是其中一个版本将被丢弃。如果使用的是组件纯函数（也应当如此），那么这不会影响其行为。
 
 ---
 
-## 使用方法 {/*usage*/}
+## 使用 {/*usage*/}
 
-### 用 ref 引用一个值 {/*referencing-a-value-with-a-ref*/}
+### 使用用 ref 引用一个值 {/*referencing-a-value-with-a-ref*/}
 
-在你的组件的顶层调用 `useRef` 声明一个或多个 [refs](/learn/referencing-values-with-refs)。
+在组件顶层调用 `useRef` 声明一个或多个 [ref](/learn/referencing-values-with-refs)。
 
 ```js [[1, 4, "intervalRef"], [3, 4, "0"]]
 import { useRef } from 'react';
@@ -68,11 +68,11 @@ function Stopwatch() {
   // ...
 ```
 
-`useRef` 返回一个具有单个 <CodeStep step={2}>`current` 属性</CodeStep> 的 <CodeStep step={1}>ref 对象</CodeStep>，并初始化为你提供的 <CodeStep step={3}>initial value</CodeStep>
+`useRef` 返回一个具有单个 <CodeStep step={2}>`current` 属性</CodeStep> 的 <CodeStep step={1}>ref 对象</CodeStep>，并初始化为你提供的 <CodeStep step={3}>初始值</CodeStep>。
 
-在后续的渲染中，`useRef` 将返回相同的对象。你可以改变它的 `current` 属性来存储信息，并在之后读取它。这会让你联想起 [state](/reference/react/useState)，但是有一个重要的区别。
+在后续的渲染中，`useRef` 将返回相同的对象。你可以改变它的 `current` 属性来存储信息，并在之后读取它。这会让人联想到 [state](/reference/react/useState)，但是有一个重要的区别。
 
-**改变 ref 不会触发重新渲染。** 这意味着 ref 是存储一些不影响组件视图输出的信息的完美选择。例如，如果你需要存储一个 [intervalID](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval) 并在以后检索它，你可以把它放在一个 ref 中。如果要更新 ref 里面的值，你需要手动改变它的 <CodeStep step={2}>`current` 属性</CodeStep>：
+**改变 ref 不会触发重新渲染**。这意味着 ref 是存储一些不影响组件视图输出信息的完美选择。例如，如果需要存储一个 [interval ID](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval) 并在以后检索它，那么可以将它存储在 ref 中。只需要手动改变它的 <CodeStep step={2}>`current` 属性</CodeStep> 即可修改 ref 的值：
 
 ```js [[2, 5, "intervalRef.current"]]
 function handleStartClick() {
@@ -83,7 +83,7 @@ function handleStartClick() {
 }
 ```
 
-在之后，你可以从 ref 中读取 interval ID，这样你就可以 [清除定时器](https://developer.mozilla.org/zh-CN/docs/Web/API/clearInterval)：
+在之后，从 ref 中读取 interval ID 便可以 [清除定时器](https://developer.mozilla.org/zh-CN/docs/Web/API/clearInterval)：
 
 ```js [[2, 2, "intervalRef.current"]]
 function handleStopClick() {
@@ -92,11 +92,11 @@ function handleStopClick() {
 }
 ```
 
-通过使用 ref，你可以确保：
+使用 ref 可以确保：
 
-- 你可以在重新渲染之间 **存储信息**（不像是普通对象，每次渲染都会重置）。
-- 改变它 **不会触发重新渲染**（不像是 state 变量，会触发重新渲染）。
-- 对于你的组件的每个副本来说，**这些信息都是本地的**（不像是外面的变量，是共享的）。
+- 可以在重新渲染之间 **存储信息**（普通对象存储的值每次渲染都会重置）。
+- 改变它 **不会触发重新渲染**（状态变量会触发重新渲染）。
+- 对于组件的每个副本而言，**这些信息都是本地的**（外部变量则是共享的）。
 
 改变 ref 不会触发重新渲染，所以 ref 不适合用于存储期望显示在屏幕上的信息。如有需要，使用 state 代替。阅读更多关于 [在 `useRef` 和 `useState` 之间选择](/learn/referencing-values-with-refs#differences-between-refs-and-state) 的信息。
 
@@ -104,7 +104,7 @@ function handleStopClick() {
 
 #### 点击计数器 {/*click-counter*/}
 
-这个组件使用 ref 来记录按钮被点击的次数。注意，在这里使用 ref 而不是 state 是可以的，因为点击次数只在事件处理程序中被读取和写入。
+这个组件使用 ref 记录按钮被点击的次数。注意，在这里使用 ref 而不是 state 是可以的，因为点击次数只在事件处理程序中被读取和写入。
 
 <Sandpack>
 
@@ -121,7 +121,7 @@ export default function Counter() {
 
   return (
     <button onClick={handleClick}>
-      Click me!
+      点击！
     </button>
   );
 }
@@ -129,13 +129,13 @@ export default function Counter() {
 
 </Sandpack>
 
-如果你在 JSX 中显示 `{ref.current}`，数字不会在点击时更新。这是因为修改 `ref.current` 不会触发重新渲染。用于渲染的信息应该使用 state。
+如果在 JSX 中显示 `{ref.current}`，数字不会在点击时更新。这是因为修改 `ref.current` 不会触发重新渲染——用于渲染的信息应该使用 state。
 
 <Solution />
 
 #### 秒表 {/*a-stopwatch*/}
 
-这个例子使用了 state 和 ref 的组合。`startTime` 和 `now` 都是 state 变量，因为它们是用来渲染的。但是我们还需要持有一个 [interval ID](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval)，这样我们就可以在按下按钮时停止定时器。因为 interval ID 不用于渲染，所以应该把它保存在一个 ref 中，并且手动更新它。
+这个例子使用了 state 和 ref 的组合。`startTime` 和 `now` 都是 state 变量，因为它们是用来渲染的。但是还需要持有 [interval ID](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval) 以在按下按钮时停止定时器。因为 interval ID 不用于渲染，所以应该把它保存在一个 ref 中，并且手动更新它。
 
 <Sandpack>
 
@@ -170,10 +170,10 @@ export default function Stopwatch() {
     <>
       <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
       <button onClick={handleStart}>
-        Start
+        开始
       </button>
       <button onClick={handleStop}>
-        Stop
+        停止
       </button>
     </>
   );
@@ -188,11 +188,11 @@ export default function Stopwatch() {
 
 <Pitfall>
 
-**不要在渲染期间写入 _或者读取_ `ref.current`。**
+**不要在渲染期间写入或者读取 `ref.current`**。
 
-React 期望你的组件的主体 [表现得像一个纯函数](/learn/keeping-components-pure)：
+React 期望组件主体 [表现得像一个纯函数](/learn/keeping-components-pure)：
 
-- 如果输入的（[props](/learn/passing-props-to-a-component)、[state](/learn/state-a-components-memory) 和 [context](/learn/passing-data-deeply-with-context)）都是一样的，那么就应该返回一样的 JSX。
+- 如果输入的（[props](/learn/passing-props-to-a-component)、[state](/learn/state-a-components-memory) 与 [上下文](/learn/passing-data-deeply-with-context)）都是一样的，那么就应该返回一样的 JSX。
 - 以不同的顺序或用不同的参数调用它，不应该影响其他调用的结果。
 
 在 **渲染期间** 读取或写入 ref 会破坏这些预期行为。
@@ -208,27 +208,27 @@ function MyComponent() {
 }
 ```
 
-你可以在 **事件处理程序或者 effects** 中读取和写入 ref。
+可以在 **事件处理程序或者 Effect** 中读取和写入 ref。
 
 ```js {4-5,9-10}
 function MyComponent() {
   // ...
   useEffect(() => {
-    // ✅ 你可以在 effects 中读取和写入 ref
+    // ✅ 可以在 Effect 中读取和写入 ref
     myRef.current = 123;
   });
   // ...
   function handleClick() {
-    // ✅ 你可以在事件处理程序中读取和写入 ref
+    // ✅ 可以在事件处理程序中读取和写入 ref
     doSomething(myOtherRef.current);
   }
   // ...
 }
 ```
 
-如果 **不得不** 在渲染期间读取 [或者写入](/reference/react/useState#storing-information-from-previous-renders)，[使用 state](/reference/react/useState) 代替。
+如果不得不在渲染期间读取 [或者写入](/reference/react/useState#storing-information-from-previous-renders)，那么应该 [使用 state](/reference/react/useState) 代替。
 
-当你打破这些规则时，你的组件可能仍然可以工作，但是我们为 React 添加的大多数新功能将依赖于这些预期行为。阅读 [保持你的组件纯粹](/learn/keeping-components-pure#where-you-_can_-cause-side-effects) 以了解更多信息。
+当打破这些规则时，组件可能仍然可以工作，但是我们为 React 添加的大多数新功能将依赖于这些预期行为。阅读 [保持组件纯粹](/learn/keeping-components-pure#where-you-_can_-cause-side-effects) 以了解更多信息。
 
 </Pitfall>
 
@@ -236,9 +236,9 @@ function MyComponent() {
 
 ### 通过 ref 操作 DOM {/*manipulating-the-dom-with-a-ref*/}
 
-使用 ref 操作 [DOM](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API) 是非常常见的。React 内置了对它的支持。
+使用 ref 操作 [DOM](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API) 是非常常见的行为。React 内置了对它的支持。
 
-首先，声明一个 <CodeStep step={3}>initial value</CodeStep> 为 `null` 的 <CodeStep step={1}>ref 对象</CodeStep>
+首先，声明一个 <CodeStep step={3}>初始值</CodeStep> 为 `null` 的 <CodeStep step={1}>ref 对象</CodeStep>
 
 ```js [[1, 4, "inputRef"], [3, 4, "null"]]
 import { useRef } from 'react';
@@ -248,14 +248,14 @@ function MyComponent() {
   // ...
 ```
 
-然后将你的 ref 对象作为 `ref` 属性传递给你想要操作的 DOM 节点的 JSX：
+然后将 ref 对象作为 `ref` 属性传递给想要操作的 DOM 节点的 JSX：
 
 ```js [[1, 2, "inputRef"]]
   // ...
   return <input ref={inputRef} />;
 ```
 
-当 React 创建 DOM 节点并将其渲染到屏幕时，React 将会把 DOM 节点设置为你的 ref 对象的 <CodeStep step={2}>`current` 属性</CodeStep>。现在你可以访问 `<input>` 的 DOM 节点，并且可以调用类似于 [`focus()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/focus) 的方法：
+当 React 创建 DOM 节点并将其渲染到屏幕时，React 将会把 DOM 节点设置为 ref 对象的 <CodeStep step={2}>`current` 属性</CodeStep>。现在可以借助 ref 对象访问 `<input>` 的 DOM 节点，并且可以调用类似于 [`focus()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/focus) 的方法：
 
 ```js [[2, 2, "inputRef.current"]]
   function handleClick() {
@@ -263,7 +263,7 @@ function MyComponent() {
   }
 ```
 
-当节点从屏幕上移除时，React 将把 `current` 属性设回 `null`。
+当节点从屏幕上移除时，React 将把 `current` 属性设置回 `null`。
 
 阅读 [用 ref 操纵 DOM](/learn/manipulating-the-dom-with-refs) 以了解更多信息。
 
@@ -271,7 +271,7 @@ function MyComponent() {
 
 #### 聚焦文字输入框 {/*focusing-a-text-input*/}
 
-在这个示例中，点击按钮将会聚焦 input：
+在这个示例中，点击按钮将会聚焦输入框：
 
 <Sandpack>
 
@@ -289,7 +289,7 @@ export default function Form() {
     <>
       <input ref={inputRef} />
       <button onClick={handleClick}>
-        Focus the input
+        聚焦输入框
       </button>
     </>
   );
@@ -302,7 +302,7 @@ export default function Form() {
 
 #### 滚动图片到视图 {/*scrolling-an-image-into-view*/}
 
-在这个示例中，点击按钮将会把图片滚动到视图。这里使用 ref 绑定到列表的 DOM 节点，然后调用 DOM 的 [`querySelectorAll`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll) API 找到我们想要滚动的图片。
+在这个示例中，点击按钮将会把图片滚动到视图。这里使用 ref 绑定到列表的 DOM 节点，然后调用 DOM 的 [`querySelectorAll`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll) API 找到想要滚动的图片。
 
 <Sandpack>
 
@@ -420,7 +420,7 @@ export default function VideoPlayer() {
   return (
     <>
       <button onClick={handleClick}>
-        {isPlaying ? 'Pause' : 'Play'}
+        {isPlaying ? '暂停' : '播放'}
       </button>
       <video
         width="250"
@@ -446,9 +446,9 @@ button { display: block; margin-bottom: 20px; }
 
 <Solution />
 
-#### 向你的组件暴露 ref {/*exposing-a-ref-to-your-own-component*/}
+#### 向组件暴露 ref {/*exposing-a-ref-to-your-own-component*/}
 
-有时，你可能想让父级组件在你的组件中操纵 DOM。例如，也许你正在写一个 `MyInput` 组件，但你希望父组件能够聚焦 input（父组件无法访问）。你可以使用一个组合，通过 `useRef` 持有 input 并且通过 [`forwardRef`](/reference/react/forwardRef) 来将其暴露给父组件。在这里阅读 [详细演练](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes)。
+有时可能想让父级组件在组件中操纵 DOM。例如，假设正在编写一个 `MyInput` 组件，但希望父组件能够聚焦 input（不过父组件无法访问）。此时可以使用组件组合，通过 `useRef` 持有输入框并通过 [`forwardRef`](/reference/react/forwardRef) 将其暴露给父组件。在这里阅读 [详细演练](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes)。
 
 <Sandpack>
 
@@ -470,7 +470,7 @@ export default function Form() {
     <>
       <MyInput ref={inputRef} />
       <button onClick={handleClick}>
-        Focus the input
+        聚焦输入框
       </button>
     </>
   );
@@ -487,7 +487,7 @@ export default function Form() {
 
 ### 避免重复创建 ref 的内容 {/*avoiding-recreating-the-ref-contents*/}
 
-React 保存首次的 ref 初始值，并在后续的渲染中忽略它。
+React 会保存 ref 初始值，并在后续的渲染中忽略它。
 
 ```js
 function Video() {
@@ -495,7 +495,7 @@ function Video() {
   // ...
 ```
 
-虽然 `new VideoPlayer()` 的结果只会在首次渲染时使用，但是你依然在每次渲染时都在调用这个方法。如果是创建昂贵的对象，这可能是一种浪费。
+虽然 `new VideoPlayer()` 的结果只会在首次渲染时使用，但是依然在每次渲染时都在调用这个方法。如果是创建昂贵的对象，这可能是一种浪费。
 
 为了解决这个问题，你可以像这样初始化 ref：
 
@@ -508,13 +508,13 @@ function Video() {
   // ...
 ```
 
-通常情况下，在渲染过程中写入或读取 `ref.current` 是不允许的。然而，在这种情况下是可以的，因为结果总是一样的，而且条件只在初始化时执行，所以是完全可以预测的。
+通常情况下，在渲染过程中写入或读取 `ref.current` 是不允许的。然而，在这种情况下是可以的，因为结果总是一样的，而且条件只在初始化时执行，所以是完全可预测的。
 
 <DeepDive>
 
-#### 如何避免在初始化 `useRef` 之后进行 `null` 的类型检查 {/*how-to-avoid-null-checks-when-initializing-use-ref-later*/}
+#### 避免在初始化 `useRef` 之后进行 `null` 的类型检查 {/*how-to-avoid-null-checks-when-initializing-use-ref-later*/}
 
-如果你使用一个类型检查器，并且不想总是检查 `null`，你可以尝试用这样的模式来代替：
+如果使用了类型检查器，并且不想总是检查 `null`，可以尝试用这样的模式来代替：
 
 ```js
 function Video() {
@@ -532,7 +532,7 @@ function Video() {
   // ...
 ```
 
-在这里，`playerRef` 本身是可以为空的。然而，你应该能够使你的类型检查器确信，不存在 `getPlayer()` 返回 `null` 的情况。然后在你的事件处理程序中使用 `getPlayer()`。
+在这里，`playerRef` 本身是可以为空的。然而，应该能够使类型检查器确信，不存在 `getPlayer()` 返回 `null` 的情况。然后在事件处理程序中调用 `getPlayer()`。
 
 </DeepDive>
 
@@ -540,9 +540,9 @@ function Video() {
 
 ## 疑难解答 {/*troubleshooting*/}
 
-### 我无法获取自定义组件的 ref {/*i-cant-get-a-ref-to-a-custom-component*/}
+### 无法获取自定义组件的 ref {/*i-cant-get-a-ref-to-a-custom-component*/}
 
-如果你尝试像这样传递 `ref` 到你自己的组件：
+如果尝试像这样传递 `ref` 到自定义组件：
 
 ```js
 const inputRef = useRef(null);
@@ -558,9 +558,9 @@ Warning: Function components cannot be given refs. Attempts to access this ref w
 
 </ConsoleBlock>
 
-默认情况下，你自己的组件不会暴露它们内部 DOM 节点的 ref。
+默认情况下，自定义组件不会暴露它们内部 DOM 节点的 ref。
 
-为了解决这个问题，首先，找到你想获得 ref 的组件：
+为了解决这个问题，首先，找到想获得 ref 的组件：
 
 ```js
 export default function MyInput({ value, onChange }) {
@@ -593,4 +593,4 @@ export default MyInput;
 
 最后，父级组件就可以得到它的 ref。
 
-阅读 [访问另一个组件的 DOM 节点](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes) 了解更多信息。
+阅读 [访问另一个组件的 DOM 节点](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes) 以了解更多信息。