Skip to content

docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 48460207 #1734

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed
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
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
"github-slugger": "^1.3.0",
"next": "15.1.0",
Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/scaling-up-with-reducer-and-context.md
Original file line number Diff line number Diff line change
Expand Up @@ -690,7 +690,11 @@ ul, li { margin: 0; padding: 0; }
</TasksContext>
```

<<<<<<< HEAD
相反,任何需要 tasks 的组件都可以从 `TaskContext` 中读取它:
=======
Instead, any component that needs the task list can read it from the `TasksContext`:
>>>>>>> 48460207db61a657b31e57b9cbf7356b3a531555

```js {2}
export default function TaskList() {
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 @@ -90,7 +90,7 @@ React 将会在 `根节点` 中显示 `<App />` 组件,并且控制组件中

如果你在一个根节点上多次调用了 `render`,React 仍然会更新 DOM,这样才能保证显示的内容是最新的。React 将会筛选出可复用的部分和需要更新的部分,对于需要更新的部分,是 React 通过与之前渲染的树进行 [“比较”](/learn/preserving-and-resetting-state) 得到的。在同一个根节点上再次调用 `render` 就和在根节点上调用 [`set` 函数](/reference/react/useState#setstate) 类似:React 会避免没必要的 DOM 更新。

* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/client/flushSync) to ensure the initial render runs fully synchronously.
* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously.

```js
const root = createRoot(document.getElementById('root'));
Expand Down
4 changes: 4 additions & 0 deletions src/content/reference/rsc/directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ title: "指示符"

<Intro>

<<<<<<< HEAD
指示符(directive)向 [与 React 服务器组件兼容的捆绑器](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) 提供指令(instruction)。
=======
Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks).
>>>>>>> 48460207db61a657b31e57b9cbf7356b3a531555

</Intro>

Expand Down
21 changes: 17 additions & 4 deletions src/content/reference/rsc/server-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ title: 服务器组件

<RSC>

<<<<<<< HEAD
服务器组件被用在 [React 服务器组件](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) 中。
=======
Server Components are for use in [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks).
>>>>>>> 48460207db61a657b31e57b9cbf7356b3a531555

</RSC>

Expand All @@ -22,7 +26,11 @@ React 服务器组件中的「服务器」就是指这个独立的环境。服

#### 我如何构建对服务器组件的支持? {/*how-do-i-build-support-for-server-components*/}

<<<<<<< HEAD
虽然 React 19 中的 React 服务器组件是稳定的,并且在小版本之间不会发生破坏,但用于实现 React 服务器组件打包器或框架的底层 API 不遵循 semver,并可能在 React 19.x 的小版本之间发生破坏。
=======
While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
>>>>>>> 48460207db61a657b31e57b9cbf7356b3a531555

为了支持 React 服务器组件作为打包器或框架,我们建议固定到特定的 React 版本,或者使用 Canary 发行版。我们将继续与打包器和框架合作,以在未来稳定用于实现 React 服务器组件的 API。

Expand All @@ -45,7 +53,7 @@ function Page({page}) {
setContent(data.content);
});
}, [page]);

return <div>{sanitizeHtml(marked(content))}</div>;
}
```
Expand All @@ -69,7 +77,7 @@ import sanitizeHtml from 'sanitize-html'; // 不会包括在 bundle 中
async function Page({page}) {
// 注意: 会在应用构建的 **渲染过程中** 加载
const content = await file.readFile(`${page}.md`);

return <div>{sanitizeHtml(marked(content))}</div>;
}
```
Expand Down Expand Up @@ -113,7 +121,7 @@ function Note({id}) {
setNote(data.note);
});
}, [id]);

return (
<div>
<Author id={note.authorId} />
Expand Down Expand Up @@ -253,7 +261,7 @@ export default function Expandable({children}) {
<p>this is the second note</p>
</Expandable>
<!--...-->
</div>
</div>
</body>
```

Expand All @@ -270,8 +278,13 @@ import db from './database';
async function Page({id}) {
// 使用 await 会使服务器组件暂停
const note = await db.notes.get(id);
<<<<<<< HEAD

// 注意: 没有使用 await, 所以从这里开始执行,但是客户端上面进行 await
=======

// NOTE: not awaited, will start here and await on the client.
>>>>>>> 48460207db61a657b31e57b9cbf7356b3a531555
const commentsPromise = db.comments.get(note.id);
return (
<div>
Expand Down
4 changes: 4 additions & 0 deletions src/content/reference/rsc/use-client.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,11 @@ export default function RichTextEditor({ timestamp, text }) {
}
```

<<<<<<< HEAD
当从服务器组件导入带有 `'use client'` 标记的文件时,[兼容的捆绑工具](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) 将模块导入视为服务器运行和客户端运行代码之间的边界。
=======
When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code.
>>>>>>> 48460207db61a657b31e57b9cbf7356b3a531555

作为 `RichTextEditor` 的依赖项,无论 `formatDate` 与 `Button` 的模块是否包含 `'use client'`,其都将在客户端上进行评估。请注意,当从服务器代码导入时,单个模块可能在服务器上进行评估,并且当从客户端代码导入时,可能在客户端上进行评估。

Expand Down
5 changes: 0 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2799,11 +2799,6 @@ data-view-byte-offset@^1.0.0:
es-errors "^1.3.0"
is-data-view "^1.0.1"

date-fns@^2.16.1:
version "2.28.0"
resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz"
integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==

debounce@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz"
Expand Down