From f4bf671d0441633e976ef5fa4b22aec7992fbdca Mon Sep 17 00:00:00 2001
From: sereinDS <46836745+sereinDS@users.noreply.github.com>
Date: Sat, 5 Apr 2025 11:04:54 +0800
Subject: [PATCH 1/3] Update react-calls-components-and-hooks.md

---
 .../rules/react-calls-components-and-hooks.md  | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/content/reference/rules/react-calls-components-and-hooks.md b/src/content/reference/rules/react-calls-components-and-hooks.md
index b76960b73a..b68fd98e81 100644
--- a/src/content/reference/rules/react-calls-components-and-hooks.md
+++ b/src/content/reference/rules/react-calls-components-and-hooks.md
@@ -17,13 +17,13 @@ React 必须决定 [在渲染过程中](/reference/rules/components-and-hooks-mu
 
 ```js {2}
 function BlogPost() {
-  return <Layout><Article /></Layout>; // ✅ Good: Only use components in JSX
+  return <Layout><Article /></Layout>; // ✅ 正确的：只在 JSX 中使用组件
 }
 ```
 
 ```js {2}
 function BlogPost() {
-  return <Layout>{Article()}</Layout>; // 🔴 Bad: Never call them directly
+  return <Layout>{Article()}</Layout>; // 🔴 错误的：不要直接调用组件函数
 }
 ```
 
@@ -53,7 +53,7 @@ Hook 应当尽可能保持“静态”。这意味着你不应该动态地改变
 
 ```js {2}
 function ChatInput() {
-  const useDataWithLogging = withLogging(useData); // 🔴 Bad: don't write higher order Hooks
+  const useDataWithLogging = withLogging(useData); // 🔴 错误的：不要编写高阶 Hook
   const data = useDataWithLogging();
 }
 ```
@@ -62,11 +62,11 @@ Hook 应该是不可变的，不应被动态改变。与其动态地改变 Hook
 
 ```js {2,6}
 function ChatInput() {
-  const data = useDataWithLogging(); // ✅ Good: Create a new version of the Hook
+  const data = useDataWithLogging(); // ✅ 正确的：创建一个新的 Hook
 }
 
 function useDataWithLogging() {
-  // ... Create a new version of the Hook and inline the logic here
+  // ... 创建一个新的 Hook，并将逻辑直接内联到这里
 }
 ```
 
@@ -76,7 +76,7 @@ Hook 也不应该被动态使用，例如，不应该通过将 Hook 作为值传
 
 ```js {2}
 function ChatInput() {
-  return <Button useData={useDataWithLogging} /> // 🔴 Bad: don't pass Hooks as props
+  return <Button useData={useDataWithLogging} /> // 🔴 错误的：不要通过 props 传递 Hook
 }
 ```
 
@@ -88,14 +88,12 @@ function ChatInput() {
 }
 
 function Button() {
-  const data = useDataWithLogging(); // ✅ Good: Use the Hook directly
+  const data = useDataWithLogging(); // ✅ 正确的：直接使用 Hook
 }
 
 function useDataWithLogging() {
-  // If there's any conditional logic to change the Hook's behavior, it should be inlined into
-  // the Hook
+  // 如果有任何条件逻辑需要改变 Hook 的行为，应将其直接内联到 Hook 中
 }
 ```
 
 这样，`<Button />` 组件更容易理解也更易于调试。当 Hook 以动态方式使用时，会大大增加应用的复杂性，并妨碍局部推理，这从长远来看会降低团队的生产力。它还更容易意外地违反 [Hook 的规则](/reference/rules/rules-of-hooks)，即 Hook 不应该被条件性地调用。如果你发现自己需要为测试而模拟组件，最好是模拟服务器返回以响应预设数据。如果可能，通常进行端到端测试你的应用是更有效的方法。
-

From d253dc08fadfa5cf677145b03d120dc3bbe146aa Mon Sep 17 00:00:00 2001
From: Xavi Lee <xavilee2002@outlook.com>
Date: Sun, 6 Apr 2025 08:15:22 +0800
Subject: [PATCH 2/3] Update
 src/content/reference/rules/react-calls-components-and-hooks.md

---
 src/content/reference/rules/react-calls-components-and-hooks.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/content/reference/rules/react-calls-components-and-hooks.md b/src/content/reference/rules/react-calls-components-and-hooks.md
index b68fd98e81..a587590771 100644
--- a/src/content/reference/rules/react-calls-components-and-hooks.md
+++ b/src/content/reference/rules/react-calls-components-and-hooks.md
@@ -93,6 +93,7 @@ function Button() {
 
 function useDataWithLogging() {
   // 如果有任何条件逻辑需要改变 Hook 的行为，应将其直接内联到 Hook 中
+  
 }
 ```
 

From a1922d94b1a775734393ab46f6400d42a283a468 Mon Sep 17 00:00:00 2001
From: Xavi Lee <xavilee2002@outlook.com>
Date: Sun, 6 Apr 2025 08:16:08 +0800
Subject: [PATCH 3/3] Update
 src/content/reference/rules/react-calls-components-and-hooks.md

---
 src/content/reference/rules/react-calls-components-and-hooks.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/content/reference/rules/react-calls-components-and-hooks.md b/src/content/reference/rules/react-calls-components-and-hooks.md
index a587590771..a5472cc5b0 100644
--- a/src/content/reference/rules/react-calls-components-and-hooks.md
+++ b/src/content/reference/rules/react-calls-components-and-hooks.md
@@ -98,3 +98,4 @@ function useDataWithLogging() {
 ```
 
 这样，`<Button />` 组件更容易理解也更易于调试。当 Hook 以动态方式使用时，会大大增加应用的复杂性，并妨碍局部推理，这从长远来看会降低团队的生产力。它还更容易意外地违反 [Hook 的规则](/reference/rules/rules-of-hooks)，即 Hook 不应该被条件性地调用。如果你发现自己需要为测试而模拟组件，最好是模拟服务器返回以响应预设数据。如果可能，通常进行端到端测试你的应用是更有效的方法。
+