Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/blog/2022/03/29/react-v18.md
Original file line number Diff line number Diff line change
Expand Up @@ -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。
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/passing-props-to-a-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/updating-objects-in-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ input { margin-left: 5px; margin-bottom: 5px; }

</Sandpack>

请注意 `...` 展开语法本质是是“浅拷贝”——它只会复制一层。这使得它的执行速度很快,但是也意味着当你想要更新一个嵌套属性时,你必须得多次使用展开语法。
请注意 `...` 展开语法本质是“浅拷贝”——它只会复制一层。这使得它的执行速度很快,但是也意味着当你想要更新一个嵌套属性时,你必须得多次使用展开语法。

<DeepDive>

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/you-might-not-need-an-effect.md
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ function Game() {

第一个问题是它非常低效:在链式的每个 `set` 调用之间,组件(及其子组件)都不得不重新渲染。在上面的例子中,在最坏的情况下(`setCard` → 渲染 → `setGoldCardCount` → 渲染 → `setRound` → 渲染 → `setIsGameOver` → 渲染)有三次不必要的重新渲染。

第二个问题是,即使不考虑渲染效率问题,随着代码不断扩展,你会遇到这条 “链式” 调用不符合新需求的情况。试想一下,你现在需要添加一种方法来回溯游戏的历史记录,可以通过更新每个 state 变量到之前的值来实现。然而,将 `card` 设置为之前的的某个值会再次触发 Effect 链并更改你正在显示的数据。这样的代码往往是僵硬而脆弱的。
第二个问题是,即使不考虑渲染效率问题,随着代码不断扩展,你会遇到这条 “链式” 调用不符合新需求的情况。试想一下,你现在需要添加一种方法来回溯游戏的历史记录,可以通过更新每个 state 变量到之前的值来实现。然而,将 `card` 设置为之前的某个值会再次触发 Effect 链并更改你正在显示的数据。这样的代码往往是僵硬而脆弱的。

在这个例子中,更好的做法是:尽可能在渲染期间进行计算,以及在事件处理函数中调整 state:

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/client/createRoot.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ root.render(<App />);

#### 返回值 {/*returns*/}

`createRoot` 返回一个带有两个方法的的对象,这两个方法是:[`render`](#root-render) 和 [`unmount`](#root-unmount)。
`createRoot` 返回一个带有两个方法的对象,这两个方法是:[`render`](#root-render) 和 [`unmount`](#root-unmount)。

#### 注意 {/*caveats*/}
* 如果应用程序是服务端渲染的,那么不能使用 `createRoot()`。请使用 [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) 替代它。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ const { pipe } = renderToPipeableStream(<App />, {

### 将 shell 之外的异常恢复 {/*recovering-from-errors-outside-the-shell*/}

在这个例子中,`<Posts />` 组件被被包裹在 `<Suspense>` 中,所以它 **不是** shell 的一部分。
在这个例子中,`<Posts />` 组件被包裹在 `<Suspense>` 中,所以它 **不是** shell 的一部分。

```js {6}
function ProfilePage() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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),以确保此文件不会在客户端被导入。

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/useRef.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)。

Expand Down
Loading