i18n

Author: yangshun

questions/explain-one-way-data-flow-of-react-and-its-benefits/en-US.langnostic.json

@@ -24,7 +24,7 @@
         "98a50d6b",
         "f9866dae",
         "1f4770e5",
-        "5f3a5413"
+        "db46a0c"
       ]
     },
     "targets": {
@@ -47,7 +47,7 @@
         "98a50d6b",
         "f9866dae",
         "1f4770e5",
-        "5f3a5413"
+        "db46a0c"
       ]
     }
   }

questions/explain-one-way-data-flow-of-react-and-its-benefits/zh-CN.mdx

@@ -73,6 +73,6 @@ export default ChildComponent;
 
 ## 延伸阅读
 
-* [React 组件和 props 文档](https://react.dev/learn/passing-props-to-a-component)
+* [React 组件和 Props 文档](https://react.dev/learn/passing-props-to-a-component)
 * [React 状态文档](https://react.dev/learn/state-a-components-memory)
 * [React 提升状态文档](https://react.dev/learn/sharing-state-between-components)

questions/explain-server-side-rendering-of-react-applications-and-its-benefits/en-US.langnostic.json

@@ -27,7 +27,7 @@
         "4fddd280",
         "7e9fbf0a",
         "1f4770e5",
-        "b9da6017"
+        "a7a5cfdf"
       ]
     },
     "targets": {
@@ -53,7 +53,7 @@
         "4fddd280",
         "7e9fbf0a",
         "1f4770e5",
-        "b9da6017"
+        "a7a5cfdf"
       ]
     }
   }

questions/explain-server-side-rendering-of-react-applications-and-its-benefits/zh-CN.mdx

@@ -64,4 +64,6 @@ export default Home;
 
 ## 延伸阅读
 
+* [Next.js 文档](https://nextjs.org/docs)
+* [React 服务器组件](https://react.dev/reference/rsc/server-components)
 * [React 中的服务器端渲染](https://react.dev/reference/react-dom/server)

questions/explain-static-generation-of-react-applications-and-its-benefits/en-US.langnostic.json

@@ -28,7 +28,7 @@
         "8cc0201c",
         "6e0b9e77",
         "1f4770e5",
-        "dd0ff6d9"
+        "92d795c7"
       ]
     },
     "targets": {
@@ -55,7 +55,7 @@
         "8cc0201c",
         "6e0b9e77",
         "1f4770e5",
-        "dd0ff6d9"
+        "92d795c7"
       ]
     }
   }

questions/explain-static-generation-of-react-applications-and-its-benefits/zh-CN.mdx

@@ -78,4 +78,4 @@ export default HomePage;
 
 * [Next.js 关于静态生成的文档](https://nextjs.org/docs/basic-features/pages#static-generation-recommended)
 * [React 官方文档](https://react.dev/learn)
-* [静态网站生成器比较](https://www.staticgen.com/)
+* [静态站点生成器比较](https://www.staticgen.com/)

questions/explain-the-composition-pattern-in-react/en-US.langnostic.json

@@ -25,7 +25,7 @@
         "fb38abd3",
         "4352471d",
         "1f4770e5",
-        "4803c63c"
+        "35076104"
       ]
     },
     "targets": {
@@ -49,7 +49,7 @@
         "fb38abd3",
         "4352471d",
         "1f4770e5",
-        "4803c63c"
+        "35076104"
       ]
     }
   }

questions/explain-the-composition-pattern-in-react/zh-CN.mdx

@@ -82,5 +82,5 @@ function App() {
 
 ## 延伸阅读
 
-* [React 模式：组合](https://reactpatterns.com/#composition)
+* [React 中的组合](https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/)
 * [关于 React 组合的 Medium 文章](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

questions/explain-the-presentational-vs-container-component-pattern-in-react/en-US.langnostic.json

@@ -25,7 +25,7 @@
         "2819c383",
         "11aa9a75",
         "1f4770e5",
-        "e91c66f1"
+        "4caa2581"
       ]
     },
     "targets": {
@@ -49,7 +49,7 @@
         "2819c383",
         "11aa9a75",
         "1f4770e5",
-        "e91c66f1"
+        "4caa2581"
       ]
     }
   }

questions/explain-the-presentational-vs-container-component-pattern-in-react/zh-CN.mdx

@@ -79,6 +79,6 @@ export default connect(null, mapDispatchToProps)(ButtonContainer);
 
 ## 延伸阅读
 
-* [React 组件和 props 文档](https://react.dev/learn/passing-props-to-a-component)
-* [Dan Abramov 关于展示组件和容器组件的文章](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
-* [Redux 关于展示组件和容器组件的文档](https://redux.js.org/basics/usage-with-react#presentational-and-container-components)
+* [React documentation on components and props](https://react.dev/learn/passing-props-to-a-component)
+* [Dan Abramov's article on presentational and container components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
+* [Redux documentation on presentational and container components](https://redux.js.org/basics/usage-with-react#presentational-and-container-components)

questions/explain-what-happens-when-setstate-is-called-in-react/en-US.langnostic.json

@@ -1,55 +1,49 @@
 {
   "frontmatter": {
-    "title": "99a772ae"
+    "title": "c395a10b"
   },
   "content": {
     "source": {
       "locale": "en-US",
       "hashes": [
         "77da26a5",
-        "59b77cf6",
+        "bc93022f",
         "2a7816d0",
-        "dd3af1e8",
+        "ea57d6f1",
         "8bf1f14",
-        "47573ea3",
-        "4424d34c",
-        "ca3a9734",
-        "a1a1f686",
-        "f1b7521e",
+        "2b5b2680",
+        "56f02148",
+        "7b51019",
+        "6ddd5305",
+        "3294def3",
         "4610812b",
-        "37c0d330",
-        "af3a5231",
-        "b3d2321d",
-        "8a3c0c83",
-        "44005839",
-        "9d5627af",
-        "f69b7721",
+        "bdc4dbb4",
+        "28eb626b",
+        "9de13ed8",
+        "f1596715",
         "1f4770e5",
-        "aacf0b32"
+        "fa842b3f"
       ]
     },
     "targets": {
       "zh-CN": [
         "77da26a5",
-        "59b77cf6",
+        "bc93022f",
         "2a7816d0",
-        "dd3af1e8",
+        "ea57d6f1",
         "8bf1f14",
-        "47573ea3",
-        "4424d34c",
-        "ca3a9734",
-        "a1a1f686",
-        "f1b7521e",
+        "2b5b2680",
+        "56f02148",
+        "7b51019",
+        "6ddd5305",
+        "3294def3",
         "4610812b",
-        "37c0d330",
-        "af3a5231",
-        "b3d2321d",
-        "8a3c0c83",
-        "44005839",
-        "9d5627af",
-        "f69b7721",
+        "bdc4dbb4",
+        "28eb626b",
+        "9de13ed8",
+        "f1596715",
         "1f4770e5",
-        "aacf0b32"
+        "fa842b3f"
       ]
     }
   }

questions/explain-what-happens-when-setstate-is-called-in-react/zh-CN.mdx

@@ -1,58 +1,58 @@
 ---
-title: 解释在 React 中调用 `setState` 时会发生什么
+title: 解释在 React 中调用 `useState` 设置器函数时会发生什么
 ---
 
 ## 总结
 
-在 React 中调用 `setState` 时，它会安排对组件状态对象的更新。然后，React 将新状态与当前状态合并，并触发组件的重新渲染。此过程是异步的，这意味着状态更改可能不会立即发生。React 会批量处理多个 `setState` 调用以进行性能优化。
+当在 React 中调用 `useState` 钩子返回的设置器函数时，它会安排对组件状态值的更新。然后，React 会将组件重新渲染与新状态排队。此过程通常是异步的，并且 React 会将多个状态更新批处理在一起以提高性能。
 
 ***
 
-## 在 React 中调用 `setState` 时会发生什么
+## 调用 `useState` 设置器时会发生什么
 
 ### 状态更新调度
 
-当调用 `setState` 时，React 会安排对组件状态的更新。这意味着状态更改不会立即发生。相反，React 会将组件标记为需要更新，稍后将处理状态更改。
+当您调用 `useState` 提供的设置器函数（例如，`setCount`）时，React 会安排对该特定状态变量的更新。这不会立即发生；React 会将组件标记为需要使用更新后的状态值重新渲染。
 
 ```javascript
-this.setState({ count: this.state.count + 1 });
+const [count, setCount] = useState(0);
+// ...
+setCount(count + 1); // 安排更新以将 'count' 设置为 1
 ```
 
-### 合并状态
+### 状态替换
 
-React 将新状态与当前状态合并。`setState` 方法执行浅合并，这意味着它仅更新新状态对象中指定的属性，而保留其余属性不变。
+`useState` 设置器函数**完全替换**您提供的新值中的旧状态值。如果您的状态是一个对象，并且您只想更新一个属性，则需要手动展开旧状态并覆盖特定属性。
 
 ```javascript
-this.setState({ name: 'John' });
-// 仅更新 'name' 属性，其他状态属性保持不变
+const [user, setUser] = useState({ name: 'Anon', age: 99 });
+
+// 仅更新 name，您必须展开旧状态：
+setUser((prevState) => ({ ...prevState, name: 'John' }));
+// 如果您只是执行 setUser({ name: 'John' })，则 'age' 属性将会丢失。
 ```
 
 ### 重新渲染
 
-合并状态后，React 会触发组件的重新渲染。将调用组件的 `render` 方法，并更新虚拟 DOM。然后，React 将虚拟 DOM 与实际 DOM 进行比较，并对实际 DOM 进行必要的更新。
-
-### 异步性质
-
-`setState` 方法是异步的。React 会批量处理多个 `setState` 调用以进行性能优化。这意味着，如果您连续多次调用 `setState`，React 可能会将它们合并为单个更新。
-
-```javascript
-this.setState({ count: this.state.count + 1 });
-this.setState({ count: this.state.count + 1 });
-// React 可能会将这些更新批处理为单个更新
-```
+在安排状态更新后，React 最终将触发组件的重新渲染。函数组件主体将使用新的状态值再次执行。React 更新其虚拟 DOM，将其与之前的版本进行比较，并仅在必要时有效地更新实际 DOM。
 
-### 回调函数
+### 异步性质和批处理
 
-您可以将回调函数作为第二个参数传递给 `setState`。此函数将在状态更新且组件重新渲染后被调用。
+由 `useState` 设置器触发的状态更新通常是异步和批处理的。如果您在同一个事件处理程序或 effect 中调用多个状态设置器，React 通常会将这些更新批处理在一起，以进行单次重新渲染，从而获得更好的性能。因此，您不应该依赖状态变量在调用设置器后立即具有新值。如果新状态依赖于之前的状态，请使用函数式更新形式。
 
 ```javascript
-this.setState({ count: this.state.count + 1 }, () => {
-  console.log('状态已更新，组件已重新渲染');
-});
+// 假设 count 为 0
+setCount(count + 1); // 将更新排队到 1
+setCount(count + 1); // 仍然将 count 视为 0，再次将更新排队到 1!
+// 结果可能是 1，而不是 2
+
+// 使用函数式更新的正确方法：
+setCount((prevCount) => prevCount + 1); // 根据之前的状态将更新排队
+setCount((prevCount) => prevCount + 1); // 根据第一个的结果将另一个更新排队
+// 结果将是 2
 ```
 
 ## 延伸阅读
 
-* [React setState 文档](https://react.dev/reference/react/useState#setstate)
-* [理解 React 中的 setState](https://medium.com/@baphemot/understanding-react-setstate-a4640451865b)
-* [React 的 setState 解释](https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/)
+* [React 文档：使用状态 Hook (`useState`)](https://react.dev/reference/react/useState)
+* [React 文档：将多个状态更新排队](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state)

questions/explain-what-react-hydration-is/en-US.langnostic.json

@@ -24,7 +24,7 @@
         "b473e52c",
         "13518d3f",
         "1f4770e5",
-        "4cea244a"
+        "dab0684e"
       ]
     },
     "targets": {
@@ -47,7 +47,7 @@
         "b473e52c",
         "13518d3f",
         "1f4770e5",
-        "4cea244a"
+        "dab0684e"
       ]
     }
   }

questions/explain-what-react-hydration-is/zh-CN.mdx

@@ -66,6 +66,6 @@ React 水合是在客户端附加事件监听器并使服务器渲染的 HTML 
 
 ## 延伸阅读
 
-* [React 水合文档](https://react.dev/reference/react-dom/client/hydrateRoot)
-* [React 中的服务器端渲染](https://react.dev/reference/react-dom/server)
-* [Next.js 水合文档](https://nextjs.org/docs/basic-features/pages#hydration)
+* [React 文档关于 hydration](https://react.dev/reference/react-dom/client/hydrateRoot)
+* [React 中的服务端渲染](https://react.dev/reference/react-dom/server)
+* [Next.js 文档关于 hydration](https://nextjs.org/docs/basic-features/pages#hydration)

questions/how-do-you-debug-react-applications/en-US.langnostic.json

@@ -30,7 +30,7 @@
         "29b74665",
         "6663cd19",
         "1f4770e5",
-        "f0c73459"
+        "6a2e13c"
       ]
     },
     "targets": {
@@ -59,7 +59,7 @@
         "29b74665",
         "6663cd19",
         "1f4770e5",
-        "f0c73459"
+        "6a2e13c"
       ]
     }
   }

questions/how-do-you-debug-react-applications/zh-CN.mdx

@@ -139,7 +139,7 @@ function MyComponent() {
 
 ## 延伸阅读
 
-* [React 开发者工具](https://react.dev/learn/react-developer-tools)
-* [React 中的错误边界](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)
-* [使用 Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)
-* [调试 JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Debugging)
+* [React Developer Tools](https://react.dev/learn/react-developer-tools)
+* [Error boundaries in React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)
+* [Using the Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)
+* [Debugging JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Debugging)

questions/how-do-you-decide-between-using-react-state-context-and-external-state-managers/en-US.langnostic.json

@@ -29,7 +29,7 @@
         "e2b36f0b",
         "8d62a5c5",
         "1f4770e5",
-        "b0c27fdc"
+        "42c2150d"
       ]
     },
     "targets": {
@@ -57,7 +57,7 @@
         "e2b36f0b",
         "8d62a5c5",
         "1f4770e5",
-        "b0c27fdc"
+        "42c2150d"
       ]
     }
   }

questions/how-do-you-handle-asynchronous-data-loading-in-react-applications/en-US.langnostic.json

@@ -25,7 +25,7 @@
         "2945cbb3",
         "25aeafcd",
         "1f4770e5",
-        "aa577b63"
+        "80b0b37f"
       ]
     },
     "targets": {
@@ -49,7 +49,7 @@
         "2945cbb3",
         "25aeafcd",
         "1f4770e5",
-        "aa577b63"
+        "80b0b37f"
       ]
     }
   }