Skip to content
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
4 changes: 4 additions & 0 deletions src/content/blog/2024/05/22/react-conf-2024-recap.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,11 @@ React 和 React Native 团队也在每天结束时进行了问答环节:

感谢 [Callstack](https://www.callstack.com/) 建设大会网站;感谢 [Kadi Kraman](https://twitter.com/kadikraman) 和 [Expo](https://expo.dev/) 团队建设大会移动应用。

<<<<<<< HEAD
感谢所有赞助商使本次活动得以实现:[Remix](https://remix.run/)、[Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org)、[MUI](https://mui.com/)、[Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore)、[Abbott](https://www.jobs.abbott/software)、[Expo](https://expo.dev/)、[RedwoodJS](https://redwoodjs.com/) 以及 [Vercel](https://vercel.com)。
=======
Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://rwsdk.com/), and [Vercel](https://vercel.com).
>>>>>>> 6a708898a695fc4af8d854101464aa02a4befae8

感谢音视频团队为我们提供的视觉、舞台和声音;感谢威斯汀酒店为我们提供的住宿。

Expand Down
4 changes: 4 additions & 0 deletions src/content/blog/2025/02/14/sunsetting-create-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,11 @@ export default function Dashboard() {
}
```

<<<<<<< HEAD
在副作用中获取数据意味着用户需要等待更长时间才能看到内容,即使这些数据本可以更早地获取。为了解决这个问题,你可以使用一些数据获取库,例如:[React Query](https://react-query.tanstack.com/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/),这些库提供了预取数据的功能,使得请求可以在组件渲染之前就开始,从而减少用户等待时间并提升性能
=======
Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [TanStack Query](https://tanstack.com/query/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders.
>>>>>>> 6a708898a695fc4af8d854101464aa02a4befae8

这些库在与路由的“loader”模式集成时效果最佳,可以在路由级别指定数据依赖关系,从而使路由器能够优化数据获取:

Expand Down
4 changes: 2 additions & 2 deletions src/content/learn/build-a-react-app-from-scratch.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ title: 从零开始构建 React 应用
[Vite](https://vite.dev/) 是一个构建工具,旨在为现代网络项目提供更快更简洁的开发体验。

<TerminalBlock>
{`npm create vite@latest my-app -- --template react`}
{`npm create vite@latest my-app -- --template react-ts`}
</TerminalBlock>

Vite 采用约定式设计,开箱即提供合理的默认配置。它拥有丰富的插件生态系统,能够支持快速热更新、JSX、Babel/SWC 等常见功能。你可以查看 Vite 的 [React 插件](https://vite.dev/plugins/#vitejs-plugin-react) 或 [React SWC 插件](https://vite.dev/plugins/#vitejs-plugin-react-swc) 和 [React 服务器端渲染示例项目](https://vite.dev/guide/ssr.html#example-projects) 来开始使用。
Expand Down Expand Up @@ -97,7 +97,7 @@ React 生态系统中包含许多用于解决这些问题的工具。我们列

如果你从大多数后端或 REST 风格的 API 获取数据,我们建议使用:

- [React Query](https://react-query.tanstack.com/)
- [TanStack Query](https://tanstack.com/query/)
- [SWR](https://swr.vercel.app/)
- [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/choosing-the-state-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -1718,7 +1718,7 @@ export const initialTravelPlan = {
34: {
id: 34,
title: 'Oceania',
childIds: [35, 36, 37, 38, 39, 40,, 41],
childIds: [35, 36, 37, 38, 39, 40, 41],
},
35: {
id: 35,
Expand Down
5 changes: 5 additions & 0 deletions src/content/learn/creating-a-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,13 @@ Expo 由 [Expo 公司](https://expo.dev/about) 维护。使用 Expo 构建应用

还有一些新兴的框架正在努力实现我们的全栈 React 愿景:

<<<<<<< HEAD
- [TanStack Start (Beta)](https://tanstack.com/): TanStack Start 是一个由 TanStack Router 驱动的全栈 React 框架。它使用 Nitro 和 Vite 等工具提供完整的文档服务端渲染、流式传输、服务器函数、打包等功能。
- [RedwoodJS](https://redwoodjs.com/): Redwood 是一个全栈 React 框架,带有许多预装的包和配置,方便构建全栈 Web 应用。
=======
- [TanStack Start (Beta)](https://tanstack.com/start/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.
- [RedwoodSDK](https://rwsdk.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.
>>>>>>> 6a708898a695fc4af8d854101464aa02a4befae8

<DeepDive>

Expand Down
5 changes: 5 additions & 0 deletions src/content/learn/synchronizing-with-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -732,8 +732,13 @@ function TodoList() {

这些弊端并不仅限于 React。任何库在组件挂载时进行数据获取都会遇到这些问题。与路由处理一样,要做好数据获取并非易事,因此我们推荐以下方法:

<<<<<<< HEAD
- **如果你正在使用 [框架](/learn/start-a-new-react-project#full-stack-frameworks) ,请使用其内置的数据获取机制**。现代 React 框架集成了高效的数据获取机制,不会出现上述问题。
- **否则,请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [React Query](https://tanstack.com/query/latest)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以自己构建解决方案:在底层使用 Effect,但添加对请求的去重、缓存响应以及避免网络瀑布(通过预加载数据或将数据请求提升到路由层次)的逻辑。
=======
- **If you use a [framework](/learn/start-a-new-react-project#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.
- **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).
>>>>>>> 6a708898a695fc4af8d854101464aa02a4befae8

如果这些方法都不适合你,你可以继续直接在 Effect 中获取数据。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ useEffect(() => {

<Note>

There are better ways to fetch data rather than in a useEffect. Consider using React Query, useSWR, or React Router 6.4+ for data fetching. These solutions handle deduplicating requests, caching responses, and avoiding network waterfalls.
There are better ways to fetch data rather than in a useEffect. Consider using TanStack Query, useSWR, or React Router 6.4+ for data fetching. These solutions handle deduplicating requests, caching responses, and avoiding network waterfalls.

Learn more: [Fetching Data](/learn/synchronizing-with-effects#fetching-data)

Expand Down
4 changes: 4 additions & 0 deletions src/content/reference/react/act.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,11 @@ it.only('can render and update a counter', async () => {

## 疑难解答 {/*troubleshooting*/}

<<<<<<< HEAD
### 出现错误 "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
=======
### I'm getting an error: "The current testing environment is not configured to support act(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
>>>>>>> 6a708898a695fc4af8d854101464aa02a4befae8

使用 `act` 需要在测试环境中设置 `global.IS_REACT_ACT_ENVIRONMENT=true` 。这是为了确保 `act` 仅在正确的环境中使用。

Expand Down
11 changes: 11 additions & 0 deletions src/content/reference/react/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,24 @@ React 参考文档分为以下内容:

## React DOM {/*react-dom*/}

<<<<<<< HEAD
React-dom 仅支持在 web 应用程序中使用(在浏览器 DOM 环境中运行)。本节分为以下部分:

* [Hook](/reference/react-dom/hooks) —— 适用于在浏览器 DOM 环境中运行的 web 应用程序的 Hook。
* [组件](/reference/react-dom/components) —— React 支持所有内置的 HTML 和 SVG 组件。
* [API](/reference/react-dom) —— `react-dom` 包含仅在 web 应用程序中支持的方法。
* [客户端 API](/reference/react-dom/client) —— `react-dom/client` API 允许在客户端(浏览器中)渲染 React 组件。
* [服务端 API](/reference/react-dom/server) —— `react-dom/server` API 允许在服务器端将 React 组件渲染为 HTML。
=======
React DOM contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following:

* [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment.
* [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components.
* [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications.
* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser).
* [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
* [Static APIs](/reference/react-dom/static) - The `react-dom/static` APIs let you generate static HTML for React components.
>>>>>>> 6a708898a695fc4af8d854101464aa02a4befae8


## React 编译器 {/*react-compiler*/}
Expand Down
5 changes: 5 additions & 0 deletions src/content/reference/react/useEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -1049,8 +1049,13 @@ export async function fetchBio(person) {

这些缺点并不仅仅体现在 React 上,它可能出现在所有挂载时请求数据的地方。与路由一样,要做好数据请求并非易事,因此我们推荐以下方法:

<<<<<<< HEAD
- **如果正在使用 [框架](/learn/start-a-new-react-project#full-stack-frameworks),那么请使用其内置的数据获取机制**。现代 React 框架已经集成了高效的数据获取机制,不会受到上述问题的影响。
- **否则,请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [React Query](https://tanstack.com/query/latest/)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以构建自己的解决方案,在这种情况下,你将在底层使用 Effect,但还需添加逻辑以避免重复请求、缓存响应并避免网络瀑布效应(通过预加载数据或将数据需求提升到路由级别)。
=======
- **If you use a [framework](/learn/start-a-new-react-project#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.
- **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 also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
>>>>>>> 6a708898a695fc4af8d854101464aa02a4befae8

如果这两种方法都不适合你,可以继续直接在 Effect 中请求数据。

Expand Down
Loading