diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index 0411b0243d..73fde1ba16 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -112,7 +112,7 @@ React 和 React Native 团队也在每天结束时进行了问答环节: 感谢 [Callstack](https://www.callstack.com/) 建设大会网站;感谢 [Kadi Kraman](https://twitter.com/kadikraman) 和 [Expo](https://expo.dev/) 团队建设大会移动应用。 -感谢所有赞助商使本次活动得以实现:[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)。 +感谢所有赞助商使本次活动得以实现:[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/) 以及 [Vercel](https://vercel.com)。 感谢音视频团队为我们提供的视觉、舞台和声音;感谢威斯汀酒店为我们提供的住宿。 diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md index 5a38f67243..54d33885e1 100644 --- a/src/content/blog/2025/02/14/sunsetting-create-react-app.md +++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md @@ -177,7 +177,7 @@ export default function Dashboard() { } ``` -在副作用中获取数据意味着用户需要等待更长时间才能看到内容,即使这些数据本可以更早地获取。为了解决这个问题,你可以使用一些数据获取库,例如:[React Query](https://react-query.tanstack.com/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/),这些库提供了预取数据的功能,使得请求可以在组件渲染之前就开始,从而减少用户等待时间并提升性能 +在副作用中获取数据意味着用户需要等待更长时间才能看到内容,即使这些数据本可以更早地获取。为了解决这个问题,你可以使用一些数据获取库,例如:[TanStack Query](https://tanstack.com/query/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/),这些库提供了预取数据的功能,使得请求可以在组件渲染之前就开始,从而减少用户等待时间并提升性能。 这些库在与路由的“loader”模式集成时效果最佳,可以在路由级别指定数据依赖关系,从而使路由器能够优化数据获取: diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index 735e0e69a3..150f18150c 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -34,7 +34,7 @@ title: 从零开始构建 React 应用 [Vite](https://vite.dev/) 是一个构建工具,旨在为现代网络项目提供更快更简洁的开发体验。 -{`npm create vite@latest my-app -- --template react`} +{`npm create vite@latest my-app -- --template react-ts`} 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) 来开始使用。 @@ -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) diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md index 9a4ccdd30e..6fda515cfe 100644 --- a/src/content/learn/choosing-the-state-structure.md +++ b/src/content/learn/choosing-the-state-structure.md @@ -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, diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md index 189d7ae74f..873c50fd15 100644 --- a/src/content/learn/creating-a-react-app.md +++ b/src/content/learn/creating-a-react-app.md @@ -63,8 +63,8 @@ Expo 由 [Expo 公司](https://expo.dev/about) 维护。使用 Expo 构建应用 还有一些新兴的框架正在努力实现我们的全栈 React 愿景: -- [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 是一个由 TanStack Router 驱动的全栈 React 框架。它使用 Nitro 和 Vite 等工具提供完整的文档服务端渲染、流式传输、服务器函数、打包等功能。 +- [RedwoodSDK](https://rwsdk.com/): Redwood 是一个全栈 React 框架,带有许多预装的包和配置,方便构建全栈 Web 应用。 diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index cfe9323176..d4f377916e 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -733,7 +733,7 @@ function TodoList() { 这些弊端并不仅限于 React。任何库在组件挂载时进行数据获取都会遇到这些问题。与路由处理一样,要做好数据获取并非易事,因此我们推荐以下方法: - **如果你正在使用 [框架](/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,但添加对请求的去重、缓存响应以及避免网络瀑布(通过预加载数据或将数据请求提升到路由层次)的逻辑。 +- **否则,请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [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,但添加对请求的去重、缓存响应以及避免网络瀑布(通过预加载数据或将数据请求提升到路由层次)的逻辑。 如果这些方法都不适合你,你可以继续直接在 Effect 中获取数据。 diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 25a5a4178c..1b7e547d1b 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -437,7 +437,7 @@ function Game() { // ✅ 在事件处理函数中计算剩下的所有 state setCard(nextCard); if (nextCard.gold) { - if (goldCardCount <= 3) { + if (goldCardCount < 3) { setGoldCardCount(goldCardCount + 1); } else { setGoldCardCount(0); diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md index 56a9d74beb..8075335040 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md @@ -132,7 +132,7 @@ useEffect(() => { -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. +有比使用 useEffect 更好的方法来获取数据。考虑使用 TanStack Query、useSWR 或者 React Router(v6.4 版本及以上)来获取数据。这些解决方案处理了重复请求、对响应进行缓存并且会避免网络瀑布。 Learn more: [Fetching Data](/learn/synchronizing-with-effects#fetching-data) diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md index 0ed88a9ce2..4a066b9515 100644 --- a/src/content/reference/react/act.md +++ b/src/content/reference/react/act.md @@ -152,7 +152,7 @@ it.only('can render and update a counter', async () => { ## 疑难解答 {/*troubleshooting*/} -### 出现错误 "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/} +### 出现错误 "The current testing environment is not configured to support act(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/} 使用 `act` 需要在测试环境中设置 `global.IS_REACT_ACT_ENVIRONMENT=true` 。这是为了确保 `act` 仅在正确的环境中使用。 diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index b130cddaaf..9b7a7d610d 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -28,6 +28,7 @@ React-dom 仅支持在 web 应用程序中使用(在浏览器 DOM 环境中运 * [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。 +* [静态 API](/reference/react-dom/static) - `react-dom/static` API 允许将 React 组件生成静态 HTML。 ## React 编译器 {/*react-compiler*/} diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index 1b9a1ca5a3..05b00816c4 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -1050,7 +1050,7 @@ export async function fetchBio(person) { 这些缺点并不仅仅体现在 React 上,它可能出现在所有挂载时请求数据的地方。与路由一样,要做好数据请求并非易事,因此我们推荐以下方法: - **如果正在使用 [框架](/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,但还需添加逻辑以避免重复请求、缓存响应并避免网络瀑布效应(通过预加载数据或将数据需求提升到路由级别)。 +- **否则,请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [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,但还需添加逻辑以避免重复请求、缓存响应并避免网络瀑布效应(通过预加载数据或将数据需求提升到路由级别)。 如果这两种方法都不适合你,可以继续直接在 Effect 中请求数据。