Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
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
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ React 服务器组件、资源加载、文档元数据与 Action 都已经加入

- **资源加载**:我们将 Suspense 与样式表、字体和脚本等资源的加载生命周期集成在一起,以便 React 考虑它们来确定像 [`<style>`](/reference/react-dom/components/style)、[`<link>`](/reference/react-dom/components/link) 和 [`<script>`](/reference/react-dom/components/script) 这样的元素中的内容是否已准备就绪。我们还添加了新的 [资源加载 API](/reference/react-dom#resource-preloading-apis),如 `preload` 和 `preinit`,以提供更大的控制权,指示何时应加载和初始化资源。

- **Action**:如上所述,我们已将 Action 添加到管理从客户端发送数据到服务器的功能中。现在可以将 `action` 添加到像 [`<form/>`](/reference/react-dom/components/form) 这样的元素中,使用 [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 访问状态,使用 [`useActionState`](/reference/react/useActionState) 处理结果,并使用 [`useOptimistic`](/reference/rsc/useOptimistic) 乐观地更新 UI。
- **Action**:如上所述,我们已将 Action 添加到管理从客户端发送数据到服务器的功能中。现在可以将 `action` 添加到像 [`<form/>`](/reference/react-dom/components/form) 这样的元素中,使用 [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 访问状态,使用 [`useActionState`](/reference/react/useActionState) 处理结果,并使用 [`useOptimistic`](/reference/react/useOptimistic) 乐观地更新 UI。

由于所有这些功能是相互配合的,因此单独在稳定渠道中发布它们是困难的。发布 Action 而不带有用于访问表单状态的补充 Hook 会限制 Action 的实际可用性。引入 React 服务器组件而不集成 Server Action 会把在服务器上修改数据变得复杂化。

Expand Down
281 changes: 0 additions & 281 deletions src/content/learn/add-react-to-a-website.md

This file was deleted.

2 changes: 1 addition & 1 deletion src/content/learn/removing-effect-dependencies.md
Original file line number Diff line number Diff line change
Expand Up @@ -590,7 +590,7 @@ function ChatRoom({ roomId }) {

每当你收到一条消息,`setMessages()` 就会使该组件重新渲染一个新的 `messages` 数组,其中包括收到的消息。然而,由于该 Effect 现在依赖于 `messages`,这 **也将** 重新同步该 Effect。所以每条新消息都会使聊天重新连接。用户不会喜欢这样!

为了解决这个问题,不要在 Effect 里面读取 `messages`。相反,应该将一个 [state 更新函数](/reference/react/useState#updating-state-based-the-previous-state) 传递给 `setMessages`:
为了解决这个问题,不要在 Effect 里面读取 `messages`。相反,应该将一个 [state 更新函数](/reference/react/useState#updating-state-based-on-the-previous-state) 传递给 `setMessages`:

```js {7,10}
function ChatRoom({ roomId }) {
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/your-first-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ function Profile() {

像 Next.js 这样的框架会做更多事情。与使用一个空白的 HTML 页面并让 React 使用 JavaScript “接手”管理页面不同,框架还会根据你的 React 组件自动生成 HTML。这使你的应用程序在加载 JavaScript 代码之前能够展示一些内容。

尽管如此,许多网站仅使用 React 来 [添加“交互性”](/learn/add-react-to-a-website)。它们有很多根组件,而不是整个页面的单个组件。你可以根据需要尽可能多或尽可能少地使用 React。
尽管如此,许多网站仅使用 React 来 [添加“交互性”](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page)。它们有很多根组件,而不是整个页面的单个组件。你可以根据需要尽可能多或尽可能少地使用 React。

</DeepDive>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ If an error happens in the `Posts` component or somewhere inside it, React will
2. 它将 **放弃** 再尝试在服务器上渲染 `Posts`。
3. 当 JavaScript 代码加载到客户端上时,React **重新尝试** 在客户端上渲染 `Posts`。

如果在客户端上重新尝试渲染 `Posts` **也** 失败,React 将在客户端上抛出错误。与渲染过程中抛出的所有错误一样,[最近的父级错误边界](/reference/reflect/Component#staticgetderivedstatefromwerror) 决定如何向用户展示错误。在实践中,这意味着用户将看到加载指示符,直到确定错误不可恢复为止。
如果在客户端上重新尝试渲染 `Posts` **也** 失败,React 将在客户端上抛出错误。与渲染过程中抛出的所有错误一样,[最近的父级错误边界](/reference/react/Component#static-getderivedstatefromerror) 决定如何向用户展示错误。在实践中,这意味着用户将看到加载指示符,直到确定错误不可恢复为止。

如果在客户端上重新尝试渲染 `Posts` 成功,则从服务器加载中的后备方案将被客户端渲染的输出所取代。用户不会知道有服务器错误。但是,服务器的 `onError` 回调和客户端的 [`onRecoverableError`](/reference/react-dom/client/hydrateRoot#hydrateroot) 回调将被触发,以便你可以收到有关错误通知。

Expand Down
Loading