docs(cn): translate reference/react/hooks into Chinese (#1371)

src/content/reference/react/hooks.md

@@ -1,23 +1,23 @@
 ---
-title: "Built-in React Hooks"
+title: "React 内置 Hook"
 ---
 
 <Intro>
 
-*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
+**Hook** 可以帮助在组件中使用不同的 React 功能。你可以使用内置的 Hook 或使用自定义 Hook。本页列出了 React 中所有内置 Hook。
 
 </Intro>
 
 ---
 
-## State Hooks {/*state-hooks*/}
+## State Hook {/*state-hooks*/}
 
-*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
+状态帮助组件 [“记住”用户输入的信息](/learn/state-a-components-memory)。例如，一个表单组件可以使用状态存储输入值，而一个图像库组件可以使用状态存储所选的图像索引。
 
-To add state to a component, use one of these Hooks:
+使用以下 Hook 以向组件添加状态：
 
-* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
-* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+* 使用 [`useState`](/reference/react/useState) 声明可以直接更新的状态变量。
+* 使用 [`useReducer`](/reference/react/useReducer) 在 [reducer 函数](/learn/extracting-state-logic-into-a-reducer) 中声明带有更新逻辑的 state 变量。
 
 ```js
 function ImageGallery() {
@@ -27,11 +27,11 @@ function ImageGallery() {
 
 ---
 
-## Context Hooks {/*context-hooks*/}
+## Context Hook {/*context-hooks*/}
 
-*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
+上下文帮助组件 [从祖先组件接收信息，而无需将其作为 props 传递](/learn/passing-props-to-a-component)。例如，应用程序的顶层组件可以借助上下文将 UI 主题传递给所有下方的组件，无论这些组件层级有多深。
 
-* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
+* 使用 [`useContext`](/reference/react/useContext) 读取订阅上下文。
 
 ```js
 function Button() {
@@ -41,12 +41,12 @@ function Button() {
 
 ---
 
-## Ref Hooks {/*ref-hooks*/}
+## Ref Hook {/*ref-hooks*/}
 
-*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
+ref 允许组件 [保存一些不用于渲染的信息](/learn/referencing-values-with-refs)，比如 DOM 节点或 timeout ID。与状态不同，更新 ref 不会重新渲染组件。ref 是从 React 范例中的“脱围机制”。当需要与非 React 系统如浏览器内置 API 一同工作时，ref 将会非常有用。
 
-* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
-* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
+* 使用 [`useRef`](/reference/react/useRef) 声明 ref。你可以在其中保存任何值，但最常用于保存 DOM 节点。
+* 使用 [`useImperativeHandle`](/reference/react/useImperativeHandle) 自定义从组件中暴露的 ref，但是很少使用。
 
 ```js
 function Form() {
@@ -56,11 +56,11 @@ function Form() {
 
 ---
 
-## Effect Hooks {/*effect-hooks*/}
+## Effect Hook {/*effect-hooks*/}
 
-*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
+Effect 允许组件 [连接到外部系统并与之同步](/learn/synchronizing-with-effects)。这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的小部件以及其他非 React 代码。
 
-* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
+* 使用 [`useEffect`](/reference/react/useEffect) 将组件连接到外部系统。
 
 ```js
 function ChatRoom({ roomId }) {
@@ -72,23 +72,23 @@ function ChatRoom({ roomId }) {
   // ...
 ```
 
-Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+Effect 是从 React 范例中的“脱围机制”。避免使用 Effect 协调应用程序的数据流。如果不需要与外部系统交互，那么 [可能不需要 Effect](/learn/you-might-not-need-an-effect)。
 
-There are two rarely used variations of `useEffect` with differences in timing:
+`useEffect` 有两个很少使用的变换形式，它们在执行时机有所不同：
 
-* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
-* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) 在浏览器重新绘制屏幕前执行，可以在此处测量布局。
+* [`useInsertionEffect`](/reference/react/useInsertionEffect) 在 React 对 DOM 进行更改之前触发，库可以在此处插入动态 CSS。
 
 ---
 
-## Performance Hooks {/*performance-hooks*/}
+## 性能 Hook {/*performance-hooks*/}
 
-A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
+优化重新渲染性能的一种常见方法是跳过不必要的工作。例如，可以告诉 React 重用缓存的计算结果，或者如果数据自上次渲染以来没有更改，则跳过重新渲染。
 
-To skip calculations and unnecessary re-rendering, use one of these Hooks:
+可以使用以下 Hook 跳过计算和不必要的重新渲染：
 
-- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
-- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
+- 使用 [`useMemo`](/reference/react/useMemo) 缓存计算代价昂贵的计算结果。
+- 使用 [`useCallback`](/reference/react/useCallback) 将函数传递给优化组件之前缓存函数定义。
 
 ```js
 function TodoList({ todos, tab, theme }) {
@@ -97,22 +97,22 @@ function TodoList({ todos, tab, theme }) {
 }
 ```
 
-Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
+有时由于屏幕确实需要更新，无法跳过重新渲染。在这种情况下，可以通过将必须同步的阻塞更新（比如使用输入法输入内容）与不需要阻塞用户界面的非阻塞更新（比如更新图表）分离以提高性能。
 
-To prioritize rendering, use one of these Hooks:
+使用以下 Hook 处理渲染优先级：
 
-- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
-- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
+- [`useTransition`](/reference/react/useTransition) 允许将状态转换标记为非阻塞，并允许其他更新中断它。
+- [`useDeferredValue`](/reference/react/useDeferredValue) 允许延迟更新 UI 的非关键部分，以让其他部分先更新。
 
 ---
 
-## Resource Hooks {/*resource-hooks*/}
+## 资源 Hook {/*resource-hooks*/}
 
-*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context.
+资源可以被组件访问，而无需将它们作为状态的一部分。例如，组件可以从 Promise 中读取消息，或从上下文中读取样式信息。
 
-To read a value from a resource, use this Hook:
+使用以下 Hook 以从资源中读取值：
 
-- [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+- [`use`](/reference/react/use) 允许读取像 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 或 [上下文](/learn/passing-data-deeply-with-context) 这样的资源的值。
 
 ```js
 function MessageComponent({ messagePromise }) {
@@ -124,16 +124,16 @@ function MessageComponent({ messagePromise }) {
 
 ---
 
-## Other Hooks {/*other-hooks*/}
+## 其他 Hook {/*other-hooks*/}
 
-These Hooks are mostly useful to library authors and aren't commonly used in the application code.
+这些 Hook 主要适用于库作者，不常在应用程序代码中使用。
 
-- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
-- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
-- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
+- 使用 [`useDebugValue`](/reference/react/useDebugValue) 自定义 React 开发者工具为自定义 Hook 添加的标签。
+- 使用 [`useId`](/reference/react/useId) 将唯一的 ID 与组件相关联，其通常与可访问性 API 一起使用。
+- 使用 [`useSyncExternalStore`](/reference/react/useSyncExternalStore) 订阅外部 store。
 
 ---
 
-## Your own Hooks {/*your-own-hooks*/}
+## 自定义 Hook {/*your-own-hooks*/}
 
-You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
+开发者可以 [自定义 Hook](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) 作为 JavaScript 函数。

src/sidebarReference.json

@@ -11,7 +11,7 @@
       "path": "/reference/react"
     },
     {
-      "title": "Hooks",
+      "title": "Hook",
       "path": "/reference/react/hooks",
       "routes": [
         {