diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index 542bf8a5c6..123b6e5134 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -187,7 +187,7 @@ React 18 中的 Suspense 在与 Transition API 结合时效果最好。如果你 #### React DOM Server {/*react-dom-server*/} -这些新的 API 现在可以从 `react-dom/server` 中导出,并且在服务端端完全支持流式 Suspense: +这些新的 API 现在可以从 `react-dom/server` 中导出,并且在服务端完全支持流式 Suspense: * `renderToPipeableStream`:用于 Node 环境中的流式渲染。 * `renderToReadableStream`:对新式的非主流运行时环境,比如 Deno 和 Cloudflare workers。 diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index 16509d07ab..99aee36995 100644 --- a/src/content/learn/passing-props-to-a-component.md +++ b/src/content/learn/passing-props-to-a-component.md @@ -195,7 +195,7 @@ function Avatar({ person, size }) { } ``` -这种语法被称为 [“解构”](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter),等价于于从函数参数中读取属性: +这种语法被称为 [“解构”](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter),等价于从函数参数中读取属性: ```js function Avatar(props) { diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index 82837dcf50..ddd523cdbf 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -377,7 +377,7 @@ input { margin-left: 5px; margin-bottom: 5px; } -请注意 `...` 展开语法本质是是“浅拷贝”——它只会复制一层。这使得它的执行速度很快,但是也意味着当你想要更新一个嵌套属性时,你必须得多次使用展开语法。 +请注意 `...` 展开语法本质是“浅拷贝”——它只会复制一层。这使得它的执行速度很快,但是也意味着当你想要更新一个嵌套属性时,你必须得多次使用展开语法。 diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 57b69eab9f..a2e2166ea6 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -416,7 +416,7 @@ function Game() { 第一个问题是它非常低效:在链式的每个 `set` 调用之间,组件(及其子组件)都不得不重新渲染。在上面的例子中,在最坏的情况下(`setCard` → 渲染 → `setGoldCardCount` → 渲染 → `setRound` → 渲染 → `setIsGameOver` → 渲染)有三次不必要的重新渲染。 -第二个问题是,即使不考虑渲染效率问题,随着代码不断扩展,你会遇到这条 “链式” 调用不符合新需求的情况。试想一下,你现在需要添加一种方法来回溯游戏的历史记录,可以通过更新每个 state 变量到之前的值来实现。然而,将 `card` 设置为之前的的某个值会再次触发 Effect 链并更改你正在显示的数据。这样的代码往往是僵硬而脆弱的。 +第二个问题是,即使不考虑渲染效率问题,随着代码不断扩展,你会遇到这条 “链式” 调用不符合新需求的情况。试想一下,你现在需要添加一种方法来回溯游戏的历史记录,可以通过更新每个 state 变量到之前的值来实现。然而,将 `card` 设置为之前的某个值会再次触发 Effect 链并更改你正在显示的数据。这样的代码往往是僵硬而脆弱的。 在这个例子中,更好的做法是:尽可能在渲染期间进行计算,以及在事件处理函数中调整 state: diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 2f4379d01f..444451fdf7 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -52,7 +52,7 @@ root.render(); #### 返回值 {/*returns*/} -`createRoot` 返回一个带有两个方法的的对象,这两个方法是:[`render`](#root-render) 和 [`unmount`](#root-unmount)。 +`createRoot` 返回一个带有两个方法的对象,这两个方法是:[`render`](#root-render) 和 [`unmount`](#root-unmount)。 #### 注意 {/*caveats*/} * 如果应用程序是服务端渲染的,那么不能使用 `createRoot()`。请使用 [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) 替代它。 diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index d027882cd4..32034a635e 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -416,7 +416,7 @@ const { pipe } = renderToPipeableStream(, { ### 将 shell 之外的异常恢复 {/*recovering-from-errors-outside-the-shell*/} -在这个例子中,`` 组件被被包裹在 `` 中,所以它 **不是** shell 的一部分。 +在这个例子中,`` 组件被包裹在 `` 中,所以它 **不是** shell 的一部分。 ```js {6} function ProfilePage() { diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md index aa403f03d5..7e41e86a2f 100644 --- a/src/content/reference/react/experimental_taintUniqueValue.md +++ b/src/content/reference/react/experimental_taintUniqueValue.md @@ -165,7 +165,7 @@ export async function Overview({ password }) { 这个示例会将秘密的 API 令牌泄漏给客户端。如果这个 API 令牌可以用来访问此特定用户不应该访问的数据,可能会导致数据泄露。 -[comment]: <> (TODO: 一旦 `server-only` 文档写好就就将其链接到对应处) +[comment]: <> (TODO: 一旦 `server-only` 文档写好就将其链接到对应处) 理想情况下,像这样的机密信息应该被抽象到一个单独的辅助文件中,只有服务器上的可信数据工具才能导入它。这个辅助文件甚至可以被污染为 [`server-only`](https://www.npmjs.com/package/server-only),以确保此文件不会在客户端被导入。 diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md index 1d7e9dc1bd..e63cfb1c20 100644 --- a/src/content/reference/react/useRef.md +++ b/src/content/reference/react/useRef.md @@ -56,7 +56,7 @@ function MyComponent() { ## 使用 {/*usage*/} -### 使用用 ref 引用一个值 {/*referencing-a-value-with-a-ref*/} +### 使用 ref 引用一个值 {/*referencing-a-value-with-a-ref*/} 在组件顶层调用 `useRef` 声明一个或多个 [ref](/learn/referencing-values-with-refs)。