From d24be7062be927cb65c0a9814b49b9e52e735ca4 Mon Sep 17 00:00:00 2001 From: fsen Date: Fri, 5 Apr 2024 19:52:23 +0800 Subject: [PATCH 1/8] docs(cn): translate reference/rules/rules-of-hooks.md into Chinese --- src/content/reference/rules/rules-of-hooks.md | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index ecaef7c60d..b481bd6ff8 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -1,48 +1,48 @@ --- -title: Rules of Hooks +title: Hooks 规则 --- -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 逻辑，并且对它们的调用位置有限制。 --- -## 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) 来捕捉这些错误。 -[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 也只应该在函数组件渲染时被调用。 --- -## 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() { From 56098b37b85bd2d62c71c7df0ffa0833c04f1123 Mon Sep 17 00:00:00 2001 From: fsen Date: Fri, 5 Apr 2024 19:58:30 +0800 Subject: [PATCH 2/8] docs(cn): translate reference/rules/rules-of-hooks.md into Chinese --- src/content/reference/rules/rules-of-hooks.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index b481bd6ff8..b8ebcd12e8 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -3,18 +3,18 @@ title: Hooks 规则 --- -Hooks 是通过 JavaScript 函数定义的, 但它们代表了一种特殊的可重用 UI 逻辑，并且对它们的调用位置有限制。 +Hooks 是通过 JavaScript 函数定义的, 代表了一种特殊的可重用的 UI 逻辑，它们的调用位置有一定的限制。 --- -## 只在顶层调用 Hooks {/*only-call-hooks-at-the-top-level*/} +## 只能在顶层调用 Hooks {/*only-call-hooks-at-the-top-level*/} -名称以 `use` 开头的函数在 React 中被称为 [*Hooks*](/reference/react)。 +名称以 `use` 开头的函数在 React 中被称为 [*Hooks*](/reference/react) 。 -**不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hooks ** 相反，你应该在 React 函数的顶层使用 Hooks ，并且在任何提前返回之前。你只能在 React 函数组件中调用 Hooks ： +**不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hooks ** 相反，你应该在 React 函数的顶层使用 Hooks ，并且在任何提前返回之前。且你只能在 React 函数组件中调用 Hooks ： * ✅ 在[函数组件](/learn/your-first-component)的顶层调用它们。 * ✅ 在[自定义 Hooks ](/learn/reusing-logic-with-custom-hooks)的顶层调用它们。 @@ -109,7 +109,7 @@ function Bad() { -[自定义 Hooks](/learn/reusing-logic-with-custom-hooks) *可以* 调用其他 Hooks （这就是它们的目的）。因为自定义 Hooks 也只应该在函数组件渲染时被调用。 +[自定义 Hooks](/learn/reusing-logic-with-custom-hooks) *可以* 调用其他 Hooks （这就是它们的目的）。因为自定义 Hooks 也只能在函数组件渲染时被调用。 From 4c43bb6a97a226dfe4818f11b4154aa90e6998fe Mon Sep 17 00:00:00 2001 From: fsen Date: Fri, 5 Apr 2024 20:06:30 +0800 Subject: [PATCH 3/8] docs(cn): translate reference/rules/rules-of-hooks.md into Chinese --- src/content/reference/rules/rules-of-hooks.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index b8ebcd12e8..f49fa639f6 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -3,21 +3,21 @@ title: Hooks 规则 --- -Hooks 是通过 JavaScript 函数定义的, 代表了一种特殊的可重用的 UI 逻辑，它们的调用位置有一定的限制。 +Hooks 是通过 JavaScript 函数定义的, 但它们代表了一种特殊的可重用的 UI 逻辑，并且对它们的调用位置有限制。 --- -## 只能在顶层调用 Hooks {/*only-call-hooks-at-the-top-level*/} +## 只在顶层调用 Hooks {/*only-call-hooks-at-the-top-level*/} 名称以 `use` 开头的函数在 React 中被称为 [*Hooks*](/reference/react) 。 -**不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hooks ** 相反，你应该在 React 函数的顶层使用 Hooks ，并且在任何提前返回之前。且你只能在 React 函数组件中调用 Hooks ： +** 不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hooks ** 相反，你应该在 React 函数的顶层调用 Hooks ，并且在任何提前返回之前。你只能在 React 渲染函数组件时调用 Hooks ： -* ✅ 在[函数组件](/learn/your-first-component)的顶层调用它们。 -* ✅ 在[自定义 Hooks ](/learn/reusing-logic-with-custom-hooks)的顶层调用它们。 +* ✅ 在[函数组件](/learn/your-first-component)的顶层调用 Hooks 。 +* ✅ 在[自定义 Hooks ](/learn/reusing-logic-with-custom-hooks)的顶层调用 Hooks 。 ```js{2-3,8-9} function Counter() { @@ -117,7 +117,7 @@ function Bad() { ## 只在 React 函数中调用 Hooks {/*only-call-hooks-from-react-functions*/} -不要在常规 JavaScript 函数中调用 Hooks 。相反，你可以： +不要在常规的 JavaScript 函数中调用 Hooks 。相反，你可以： ✅ 在 React 函数组件中调用 Hooks 。 ✅ 在 [自定义 Hooks ](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) 中调用 Hooks 。 From d5bd2e82152bc70d5a7ba9df7b7a36c510ec33c2 Mon Sep 17 00:00:00 2001 From: fsen Date: Tue, 23 Apr 2024 22:59:47 +0800 Subject: [PATCH 4/8] docs(cn): translate reference/rules/rules-of-hooks.md into Chinese MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修正不规范的翻译格式 --- src/content/reference/rules/rules-of-hooks.md | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index f49fa639f6..cbc447f0dd 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -1,23 +1,23 @@ --- -title: Hooks 规则 +title: Hook 规则 --- -Hooks 是通过 JavaScript 函数定义的, 但它们代表了一种特殊的可重用的 UI 逻辑，并且对它们的调用位置有限制。 +Hook 是通过 JavaScript 函数定义的, 但它们代表了一种特殊的可重用的 UI 逻辑，并且对它们的调用位置有限制。 --- -## 只在顶层调用 Hooks {/*only-call-hooks-at-the-top-level*/} +## 只在顶层调用 Hook {/*only-call-hooks-at-the-top-level*/} -名称以 `use` 开头的函数在 React 中被称为 [*Hooks*](/reference/react) 。 +名称以 `use` 开头的函数在 React 中被称为 **[Hook](/reference/react)**。 -** 不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hooks ** 相反，你应该在 React 函数的顶层调用 Hooks ，并且在任何提前返回之前。你只能在 React 渲染函数组件时调用 Hooks ： +**不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hook** 相反，你应该在 React 函数的顶层调用 Hook，并且在任何提前返回之前。你只能在 React 渲染函数组件时调用 Hook： -* ✅ 在[函数组件](/learn/your-first-component)的顶层调用 Hooks 。 -* ✅ 在[自定义 Hooks ](/learn/reusing-logic-with-custom-hooks)的顶层调用 Hooks 。 +* ✅ 在[函数组件](/learn/your-first-component)的顶层调用 Hook。 +* ✅ 在[自定义 Hook](/learn/reusing-logic-with-custom-hooks)的顶层调用 Hook。 ```js{2-3,8-9} function Counter() { @@ -33,14 +33,14 @@ function useWindowWidth() { } ``` -在其他任何情况下调用以 `use` 开头的 Hooks 是不支持的，例如： +在其他任何情况下调用以 `use` 开头的 Hook 是不支持的，例如： -* 🔴 不要在条件或循环中调用 Hooks 。 -* 🔴 不要在条件 `return` 语句之后调用 Hooks 。 -* 🔴 不要在事件处理程序中调用 Hooks 。 -* 🔴 不要在类组件中调用 Hooks 。 -* 🔴 不要在传递给 `useMemo` 、`useReducer` 或 `useEffect` 的函数内部调用 Hooks 。 -* 🔴 不要在 `try`/`catch`/`finally` 块中调用 Hooks 。 +* 🔴 不要在条件或循环中调用 Hook。 +* 🔴 不要在条件 `return` 语句之后调用 Hook。 +* 🔴 不要在事件处理程序中调用 Hook。 +* 🔴 不要在类组件中调用 Hook。 +* 🔴 不要在传递给 `useMemo`、`useReducer` 或 `useEffect` 的函数内部调用 Hook。 +* 🔴 不要在 `try`/`catch`/`finally` 块中调用 Hook。 如果你违反了这些规则，你可能会看到以下错误： @@ -109,18 +109,18 @@ function Bad() { -[自定义 Hooks](/learn/reusing-logic-with-custom-hooks) *可以* 调用其他 Hooks （这就是它们的目的）。因为自定义 Hooks 也只能在函数组件渲染时被调用。 +[自定义 Hook](/learn/reusing-logic-with-custom-hooks) **可以** 调用其他 Hook（这就是它们的目的）。因为自定义 Hook 也只能在函数组件渲染时被调用。 --- -## 只在 React 函数中调用 Hooks {/*only-call-hooks-from-react-functions*/} +## 只在 React 函数中调用 Hook {/*only-call-hooks-from-react-functions*/} -不要在常规的 JavaScript 函数中调用 Hooks 。相反，你可以： +不要在常规的 JavaScript 函数中调用 Hook。相反，你可以： -✅ 在 React 函数组件中调用 Hooks 。 -✅ 在 [自定义 Hooks ](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) 中调用 Hooks 。 +✅ 在 React 函数组件中调用 Hook。 +✅ 在 [自定义 Hook](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) 中调用 Hook。 遵循这个规则，你可以确保组件中的所有有状态逻辑在其源代码中清晰可见。 From 76b0960e92246d2c21f42e5994b1216a5462857c Mon Sep 17 00:00:00 2001 From: fsen Date: Tue, 23 Apr 2024 23:04:09 +0800 Subject: [PATCH 5/8] docs(cn): translate reference/rules/rules-of-hooks.md into Chinese MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修正符号 --- src/content/reference/rules/rules-of-hooks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index cbc447f0dd..f3131d27e6 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -3,7 +3,7 @@ title: Hook 规则 --- -Hook 是通过 JavaScript 函数定义的, 但它们代表了一种特殊的可重用的 UI 逻辑，并且对它们的调用位置有限制。 +Hook 是通过 JavaScript 函数定义的，但它们代表了一种特殊的可重用的 UI 逻辑，并且对它们的调用位置有限制。 From 28de3c45a93c63c4f79dba9c48a95d94b7551df3 Mon Sep 17 00:00:00 2001 From: fsen Date: Tue, 23 Apr 2024 23:05:53 +0800 Subject: [PATCH 6/8] docs(cn): translate reference/rules/rules-of-hooks.md into Chinese MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修正不规范翻译 --- src/content/reference/rules/rules-of-hooks.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index f3131d27e6..4338263f1a 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -14,10 +14,10 @@ Hook 是通过 JavaScript 函数定义的，但它们代表了一种特殊的可 名称以 `use` 开头的函数在 React 中被称为 **[Hook](/reference/react)**。 -**不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hook** 相反，你应该在 React 函数的顶层调用 Hook，并且在任何提前返回之前。你只能在 React 渲染函数组件时调用 Hook： +**不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hook**。相反，你应该在 React 函数的顶层调用 Hook，并且在任何提前返回之前。你只能在 React 渲染函数组件时调用 Hook： -* ✅ 在[函数组件](/learn/your-first-component)的顶层调用 Hook。 -* ✅ 在[自定义 Hook](/learn/reusing-logic-with-custom-hooks)的顶层调用 Hook。 +* ✅ 在 [函数组件](/learn/your-first-component) 的顶层调用 Hook。 +* ✅ 在 [自定义 Hook](/learn/reusing-logic-with-custom-hooks) 的顶层调用 Hook。 ```js{2-3,8-9} function Counter() { From 255d33af239e26dbff4da40a47f30a707d0528c7 Mon Sep 17 00:00:00 2001 From: fsen Date: Sun, 28 Apr 2024 22:58:12 +0800 Subject: [PATCH 7/8] docs(cn): translate reference/rules/rules-of-hooks.md into Chinese MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 优化翻译内容 --- src/content/reference/rules/rules-of-hooks.md | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index 4338263f1a..8e8a63b00c 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -1,9 +1,9 @@ --- -title: Hook 规则 +title: Hook 的规则 --- -Hook 是通过 JavaScript 函数定义的，但它们代表了一种特殊的可重用的 UI 逻辑，并且对它们的调用位置有限制。 +Hook 是使用 JavaScript 函数定义的，但它们代表了一种特殊的可重用的 UI 逻辑，并且对它们可以被调用的位置有限制。 @@ -12,12 +12,12 @@ Hook 是通过 JavaScript 函数定义的，但它们代表了一种特殊的可 ## 只在顶层调用 Hook {/*only-call-hooks-at-the-top-level*/} -名称以 `use` 开头的函数在 React 中被称为 **[Hook](/reference/react)**。 +在 React 中，以 `use` 开头命名的函数被称为 **[Hook](/reference/react)**。 -**不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块中调用 Hook**。相反，你应该在 React 函数的顶层调用 Hook，并且在任何提前返回之前。你只能在 React 渲染函数组件时调用 Hook： +**不要在循环、条件语句、嵌套函数或 `try`/`catch`/`finally` 代码块中调用 Hook**。相反，你应该在 React 函数组件的顶层使用 Hook，且在任何提前返回之前。你只能在 React 渲染函数组件时调用 Hook： -* ✅ 在 [函数组件](/learn/your-first-component) 的顶层调用 Hook。 -* ✅ 在 [自定义 Hook](/learn/reusing-logic-with-custom-hooks) 的顶层调用 Hook。 +* ✅ 在 [函数组件主体](/learn/your-first-component) 的顶层调用它们。 +* ✅ 在 [自定义 Hook 主体](/learn/reusing-logic-with-custom-hooks) 的顶层调用它们。 ```js{2-3,8-9} function Counter() { @@ -33,14 +33,14 @@ function useWindowWidth() { } ``` -在其他任何情况下调用以 `use` 开头的 Hook 是不支持的，例如： +不支持在其他任何情况下调用以 `use` 开头的 Hook，例如： -* 🔴 不要在条件或循环中调用 Hook。 -* 🔴 不要在条件 `return` 语句之后调用 Hook。 -* 🔴 不要在事件处理程序中调用 Hook。 +* 🔴 不要在条件语句或循环中调用 Hook。 +* 🔴 不要在条件性的 `return` 语句之后调用 Hook。 +* 🔴 不要在事件处理函数中调用 Hook。 * 🔴 不要在类组件中调用 Hook。 * 🔴 不要在传递给 `useMemo`、`useReducer` 或 `useEffect` 的函数内部调用 Hook。 -* 🔴 不要在 `try`/`catch`/`finally` 块中调用 Hook。 +* 🔴 不要在 `try`/`catch`/`finally` 代码块中调用 Hook。 如果你违反了这些规则，你可能会看到以下错误： @@ -105,24 +105,24 @@ function Bad() { } ``` -你可以使用 [`eslint-plugin-react-hooks` 插件](https://www.npmjs.com/package/eslint-plugin-react-hooks) 来捕捉这些错误。 +你可以使用 [`eslint-plugin-react-hooks` 插件](https://www.npmjs.com/package/eslint-plugin-react-hooks) 来捕获这些错误。 -[自定义 Hook](/learn/reusing-logic-with-custom-hooks) **可以** 调用其他 Hook（这就是它们的目的）。因为自定义 Hook 也只能在函数组件渲染时被调用。 +[自定义 Hook](/learn/reusing-logic-with-custom-hooks) **可以** 调用其他 Hook（这正是它们的主要目的）。之所以可以这样做，是因为自定义 Hook 也应该只在函数组件渲染时被调用。 --- -## 只在 React 函数中调用 Hook {/*only-call-hooks-from-react-functions*/} +## 仅在 React 函数中调用 Hook {/*only-call-hooks-from-react-functions*/} 不要在常规的 JavaScript 函数中调用 Hook。相反，你可以： ✅ 在 React 函数组件中调用 Hook。 ✅ 在 [自定义 Hook](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) 中调用 Hook。 -遵循这个规则，你可以确保组件中的所有有状态逻辑在其源代码中清晰可见。 +遵循这条规则，你可以确保组件中的所有状态逻辑在其源代码中清晰可见。 ```js {2,5} function FriendList() { From 3664e876263767bfe07ae3800c3402740f694f14 Mon Sep 17 00:00:00 2001 From: fsen Date: Mon, 29 Apr 2024 00:01:38 +0800 Subject: [PATCH 8/8] docs(cn): translate reference/rules/rules-of-hooks.md into Chinese MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 优化翻译 --- src/content/reference/rules/rules-of-hooks.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index 8e8a63b00c..c2434f7217 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -21,13 +21,13 @@ Hook 是使用 JavaScript 函数定义的，但它们代表了一种特殊的可 ```js{2-3,8-9} function Counter() { - // ✅ Good: 在函数组件顶层 + // ✅ 正确的：在函数组件顶层 const [count, setCount] = useState(0); // ... } function useWindowWidth() { - // ✅ Good: 在自定义 Hooks 顶层 + // ✅ 正确的：在自定义 Hooks 顶层 const [width, setWidth] = useState(window.innerWidth); // ... } @@ -47,7 +47,7 @@ function useWindowWidth() { ```js{3-4,11-12,20-21} function Bad({ cond }) { if (cond) { - // 🔴 Bad: inside a condition (to fix, move it outside!) + // 🔴 错误的：在条件语句内部（要修复这个问题，将其移到外部！） const theme = useContext(ThemeContext); } // ... @@ -55,7 +55,7 @@ function Bad({ cond }) { function Bad() { for (let i = 0; i < 10; i++) { - // 🔴 Bad: inside a loop (to fix, move it outside!) + // 🔴 错误的：在循环语句内部（要修复这个问题，将其移到外部！） const theme = useContext(ThemeContext); } // ... @@ -65,14 +65,14 @@ function Bad({ cond }) { if (cond) { return; } - // 🔴 Bad: after a conditional return (to fix, move it before the return!) + // 🔴 错误的：在条件性 return 语句之后（要修复这个问题，将其移到 return 之前！） const theme = useContext(ThemeContext); // ... } function Bad() { function handleClick() { - // 🔴 Bad: inside an event handler (to fix, move it outside!) + // 🔴 错误的：在事件处理函数内部（要修复这个问题，将其移到 return 之前！） const theme = useContext(ThemeContext); } // ... @@ -80,7 +80,7 @@ function Bad() { function Bad() { const style = useMemo(() => { - // 🔴 Bad: inside useMemo (to fix, move it outside!) + // 🔴 错误的：在 useMemo 内部调用（要修复这个问题，将其移到外部！） const theme = useContext(ThemeContext); return createStyle(theme); }); @@ -89,7 +89,7 @@ function Bad() { class Bad extends React.Component { render() { - // 🔴 Bad: inside a class component (to fix, write a function component instead of a class!) + // 🔴 错误的：在类组件内部调用（要修复这个问题，改写为函数组件！） useEffect(() => {}) // ... } @@ -97,7 +97,7 @@ class Bad extends React.Component { function Bad() { try { - // 🔴 Bad: inside try/catch/finally block (to fix, move it outside!) + // 🔴 错误的：在 try、catch、finally 代码块内部调用（要修复这个问题，将其移到外部！） const [x, setX] = useState(0); } catch { const [x, setX] = useState(1);