Skip to content

Commit 68fbf29

Browse files
authored
fix conflict
1 parent 9e42ee6 commit 68fbf29

21 files changed

+23
-119
lines changed

src/components/Layout/HomeContent.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -265,13 +265,8 @@ export function HomeContent() {
265265
<CTA
266266
color="gray"
267267
icon="framework"
268-
<<<<<<< HEAD
269-
href="/learn/start-a-new-react-project">
270-
使用框架开始一个新项目
271-
=======
272268
href="/learn/creating-a-react-app">
273-
Get started with a framework
274-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
269+
使用框架开始一个新项目
275270
</CTA>
276271
</div>
277272
</Center>

src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,7 @@ RSC 将面向服务器的多页面应用程序的简单“请求/响应”思维
3131

3232
现在我们已经相当好地解决了数据提取的问题,我们正在探索另一个方向:从客户端向服务器发送数据,以便可以执行数据库变更和实现表单。我们通过在服务器/客户端边界传递 Server Action 函数来实现这一点。客户端可以调用该函数,提供无缝 RPC。而在 JavaScript 加载之前,Server Action 还可以提供逐步增强的表单。
3333

34-
<<<<<<< HEAD
35-
RSC 已经在 [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router) 中发布,展示了一个真正深度集成的路由器,它使用了 RSC 并将其作为 primitive。但这不是构建 RSC 兼容的路由器和框架的唯一方法。RSC 规范和实现提供了特定功能的明确分离,旨在成为适用于兼容 React 框架的组件规范。
36-
=======
37-
React Server Components has shipped in [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router). This showcases a deep integration of a router that really buys into RSC as a primitive, but it's not the only way to build a RSC-compatible router and framework. There's a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks.
38-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
34+
RSC 已经在 [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router) 中发布,展示了一个真正深度集成的路由器,它使用了 RSC 并将其作为 primitive。但这不是构建 RSC 兼容的路由器和框架的唯一方法。RSC 规范和实现提供了特定功能的明确分离,旨在成为适用于兼容 React 框架的组件规范。
3935

4036
我们通常建议使用现有的框架,但你仍然可以构建自定义框架。由于需要深度集成 bundler,构建自定义 RSC 兼容的框架并不像想象中那么容易。当前的若代 bundler 非常适合在客户端使用,但它们并没有专门为将单个模块图分割为服务器和客户端提供一流的支持而设计。因此我们选择直接与 bundler 开发人员合作,以将内置 RSC 作为 primitive。
4137

@@ -96,11 +92,7 @@ React 的核心思想是开发人员将其 UI 定义为当前状态的函数。
9692

9793
## 追踪 Transition {/*transition-tracing*/}
9894

99-
<<<<<<< HEAD
100-
追踪 Transition 的 API 可以检测 [React Transition](/reference/react/useTransition) 变慢的原因,并调查为什么会变慢。在上次更新后,我们完成了 API 的初始设计,并发布了一个 [RFC](https://github.com/reactjs/rfcs/pull/238),基本功能也已经实现。该项目目前处于暂停状态。我们欢迎对 RFC 进行反馈,并期待恢复其开发,为 React 提供更好的性能测量工具。这将特别对基于 React Transition 构建的路由非常有用,例如 [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router)
101-
=======
102-
The Transition Tracing API lets you detect when [React Transitions](/reference/react/useTransition) become slower and investigate why they may be slow. Following our last update, we have completed the initial design of the API and published an [RFC](https://github.com/reactjs/rfcs/pull/238). The basic capabilities have also been implemented. The project is currently on hold. We welcome feedback on the RFC and look forward to resuming its development to provide a better performance measurement tool for React. This will be particularly useful with routers built on top of React Transitions, like the [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router).
103-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
95+
追踪 Transition 的 API 可以检测 [React Transition](/reference/react/useTransition) 变慢的原因,并调查为什么会变慢。在上次更新后,我们完成了 API 的初始设计,并发布了一个 [RFC](https://github.com/reactjs/rfcs/pull/238),基本功能也已经实现。该项目目前处于暂停状态。我们欢迎对 RFC 进行反馈,并期待恢复其开发,为 React 提供更好的性能测量工具。这将特别对基于 React Transition 构建的路由非常有用,例如 [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router)
10496

10597
* * *
10698
除了这个更新,我们的团队最近还在社区播客和直播中客串,更多地讲述我们的工作并回答问题。

src/content/blog/2024/12/05/react-19.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -355,11 +355,7 @@ For more information, see [React DOM Static APIs](/reference/react-dom/static).
355355

356356
服务器组件是一种新的选项,允许在打包前提前渲染组件,在与你的客户端应用程序或 SSR 服务器不同的环境中。这个独立的环境就是 React 服务器组件中的 "服务器"。服务器组件可以在你的 CI 服务器上在构建时运行一次,或者可以在每次请求时使用 web 服务器运行。
357357

358-
<<<<<<< HEAD
359-
React 19 包含了所有从 Canary 渠道引入的 React 服务器组件功能。这意味着,现在可以将 React 19 作为 peer 依赖项来发布带有服务器组件的库,使用 `react-server` [导出条件](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) 用于支持 [全栈 React 架构](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision) 的框架。
360-
=======
361-
React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).
362-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
358+
React 19 包含了所有从 Canary 渠道引入的 React 服务器组件功能。这意味着,现在可以将 React 19 作为 peer 依赖项来发布带有服务器组件的库,使用 `react-server` [导出条件](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) 用于支持 [全栈 React 架构](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision) 的框架。
363359

364360

365361
<Note>

src/content/learn/add-react-to-an-existing-project.md

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,9 @@ title: 将 React 添加到现有项目中
2020

2121
以下是推荐的配置方式:
2222

23-
<<<<<<< HEAD
24-
1. 使用一个 [基于 React 的框架](/learn/start-a-new-react-project) 构建 **应用的 React 部分**
23+
1. 使用一个 [基于 React 的框架](/learn/creating-a-react-appt) 构建 **应用的 React 部分**
2524
2. **在框架配置中将 `/some-app` 指定为基本路径**(这里有 [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath)[Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/) 的配置样例)。
2625
3. **配置服务器或代理**,以便所有位于 `/some-app/` 下的请求都由 React 应用处理。
27-
=======
28-
1. **Build the React part of your app** using one of the [React-based frameworks](/learn/creating-a-react-app).
29-
2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
30-
3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
31-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
3226

3327
这可以确保应用的 React 部分可以受益于这些框架中内置的 [最佳实践](/learn/build-a-react-app-from-scratch#consider-using-a-framework)
3428

@@ -155,11 +149,7 @@ root.render(<NavigationBar />);
155149

156150
请注意 `index.html` 中的原始 HTML 内容是如何保留的,但现在你自己的 `NavigationBar` React 组件出现在 HTML 的 `<nav id="navigation">` 中。阅读 [`createRoot` 用法文档](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) 以了解如何在现有 HTML 页面中渲染 React 组件。
157151

158-
<<<<<<< HEAD
159-
当在现有项目中采用 React 时,通常会从小型交互式组件(例如按钮)开始,然后逐渐“向上移动”,直到最终整个页面都由 React 构建。到那个时候,我们建议立即迁移到 [一个 React 框架](/learn/start-a-new-react-project),以充分利用 React 的优势。
160-
=======
161-
When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/creating-a-react-app) right after to get the most out of React.
162-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
152+
当在现有项目中采用 React 时,通常会从小型交互式组件(例如按钮)开始,然后逐渐“向上移动”,直到最终整个页面都由 React 构建。到那个时候,我们建议立即迁移到 [一个 React 框架](/learn/creating-a-react-app),以充分利用 React 的优势。
163153

164154
## 在现有的原生移动应用中使用 React Native {/*using-react-native-in-an-existing-native-mobile-app*/}
165155

src/content/learn/synchronizing-with-effects.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -732,13 +732,8 @@ function TodoList() {
732732
733733
这些弊端并不仅限于 React。任何库在组件挂载时进行数据获取都会遇到这些问题。与路由处理一样,要做好数据获取并非易事,因此我们推荐以下方法:
734734
735-
<<<<<<< HEAD
736-
- **如果你正在使用 [框架](/learn/start-a-new-react-project#full-stack-frameworks) ,请使用其内置的数据获取机制**。现代 React 框架集成了高效的数据获取机制,不会出现上述问题。
735+
- **如果你正在使用 [框架](/learn/creating-a-react-app#full-stack-frameworks) ,请使用其内置的数据获取机制**。现代 React 框架集成了高效的数据获取机制,不会出现上述问题。
737736
- **否则,请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [TanStack Query](https://tanstack.com/query/latest)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以自己构建解决方案:在底层使用 Effect,但添加对请求的去重、缓存响应以及避免网络瀑布(通过预加载数据或将数据请求提升到路由层次)的逻辑。
738-
=======
739-
- **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
740-
- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
741-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
742737
743738
如果这些方法都不适合你,你可以继续直接在 Effect 中获取数据。
744739

src/content/learn/typescript.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,7 @@ TypeScript 是一种向 JavaScript 代码添加类型定义的常用方法。Typ
2020

2121
## 安装 {/*installation*/}
2222

23-
<<<<<<< HEAD
24-
所有的 [生产级 React 框架](/learn/start-a-new-react-project#full-stack-frameworks) 都支持使用 TypeScript。请按照框架特定的指南进行安装:
25-
=======
26-
All [production-grade React frameworks](/learn/creating-a-react-app#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
27-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
23+
所有的 [生产级 React 框架](/learn/creating-a-react-app#full-stack-frameworks) 都支持使用 TypeScript。请按照框架特定的指南进行安装:
2824

2925
- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
3026
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)

src/content/learn/you-might-not-need-an-effect.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,7 @@ Effect 是 React 范式中的一种脱围机制。它们让你可以 “逃出
2626
* **你不必使用 Effect 来转换渲染所需的数据**。例如,你想在展示一个列表前先做筛选。你的直觉可能是写一个当列表变化时更新 state 变量的 Effect。然而,这是低效的。当你更新这个 state 时,React 首先会调用你的组件函数来计算应该显示在屏幕上的内容。然后 React 会把这些变化“[提交](/learn/render-and-commit)”到 DOM 中来更新屏幕。然后 React 会执行你的 Effect。如果你的 Effect 也立即更新了这个 state,就会重新执行整个流程。为了避免不必要的渲染流程,应在你的组件顶层转换数据。这些代码会在你的 props 或 state 变化时自动重新执行。
2727
* **你不必使用 Effect 来处理用户事件**。例如,你想在用户购买一个产品时发送一个 `/api/buy` 的 POST 请求并展示一个提示。在这个购买按钮的点击事件处理函数中,你确切地知道会发生什么。但是当一个 Effect 运行时,你却不知道用户做了什么(例如,点击了哪个按钮)。这就是为什么你通常应该在相应的事件处理函数中处理用户事件。
2828

29-
<<<<<<< HEAD
30-
**的确** 可以使用 Effect 来和外部系统 [同步](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) 。例如,你可以写一个 Effect 来保持一个 jQuery 的组件和 React state 之间的同步。你也可以使用 Effect 来获取数据:例如,你可以同步当前的查询搜索和查询结果。请记住,比起直接在你的组件中写 Effect,现代 [框架](/learn/start-a-new-react-project#full-stack-frameworks) 提供了更加高效的,内置的数据获取机制。
31-
=======
32-
You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
33-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
29+
**的确** 可以使用 Effect 来和外部系统 [同步](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) 。例如,你可以写一个 Effect 来保持一个 jQuery 的组件和 React state 之间的同步。你也可以使用 Effect 来获取数据:例如,你可以同步当前的查询搜索和查询结果。请记住,比起直接在你的组件中写 Effect,现代 [框架](/learn/creating-a-react-app#full-stack-frameworks) 提供了更加高效的,内置的数据获取机制。
3430

3531
为了帮助你获得正确的直觉,让我们来看一些常见的实例吧!
3632

src/content/learn/your-first-component.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -219,11 +219,7 @@ function Profile() {
219219

220220
大多数 React 应用程序只有组件。这意味着你不仅可以将组件用于可复用的部分,例如按钮,还可以用于较大块的部分,例如侧边栏、列表以及最终的完整页面!组件是组织 UI 代码和标签的一种快捷方式,即使其中一些组件只使用了一次。
221221

222-
<<<<<<< HEAD
223-
像 Next.js 这样的框架会做更多事情。与使用一个空白的 HTML 页面并让 React 使用 JavaScript “接手”管理页面不同,框架还会根据你的 React 组件自动生成 HTML。这使你的应用程序在加载 JavaScript 代码之前能够展示一些内容。
224-
=======
225-
[React-based frameworks](/learn/creating-a-react-app) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
226-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
222+
[基于 React 的框架](/learn/creating-a-react-ap) 更进一步。与使用一个空白的 HTML 文件并让 React 使用 JavaScript “接管” 管理页面不同,框架 **还会** 根据 React 组件自动生成 HTML。这使你的应用程序能够在 JavaScript 代码加载之前显示一些内容。
227223

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

src/content/reference/react-dom/client/createRoot.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -208,11 +208,7 @@ function Counter() {
208208
<div id="root"></div>
209209
```
210210
211-
<<<<<<< HEAD
212-
这个过程太慢了!要解决这个问题,可以在 [服务端或者应用构建期间](/reference/react-dom/server) 通过组件生成一些初始 HTML。这样一来,在 JavaScript 加载之前,用户就能看到一些文字、图片,也能点击链接。我们推荐 [使用框架](/learn/start-a-new-react-project#full-stack-frameworks),通过框架开箱即用的能力轻易地完成这个优化。根据框架运行的时机,分为 **服务端渲染(SSR)** 和 **静态站点生成(SSG)**。
213-
=======
214-
This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/creating-a-react-app#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
215-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
211+
这个过程太慢了!要解决这个问题,可以在 [服务端或者应用构建期间](/reference/react-dom/server) 通过组件生成一些初始 HTML。这样一来,在 JavaScript 加载之前,用户就能看到一些文字、图片,也能点击链接。我们推荐 [使用框架](/learn/creating-a-react-app#full-stack-frameworks),通过框架开箱即用的能力轻易地完成这个优化。根据框架运行的时机,分为 **服务端渲染(SSR)** 和 **静态站点生成(SSG)**。
216212
217213
</Note>
218214

0 commit comments

Comments
 (0)