docs(cn): translate reference/rules/rules-of-hooks.md into Chinese

Author: fsen-capricorn

src/content/reference/rules/rules-of-hooks.md

@@ -1,48 +1,48 @@
 ---
-title: Rules of Hooks
+title: Hooks 规则
 ---
 
 <Intro>
-Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
+Hooks 是通过 JavaScript 函数定义的, 但它们代表了一种特殊的可重用 UI 逻辑，并且对它们的调用位置有限制。
 </Intro>
 
 <InlineToc />
 
 ---
 
-##  Only call Hooks at the top level {/*only-call-hooks-at-the-top-level*/}
+##  只在顶层调用 Hooks {/*only-call-hooks-at-the-top-level*/}
 
-Functions whose names start with `use` are called [*Hooks*](/reference/react) in React.
+名称以 `use` 开头的函数在 React 中被称为 [*Hooks*](/reference/react)。
 
-**Don’t call Hooks inside loops, conditions, nested functions, or `try`/`catch`/`finally` blocks.** Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
+**不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hooks ** 相反，你应该在 React 函数的顶层使用 Hooks ，并且在任何提前返回之前。你只能在 React 函数组件中调用 Hooks ：
 
-* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component).
-* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks).
+* ✅ 在[函数组件](/learn/your-first-component)的顶层调用它们。
+* ✅ 在[自定义 Hooks ](/learn/reusing-logic-with-custom-hooks)的顶层调用它们。
 
 ```js{2-3,8-9}
 function Counter() {
-  // ✅ Good: top-level in a function component
+  // ✅ Good: 在函数组件顶层
   const [count, setCount] = useState(0);
   // ...
 }
 
 function useWindowWidth() {
-  // ✅ Good: top-level in a custom Hook
+  // ✅ Good: 在自定义 Hooks 顶层
   const [width, setWidth] = useState(window.innerWidth);
   // ...
 }
 ```
 
-It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example:
+在其他任何情况下调用以 `use` 开头的 Hooks 是不支持的，例如：
 
-* 🔴 Do not call Hooks inside conditions or loops.
-* 🔴 Do not call Hooks after a conditional `return` statement.
-* 🔴 Do not call Hooks in event handlers.
-* 🔴 Do not call Hooks in class components.
-* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
-* 🔴 Do not call Hooks inside `try`/`catch`/`finally` blocks.
+* 🔴 不要在条件或循环中调用 Hooks 。
+* 🔴 不要在条件 `return` 语句之后调用 Hooks 。
+* 🔴 不要在事件处理程序中调用 Hooks 。
+* 🔴 不要在类组件中调用 Hooks 。
+* 🔴 不要在传递给 `useMemo` 、`useReducer` 或 `useEffect` 的函数内部调用 Hooks 。
+* 🔴 不要在 `try`/`catch`/`finally` 块中调用 Hooks 。
 
-If you break these rules, you might see this error.
+如果你违反了这些规则，你可能会看到以下错误：
 
 ```js{3-4,11-12,20-21}
 function Bad({ cond }) {
@@ -105,24 +105,24 @@ function Bad() {
 }
 ```
 
-You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes.
+你可以使用 [`eslint-plugin-react-hooks` 插件](https://www.npmjs.com/package/eslint-plugin-react-hooks) 来捕捉这些错误。
 
 <Note>
 
-[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
+[自定义 Hooks](/learn/reusing-logic-with-custom-hooks) *可以* 调用其他 Hooks （这就是它们的目的）。因为自定义 Hooks 也只应该在函数组件渲染时被调用。
 
 </Note>
 
 ---
 
-## Only call Hooks from React functions {/*only-call-hooks-from-react-functions*/}
+## 只在 React 函数中调用 Hooks {/*only-call-hooks-from-react-functions*/}
 
-Don’t call Hooks from regular JavaScript functions. Instead, you can:
+不要在常规 JavaScript 函数中调用 Hooks 。相反，你可以：
 
-✅ Call Hooks from React function components.
-✅ Call Hooks from [custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component).
+✅ 在 React 函数组件中调用 Hooks 。
+✅ 在 [自定义 Hooks ](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) 中调用 Hooks 。
 
-By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
+遵循这个规则，你可以确保组件中的所有有状态逻辑在其源代码中清晰可见。
 
 ```js {2,5}
 function FriendList() {