From e6d972fdb728d09e7d7de7dc264ac26ead49afe9 Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Tue, 18 Feb 2025 22:16:17 +0800 Subject: [PATCH 01/21] Blog translation --- .../2025/02/14/sunsetting-create-react-app.md | 176 +++++++++--------- 1 file changed, 88 insertions(+), 88 deletions(-) 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 cbc17fdcd9..1e0c002b56 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 @@ -1,37 +1,37 @@ --- -title: "Sunsetting Create React App" -author: Matt Carroll and Ricky Hanlon +title: "停止维护 Create React App" +author: Matt Carroll 和 Ricky Hanlon date: 2025/02/14 -description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework. We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by building a framework. +description: 今天，我们不再推荐在新应用中使用 Create React App，并鼓励现有应用迁移到框架。当框架不适合你的项目，或者你更倾向于从构建框架开始时，我们还提供了文档。 --- -February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm) +2025 年 2 月 14 日，作者：[Matt Carroll](https://twitter.com/mattcarrollcode) 和 [Ricky Hanlon](https://bsky.app/profile/ricky.fm) --- -Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](/learn/creating-a-react-app). We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by [building a framework](/learn/building-a-react-framework). +今天，我们不再推荐在新应用中使用 [Create React App](https://create-react-app.dev/)，并鼓励现有应用迁移到 [框架](/learn/creating-a-react-app)。当框架不适合你的项目，或者你更倾向于从 [构建框架](/learn/building-a-react-framework)开始时，我们还提供了文档。 ----- -When we released Create React App in 2016, there was no clear way to build a new React app. +当我们在 2016 年发布 Create React App 时，还没有一种明确的方式来构建一个新的 React 应用。 -To create a React app, you had to install a bunch of tools and wire them up together yourself to support basic features like JSX, linting, and hot reloading. This was very tricky to do correctly, so the [community](https://github.com/react-boilerplate/react-boilerplate) [created](https://github.com/kriasoft/react-starter-kit) [boilerplates](https://github.com/petehunt/react-boilerplate) for [common](https://github.com/gaearon/react-hot-boilerplate) [setups](https://github.com/erikras/react-redux-universal-hot-example). However, boilerplates were difficult to update and fragmentation made it difficult for React to release new features. +要创建一个 React 应用，你必须安装一堆工具，并手动将它们配置在一起，以支持 JSX、代码检查（linting）和热更新（hot reloading）等基本功能。这很难正确的完成，因此 [社区](https://github.com/react-boilerplate/react-boilerplate) 为 [常见的](https://github.com/gaearon/react-hot-boilerplate) [设置](https://github.com/erikras/react-redux-universal-hot-example) [创建] 了(https://github.com/kriasoft/react-starter-kit) [模板代码](https://github.com/petehunt/react-boilerplate)。然而，模板代码很难更新，而且代码碎片化的情况使得 React 难以推出新功能。 -Create React App solved these problems by combining several tools into a single recommended configuration. This allowed apps a simple way to upgrade to new tooling features, and allowed the React team to deploy non-trivial tooling changes (Fast Refresh support, React Hooks lint rules) to the broadest possible audience. +Create React App 通过将多个工具整合到一个推荐的配置中，解决了这些问题。这使得应用程序能够以简单的方式升级到新的工具特性，同时也让 React 团队能够将重要的工具变更（如快速刷新支持、React Hooks 的 lint 规则）部署给尽可能广泛的用户群体。 -This model became so popular that there's an entire category of tools working this way today. +这种模式变得非常流行，以至于如今有一整类工具都采用这种方式工作。 -## Deprecating Create React App {/*deprecating-create-react-app*/} +## 弃用 Create React App {/*deprecating-create-react-app*/} -Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-create-react-app) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks). +尽管 Create React App 可以轻松上手，但仍存在 [一些限制](#limitations-of-create-react-app)，这些限制使得构建高性能的生产应用程序变得困难。原则上，我们可以通过将其逐步发展成一个 [framework](#why-we-recommend-frameworks) 来解决这些问题。 -However, since Create React App currently has no active maintainers, and there are many existing frameworks that solve these problems already, we’ve decided to deprecate Create React App. +然而，由于 Create React App 目前没有活跃的维护者，并且已经有许多现有的框架能够解决这些问题，我们决定弃用 Create React App。 -Starting today, if you install a new app, you will see a deprecation warning: +从今天开始，如果你安装一个新的应用程序，你会看到一个弃用警告： @@ -46,39 +46,38 @@ This error message will only be shown once per install. -We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-only SPAs, and can be deployed to a CDN or static hosting service without a server. +我们推荐使用框架来 [创建新的 React 应用程序](/learn/creating-a-react-app)。我们推荐的所有框架都支持仅客户端的单页应用（SPA），并且可以在没有服务器的情况下部署到 CDN 或静态托管服务。 -For existing apps, these guides will help you migrate to a client-only SPA: +对于现有的应用程序，这些指南将帮助你迁移到仅客户端的单页应用（SPA）： -* [Next.js’ Create React App migration guide](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app) -* [React Router’s framework adoption guide](https://reactrouter.com/upgrading/component-routes). -* [Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/) +* [Next.js 的 Create React App 迁移指南](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app) +* [React Router 的框架采用指南](https://reactrouter.com/upgrading/component-routes). +* [Expo webpack 到 Expo Router 的迁移指南](https://docs.expo.dev/router/migrate/from-expo-webpack/) -Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19. +Create React App 将继续以维护模式运行，并且我们已经发布了一个新版本的 Create React App 以支持 React 19。 -If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how react works from scratch, you can roll your own custom setup with React using Vite, Parcel or Rsbuild. +如果你的应用程序有特殊的限制，或者你更喜欢通过构建自己的框架来解决这些问题，或者你只是想从头学习 React 的工作原理，你可以使用 Vite、Parcel 或 Rsbuild 来定制自己的 React 设置。 -To help users get started with Vite, Parcel or Rsbuild, we've published new docs for [Building a Framework](/learn/building-a-react-framework). Continue reading to learn more about the [limitations of Create React App](#limitations-of-create-react-app) and [why we recommend frameworks](#why-we-recommend-frameworks). +为了帮助用户开始使用 Vite、Parcel 或 Rsbuild，我们发布了新的文档，介绍如何 [构建一个框架](/learn/building-a-react-framework)。继续阅读以了解更多关于 [Create React App 的限制](#limitations-of-create-react-app)，以及 [为什么我们推荐使用框架](#why-we-recommend-frameworks)。 -#### Do you recommend Vite? {/*do-you-recommend-vite*/} +#### 你推荐 Vite 吗？ {/*do-you-recommend-vite*/} -We provide several Vite-based recommendations. +我们提供了几个基于 Vite 的建议。 -React Router v7 is a Vite based framework which allows you to use Vite's fast development server and build tooling with a framework that provides routing and data fetching. Just like the other frameworks we recommend, you can build a SPA with React Router v7. +React Router v7 是一个基于 Vite 的框架，它能让你在一个具备路由和数据获取功能的框架中，使用 Vite 快速的开发服务器和构建工具。就像我们推荐的其他框架一样，你可以使用 React Router v7 构建单页应用（SPA）。 -We also recommend using Vite when [adding React to an existing project](/learn/add-react-to-an-existing-project), or [building a framework](/learn/building-a-react-framework). - -Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, React recommends using a framework that integrates with build tools like Vite for new projects. +我们也推荐在 [将 React 添加到现有项目](/learn/add-react-to-an-existing-project) 或 [构建框架](/learn/building-a-react-framework) 时使用 Vite。 +就像 Svelte 有 SvelteKit、Vue 有 Nuxt、Solid 有 SolidStart 一样，对于新项目，React 建议使用能与 Vite 这类构建工具集成的框架。 -## Limitations of Create React App {/*limitations-of-create-react-app*/} +## Create React App 的局限性 {/*limitations-of-create-react-app*/} -Create React App and build tools like it make it easy to get started building a React app. After running `npx create-react-app my-app`, you get a fully configured React app with a development server, linting, and a production build. +Create React App 及类似的构建工具使得开始构建 React 应用程序变得非常容易。运行 `npx create-react-app my-app` 后，你会得到一个完全配置好的 React 应用程序，包括开发服务器、代码检查和生产构建。 -For example, if you're building an internal admin tool, you can start with a landing page: +例如，如果你正在构建一个内部管理工具，你可以从一个登录页面开始： ```js export default function App() { @@ -90,13 +89,13 @@ export default function App() { } ``` -This allows you to immediately start coding in React with features like JSX, default linting rules, and a bundler to run in both development and production. However, this setup is missing the tools you need to build a real production app. +这让你能够立即开始用 React 进行编码，同时可以使用诸如 JSX、默认的代码检查规则，还有一个能在开发和生产环境中运行的打包工具。不过，这种设置缺少构建一个真正的生产应用程序所需的工具。 -Most production apps need solutions to problems like routing, data fetching, and code splitting. +大多数生产应用程序需要解决诸如路由、数据获取和代码分割等方面的问题。 -### Routing {/*routing*/} +### 路由 {/*routing*/} -Create React App does not include a specific routing solution. If you're just getting started, one option is to use `useState` to switch between routes. But doing this means that you can't share links to your app - every link would go to the same page - and structuring your app becomes difficult over time: +Create React App 并未包含特定的路由解决方案。如果你刚刚开始开发，一种选择是使用 `useState` 来在不同路由间进行切换。但这样做意味着你无法分享应用的链接，每个链接都会指向同一页面，而且随着时间推移，对应用进行架构设计会变得困难。 ```js import {useState} from 'react'; @@ -116,7 +115,7 @@ export default function App() { } ``` -This is why most apps that use Create React App solve add routing with a routing library like [React Router](https://reactrouter.com/) or [Tanstack Router](https://tanstack.com/router/latest). With a routing library, you can add additional routes to the app, which provides opinions on the structure of your app, and allows you to start sharing links to routes. For example, with React Router you can define routes: +这就是为什么大多数使用 Create React App 的应用会借助像 [React Router](https://reactrouter.com/) 或 [Tanstack Router](https://tanstack.com/router/latest) 这样的路由库来添加路由功能。使用路由库，你可以为应用添加额外的路由，这有助于规划应用的结构，还能让你开始分享指向特定路由的链接。例如，使用 React Router 你可以定义路由： ```js import {RouterProvider, createBrowserRouter} from 'react-router'; @@ -137,15 +136,15 @@ export default function App() { } ``` -With this change, you can share a link to `/dashboard` and the app will navigate to the dashboard page . Once you have a routing library, you can add additional features like nested routes, route guards, and route transitions, which are difficult to implement without a routing library. +通过这一改动，你可以分享指向 `/dashboard` 的链接，应用会导航至仪表盘页面。一旦你使用了路由库，就可以添加诸如嵌套路由、路由守卫和路由过渡效果等额外功能，而如果没有路由库，这些功能很难实现。 -There's a tradeoff being made here: the routing library adds complexity to the app, but it also adds features that are difficult to implement without it. +这里存在一个权衡：路由库会增加应用的复杂性，但它也能带来一些没有它就很难实现的功能。 -### Data Fetching {/*data-fetching*/} +### 数据获取 {/*data-fetching*/} -Another common problem in Create React App is data fetching. Create React App does not include a specific data fetching solution. If you're just getting started, a common option is to use `fetch` in an effect to load data. +在Create React App中，另一个常见的问题是数据获取。Create React App并未内置特定的数据获取解决方案。一个常见的选择是在 副作用函数(useEffect) 中使用 `fetch` 来加载数据。 -But doing this means that the data is fetched after the component renders, which can cause network waterfalls. Network waterfalls are caused by fetching data when your app renders instead of in parallel while the code is downloading: +但是，这样做意味着数据是在组件渲染之后才获取的，这可能会导致 网络瀑布流问题（network waterfalls）。网络瀑布流问题的产生是因为数据是在应用程序渲染时才开始获取的，而不是在代码下载的同时并行获取数据： ```js export default function Dashboard() { @@ -166,9 +165,9 @@ export default function Dashboard() { } ``` -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 [React Query](https://react-query.tanstack.com/), [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. +在 副作用函数（useEffect） 中获取数据意味着用户需要等待更长时间才能看到内容，即使这些数据本可以更早地获取。为了解决这个问题，你可以使用一些数据获取库，例如：[React Query](https://react-query.tanstack.com/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/)，这些库提供了预取数据的功能，使得请求可以在组件渲染之前就开始，从而减少用户等待时间并提升性能 -These libraries work best when integrated with your routing "loader" pattern to specify data dependencies at the route level, which allows the router to optimize your data fetches: +这些库在与路由的 "loader" 模式 集成时效果最佳，可以在路由级别指定数据依赖关系，从而使路由器能够优化数据获取： ```js export async function loader() { @@ -187,21 +186,21 @@ export default function Dashboard({loaderData}) { } ``` -On initial load, the router can fetch the data immediately before the route is rendered. As the user navigates around the app, the router is able to fetch both the data and the route at the same time, parallelizing the fetches. This reduces the time it takes to see the content on the screen, and can improve the user experience. +在首次加载时，路由器可以在渲染路由之前立即获取数据。当用户在应用中进行导航时，路由器能够同时获取数据和路由，实现并行获取。这减少了用户在屏幕上看到内容所需的时间，并且可以改善用户体验。 -However, this requires correctly configuring the loaders in your app and trades off complexity for performance. +然而，这需要在你的应用中正确配置加载器，并且要在性能提升和复杂度增加之间进行权衡。 -### Code Splitting {/*code-splitting*/} +### 代码分割 {/*code-splitting*/} -Another common problem in Create React App is [code splitting](https://www.patterns.dev/vanilla/bundle-splitting). Create React App does not include a specific code splitting solution. If you're just getting started, you might not consider code splitting at all. +Create React App 中的另一个常见问题是 [代码分割](https://www.patterns.dev/vanilla/bundle-splitting)。Create React App 并未包含特定的代码分割解决方案。如果你刚刚开始开发，你可能根本不会考虑代码分割。 -This means your app is shipped as a single bundle: +这意味着你的应用会作为一个单一的捆绑包进行发布（部署）。 ```txt - bundle.js 75kb ``` -But for ideal performance, you should "split" your code into separate bundles so the user only needs to download what they need. This decreases the time the user needs to wait to load your app, by only downloading the code they need to see the page they are on. +但为了达到理想的性能表现，你应该将代码 “分割” 成多个独立的代码包，这样用户只需下载他们所需要的部分。通过仅下载查看当前页面所需的代码，就能减少用户加载应用的等待时间。 ```txt - core.js 25kb @@ -209,7 +208,7 @@ But for ideal performance, you should "split" your code into separate bundles so - dashboard.js 25kb ``` -One way to do code-splitting is with `React.lazy`. However, this means that the code is not fetched until the component renders, which can cause network waterfalls. A more optimal solution is to use a router feature that fetches the code in parallel while the code is downloading. For example, React Router provides a `lazy` option to specify that a route should be code split and optimize when it is loaded: +实现代码分割的一种方法是使用 `React.lazy`。不过，这意味着代码要到组件渲染时才会被获取，这可能会导致网络瀑布效应。更优的解决方案是利用路由器的一项功能，在代码下载的同时并行获取代码。例如，React Router 提供了一个 `lazy` 选项，用于指定某个路由应进行代码分割，并对其加载时机进行优化： ```js import Home from './Home'; @@ -222,88 +221,89 @@ const router = createBrowserRouter([ ]); ``` -Optimized code-splitting is tricky to get right, and it's easy to make mistakes that can cause the user to download more code than they need. It works best when integrated with your router and data loading solutions to maximize caching, parallelize fetches, and support ["import on interaction"](https://www.patterns.dev/vanilla/import-on-interaction) patterns. +优化代码分割很难做到恰到好处，而且很容易犯错，导致用户下载的代码超出实际所需。当代码分割与路由和数据加载解决方案集成时，效果最佳，这样可以最大限度地利用缓存、并行获取数据，并支持 ["交互时导入"](https://www.patterns.dev/vanilla/import-on-interaction) 模式。 -### And more... {/*and-more*/} +### 更多内容… {/*and-more*/} -These are just a few examples of the limitations of Create React App. +这些只是 Create React App 的一些限制示例。 -Once you've integrated routing, data-fetching, and code splitting, you now also need to consider pending states, navigation interruptions, error messages to the user, and revalidation of the data. There are entire categories of problems that users need to solve like: +一旦你集成了路由、数据获取和代码分割，你现在还需要考虑挂起状态、导航中断、向用户显示错误信息以及数据的重新验证。用户需要解决一系列问题，例如：
-All of these work together to create the most optimal [loading sequence](https://www.patterns.dev/vanilla/loading-sequence). +所有这些（因素/元素/部分等，需结合前文确定）共同作用，以打造出最理想的 [加载顺序](https://www.patterns.dev/vanilla/loading-sequence)。 -Solving each of these problems individually in Create React App can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas users may not be familiar with. In order to solve these problems, users end up building their own bespoke solutions on top of Create React App, which was the problem Create React App originally tried to solve. +在 Create React App 中逐个解决这些问题可能颇具难度，因为每个问题都相互关联，而且解决这些问题可能需要用户深入掌握他们或许并不熟悉的领域的专业知识。为了解决这些问题，用户最终会在 Create React App 的基础上构建自己的定制化解决方案，而这恰恰是 Create React App 最初试图解决的问题。 -## Why we Recommend Frameworks {/*why-we-recommend-frameworks*/} +## 为什么我们推荐框架 {/*why-we-recommend-frameworks*/} -Although you could solve all these pieces yourself in a build tool like Create React App, Vite, or Parcel, it is hard to do well. Just like when Create React App itself integrated several build tools together, you need a tool to integrate all of these features together to provide the best experience to users. +虽然你可以自己使用 Create React App、Vite 或 Parcel 等构建工具解决所有这些问题，但要做好却并非易事。就像 Create React App 本身将多个构建工具集成在一起一样，你需要一个工具将所有这些功能集成在一起，以便为用户提供最佳体验。 -This category of tools that integrates build tools, rendering, routing, data fetching, and code splitting are known as "frameworks" -- or if you prefer to call React itself a framework, you might call them "metaframeworks". +这类能够集成构建工具、渲染、路由、数据获取和代码分割等功能的工具被称作 “框架”。或者，如果你倾向于将 React 本身视为一个框架，那么你可以把它们称为 “元框架”。 -Frameworks impose some opinions about structuring your app in order to provide a much better user experience, in the same way build tools impose some opinions to make tooling easier. This is why we started recommending frameworks like [Next.js](https://nextjs.org/), [React Router](https://reactrouter.com/), and [Expo](https://expo.dev/) for new projects. +框架会对应用的架构设计提出一些规范建议，目的是为用户带来更好的体验，这就如同构建工具会给出一些规范建议以使工具的使用更加便捷一样。这就是我们开始为新项目推荐像 [Next.js](https://nextjs.org/)、[React Router](https://reactrouter.com/) 和 [Expo](https://expo.dev/) 这类框架的原因。 -Frameworks provide the same getting started experience as Create React App, but also provide solutions to problems users need to solve anyway in real production apps. +框架提供了与Create React App相同的入门体验，但同时也为用户在实际生产应用中必须解决的问题提供了解决方案。 -#### Server rendering is optional {/*server-rendering-is-optional*/} +#### 服务器端渲染是可选的 {/*server-rendering-is-optional*/} -The frameworks we recommend all provide the option to create a [client-side rendered (CSR)](https://developer.mozilla.org/en-US/docs/Glossary/CSR) app. +我们推荐的框架都提供了创建 [客户端渲染（CSR）](https://developer.mozilla.org/en-US/docs/Glossary/CSR) 应用的选项。 -In some cases, CSR is the right choice for a page, but many times it's not. Even if most of your app is client-side, there are often individual pages that could benefit from server rendering features like [static-site generation (SSG)](https://developer.mozilla.org/en-US/docs/Glossary/SSG) or [server-side rendering (SSR)](https://developer.mozilla.org/en-US/docs/Glossary/SSR), for example a Terms of Service page, or documentation. +在某些情况下，客户端渲染（CSR）对于某个页面来说是正确的选择，但很多时候并非如此。即使你的应用大部分采用客户端渲染，通常也会有一些单独的页面能够从服务器端渲染特性中获益，比如 [静态网站生成（SSG）](https://developer.mozilla.org/en-US/docs/Glossary/SSG) 或 [服务器端渲染（SSR）](https://developer.mozilla.org/en-US/docs/Glossary/SSR)，例如服务条款页面或文档页面。 -Server rendering generally sends less JavaScript to the client, and a full HTML document which produces a faster [First Contentful Paint (FCP)](https://web.dev/articles/fcp) by reducing [Total Blocking Time (TBD)](https://web.dev/articles/tbt), which can also lower [Interaction to Next Paint (INP)](https://web.dev/articles/inp). This is why the [Chrome team has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance. +服务器渲染通常会向客户端发送更少的JavaScript代码，并生成一个完整的HTML文档，这通过减少 [总阻塞时间（TBT）](https://web.dev/articles/tbt) 来提高 [首次内容绘制（FCP）](https://web.dev/articles/fcp) 的速度，同时也可能降低 [下一次绘制的交互时间（INP）](https://web.dev/articles/inp)。这就是为什么 [Chrome 团队鼓励](https://web.dev/articles/rendering-on-the-web) 开发者考虑使用静态或服务器端渲染，而不是完全的客户端渲染方法，以实现最佳性能。 -There are tradeoffs to using a server, and it is not always the best option for every page. Generating pages on the server incurs additional cost and takes time to generate which can increase [Time to First Byte (TTFB)](https://web.dev/articles/ttfb). The best performing apps are able to pick the right rendering strategy on a per-page basis, based on the tradeoffs of each strategy. +使用服务器渲染存在一定的权衡，它并不总是每个页面的最佳选择。在服务器上生成页面会产生额外的成本，并且需要时间来完成，这可能会增加 [首字节时间（TTFB）](https://web.dev/articles/ttfb)。性能最佳的应用程序能够根据每种策略的权衡，在逐页的基础上选择正确的渲染策略。 -Frameworks provide the option to use a server on any page if you want to, but do not force you to use a server. This allows you to pick the right rendering strategy for each page in your app. +框架提供了在任何页面上使用服务器的选项，但并不会强制你使用服务器。这允许你为应用程序中的每个页面选择最合适的渲染策略。 -#### What About Server Components {/*server-components*/} +#### 关于服务器组件 {/*server-components*/} -The frameworks we recommend also include support for React Server Components. +我们推荐的框架还支持 React 服务器组件。 -Server Components help solve these problems by moving routing and data fetching to the server, and allowing code splitting to be done for client components based on the data you render, instead of just the route rendered, and reducing the amount of JavaScript shipped for the best possible [loading sequence](https://www.patterns.dev/vanilla/loading-sequence). +服务器组件通过将路由和数据获取操作移至服务器端来帮助解决这些问题。它允许基于渲染的数据（而非仅仅基于所渲染的路由）对客户端组件进行代码分割，并且减少发送的 JavaScript 代码量，以实现尽可能理想的 [加载顺序](https://www.patterns.dev/vanilla/loading-sequence)。 -Server Components do not require a server. They can be run at build time on your CI server to create a static-site generated app (SSG) app, at runtime on a web server for a server-side rendered (SSR) app. +服务器组件并不一定需要实时运行的服务器支持。它们既可以在持续集成（CI）服务器的构建阶段运行，以创建一个静态网站生成（SSG）应用；也可以在 Web 服务器的运行时阶段使用，从而实现服务器端渲染（SSR）应用。 -See [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data-fetching-with-react-server-components) and [the docs](/reference/rsc/server-components) for more info. +有关更多信息，请参阅 [介绍零捆绑包大小的 React 服务器组件](/blog/2020/12/21/data-fetching-with-react-server-components) 和 [相关文档](/reference/rsc/server-components)。 -#### Server Rendering is not just for SEO {/*server-rendering-is-not-just-for-seo*/} +#### 服务器渲染不仅仅用于 SEO {/*server-rendering-is-not-just-for-seo*/} -A common misunderstanding is that server rendering is only for [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO). +一个常见的误解是，服务器端渲染仅仅是为了 [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO)。 -While server rendering can improve SEO, it also improves performance by reducing the amount of JavaScript the user needs to download and parse before they can see the content on the screen. +虽然服务器端渲染可以提升搜索引擎优化效果，但它还能通过减少用户在看到屏幕上的内容之前需要下载和解析的 JavaScript 代码量来提高性能。 -This is why the Chrome team [has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance. +这就是为什么 Chrome 团队 [has encouraged](https://web.dev/articles/rendering-on-the-web) 开发者考虑采用静态渲染或服务器端渲染，而非完全的客户端渲染方式，以实现尽可能最佳的性能。 --- -_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._ +感谢 [Dan Abramov](https://bsky.app/profile/danabra.mov) 创建了 Create React App，也感谢 [Joe Haddad](https://github.com/Timer)、 [Ian Schmitz](https://github.com/ianschmitz)、 [Brody McKee](https://github.com/mrmckeb) 以及 [其他众多贡献者](https://github.com/facebook/create-react-app/graphs/contributors) 多年来对 Create React App 的维护。感谢 [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social)、[Dan Abramov](https://bsky.app/profile/danabra.mov)、[Devon Govett](https://bsky.app/profile/devongovett.bsky.social)、[Eli White](https://x.com/Eli_White)、[Jack Herrington](https://bsky.app/profile/jherr.dev)、[Joe Savona](https://x.com/en_JS)、[Lauren Tan](https://bsky.app/profile/no.lol)、[Lee Robinson](https://x.com/leeerob)、[Mark Erikson](https://bsky.app/profile/acemarke.dev)、[Ryan Florence](https://x.com/ryanflorence)、[Sophie Alpert](https://bsky.app/profile/sophiebits.com)、[Tanner Linsley](https://bsky.app/profile/tannerlinsley.com) 和 [Theo Browne](https://x.com/theo) 对这篇文章进行审阅并提供反馈。 + From 69493185abab032b312201d4b8b858519982c3e0 Mon Sep 17 00:00:00 2001 From: Y-timer <434234339@qq.com> Date: Tue, 18 Feb 2025 22:42:22 +0800 Subject: [PATCH 02/21] Apply suggestions from code review Co-authored-by: Xavi Lee --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 1e0c002b56..6d6fec1a3f 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 @@ -21,13 +21,13 @@ description: 今天，我们不再推荐在新应用中使用 Create React App 要创建一个 React 应用，你必须安装一堆工具，并手动将它们配置在一起，以支持 JSX、代码检查（linting）和热更新（hot reloading）等基本功能。这很难正确的完成，因此 [社区](https://github.com/react-boilerplate/react-boilerplate) 为 [常见的](https://github.com/gaearon/react-hot-boilerplate) [设置](https://github.com/erikras/react-redux-universal-hot-example) [创建] 了(https://github.com/kriasoft/react-starter-kit) [模板代码](https://github.com/petehunt/react-boilerplate)。然而，模板代码很难更新，而且代码碎片化的情况使得 React 难以推出新功能。 -Create React App 通过将多个工具整合到一个推荐的配置中，解决了这些问题。这使得应用程序能够以简单的方式升级到新的工具特性，同时也让 React 团队能够将重要的工具变更（如快速刷新支持、React Hooks 的 lint 规则）部署给尽可能广泛的用户群体。 +Create React App 通过将多个工具整合到一个推荐的配置中，解决了这些问题。这使得应用程序能够以简单的方式升级到新的工具特性，同时也让 React 团队能够将重要的工具变更（如快速刷新支持、React Hook 的 lint 规则）部署给尽可能广泛的用户群体。 这种模式变得非常流行，以至于如今有一整类工具都采用这种方式工作。 ## 弃用 Create React App {/*deprecating-create-react-app*/} -尽管 Create React App 可以轻松上手，但仍存在 [一些限制](#limitations-of-create-react-app)，这些限制使得构建高性能的生产应用程序变得困难。原则上，我们可以通过将其逐步发展成一个 [framework](#why-we-recommend-frameworks) 来解决这些问题。 +尽管 Create React App 可以轻松上手，但仍存在 [一些限制](#limitations-of-create-react-app)，这些限制使得构建高性能的生产应用程序变得困难。原则上，我们可以通过将其逐步发展成一个 [框架](#why-we-recommend-frameworks) 来解决这些问题。 然而，由于 Create React App 目前没有活跃的维护者，并且已经有许多现有的框架能够解决这些问题，我们决定弃用 Create React App。 @@ -77,7 +77,7 @@ React Router v7 是一个基于 Vite 的框架，它能让你在一个具备路 Create React App 及类似的构建工具使得开始构建 React 应用程序变得非常容易。运行 `npx create-react-app my-app` 后，你会得到一个完全配置好的 React 应用程序，包括开发服务器、代码检查和生产构建。 -例如，如果你正在构建一个内部管理工具，你可以从一个登录页面开始： +例如，如果你正在构建一个内部管理工具，你可以从一个落地页开始： ```js export default function App() { From 7f8805ec68bc86397def4b4700fe0bd26c030848 Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Tue, 18 Feb 2025 22:46:02 +0800 Subject: [PATCH 03/21] fix --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 1 + 1 file changed, 1 insertion(+) 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 6d6fec1a3f..1d1d5c602c 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 @@ -71,6 +71,7 @@ React Router v7 是一个基于 Vite 的框架，它能让你在一个具备路 我们也推荐在 [将 React 添加到现有项目](/learn/add-react-to-an-existing-project) 或 [构建框架](/learn/building-a-react-framework) 时使用 Vite。 就像 Svelte 有 SvelteKit、Vue 有 Nuxt、Solid 有 SolidStart 一样，对于新项目，React 建议使用能与 Vite 这类构建工具集成的框架。 + ## Create React App 的局限性 {/*limitations-of-create-react-app*/} From 8ec065aab6b27d46e1a1acdf85cf12259a192b5d Mon Sep 17 00:00:00 2001 From: Y-timer <434234339@qq.com> Date: Tue, 18 Feb 2025 22:47:40 +0800 Subject: [PATCH 04/21] Update src/content/blog/2025/02/14/sunsetting-create-react-app.md Co-authored-by: Xavi Lee --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1d1d5c602c..bec2fa51f0 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 @@ -195,7 +195,7 @@ export default function Dashboard({loaderData}) { Create React App 中的另一个常见问题是 [代码分割](https://www.patterns.dev/vanilla/bundle-splitting)。Create React App 并未包含特定的代码分割解决方案。如果你刚刚开始开发，你可能根本不会考虑代码分割。 -这意味着你的应用会作为一个单一的捆绑包进行发布（部署）。 +这意味着你的应用会作为一个单一的 bundle 进行发布（部署）。 ```txt - bundle.js 75kb From af4232af264cef5b7b27e4ce20a5e7526ca7191f Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Tue, 18 Feb 2025 22:50:46 +0800 Subject: [PATCH 05/21] fix --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 -- 1 file changed, 2 deletions(-) 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 bec2fa51f0..f9fc6cf485 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 @@ -306,5 +306,3 @@ const router = createBrowserRouter([ --- 感谢 [Dan Abramov](https://bsky.app/profile/danabra.mov) 创建了 Create React App，也感谢 [Joe Haddad](https://github.com/Timer)、 [Ian Schmitz](https://github.com/ianschmitz)、 [Brody McKee](https://github.com/mrmckeb) 以及 [其他众多贡献者](https://github.com/facebook/create-react-app/graphs/contributors) 多年来对 Create React App 的维护。感谢 [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social)、[Dan Abramov](https://bsky.app/profile/danabra.mov)、[Devon Govett](https://bsky.app/profile/devongovett.bsky.social)、[Eli White](https://x.com/Eli_White)、[Jack Herrington](https://bsky.app/profile/jherr.dev)、[Joe Savona](https://x.com/en_JS)、[Lauren Tan](https://bsky.app/profile/no.lol)、[Lee Robinson](https://x.com/leeerob)、[Mark Erikson](https://bsky.app/profile/acemarke.dev)、[Ryan Florence](https://x.com/ryanflorence)、[Sophie Alpert](https://bsky.app/profile/sophiebits.com)、[Tanner Linsley](https://bsky.app/profile/tannerlinsley.com) 和 [Theo Browne](https://x.com/theo) 对这篇文章进行审阅并提供反馈。 - - From 449506632f59e673ef6eed7d656b96551760b2ec Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Tue, 18 Feb 2025 22:53:19 +0800 Subject: [PATCH 06/21] fix --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 1 + 1 file changed, 1 insertion(+) 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 f9fc6cf485..8c8763e9a3 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 @@ -306,3 +306,4 @@ const router = createBrowserRouter([ --- 感谢 [Dan Abramov](https://bsky.app/profile/danabra.mov) 创建了 Create React App，也感谢 [Joe Haddad](https://github.com/Timer)、 [Ian Schmitz](https://github.com/ianschmitz)、 [Brody McKee](https://github.com/mrmckeb) 以及 [其他众多贡献者](https://github.com/facebook/create-react-app/graphs/contributors) 多年来对 Create React App 的维护。感谢 [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social)、[Dan Abramov](https://bsky.app/profile/danabra.mov)、[Devon Govett](https://bsky.app/profile/devongovett.bsky.social)、[Eli White](https://x.com/Eli_White)、[Jack Herrington](https://bsky.app/profile/jherr.dev)、[Joe Savona](https://x.com/en_JS)、[Lauren Tan](https://bsky.app/profile/no.lol)、[Lee Robinson](https://x.com/leeerob)、[Mark Erikson](https://bsky.app/profile/acemarke.dev)、[Ryan Florence](https://x.com/ryanflorence)、[Sophie Alpert](https://bsky.app/profile/sophiebits.com)、[Tanner Linsley](https://bsky.app/profile/tannerlinsley.com) 和 [Theo Browne](https://x.com/theo) 对这篇文章进行审阅并提供反馈。 + From aeaffb0afb5babe3afea50995593c751e88ac091 Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Tue, 18 Feb 2025 22:54:31 +0800 Subject: [PATCH 07/21] fix --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8c8763e9a3..2e96647b2c 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 @@ -143,7 +143,7 @@ export default function App() { ### 数据获取 {/*data-fetching*/} -在Create React App中，另一个常见的问题是数据获取。Create React App并未内置特定的数据获取解决方案。一个常见的选择是在 副作用函数(useEffect) 中使用 `fetch` 来加载数据。 +在 Create React App 中，另一个常见的问题是数据获取。Create React App并未内置特定的数据获取解决方案。一个常见的选择是在 副作用函数(useEffect) 中使用 `fetch` 来加载数据。 但是，这样做意味着数据是在组件渲染之后才获取的，这可能会导致 网络瀑布流问题（network waterfalls）。网络瀑布流问题的产生是因为数据是在应用程序渲染时才开始获取的，而不是在代码下载的同时并行获取数据： From c750970b103154bf3da8f5ef6602dc0f1ba6630f Mon Sep 17 00:00:00 2001 From: Y-timer <434234339@qq.com> Date: Tue, 18 Feb 2025 22:58:06 +0800 Subject: [PATCH 08/21] Update src/content/blog/2025/02/14/sunsetting-create-react-app.md --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 2e96647b2c..14406e0322 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 @@ -51,7 +51,7 @@ This error message will only be shown once per install. 对于现有的应用程序，这些指南将帮助你迁移到仅客户端的单页应用（SPA）： * [Next.js 的 Create React App 迁移指南](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app) -* [React Router 的框架采用指南](https://reactrouter.com/upgrading/component-routes). +* [React Router 的框架适配指南](https://reactrouter.com/upgrading/component-routes). * [Expo webpack 到 Expo Router 的迁移指南](https://docs.expo.dev/router/migrate/from-expo-webpack/) Create React App 将继续以维护模式运行，并且我们已经发布了一个新版本的 Create React App 以支持 React 19。 From 329728a8515aa344016db7c26a16dab7c746c8db Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Wed, 19 Feb 2025 07:08:13 +0800 Subject: [PATCH 09/21] Apply suggestions from code review --- .../blog/2025/02/14/sunsetting-create-react-app.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 14406e0322..e4e83971ea 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 @@ -251,9 +251,9 @@ const router = createBrowserRouter([ -所有这些（因素/元素/部分等，需结合前文确定）共同作用，以打造出最理想的 [加载顺序](https://www.patterns.dev/vanilla/loading-sequence)。 +所有这些共同作用，以打造出最理想的 [加载顺序](https://www.patterns.dev/vanilla/loading-sequence)。 -在 Create React App 中逐个解决这些问题可能颇具难度，因为每个问题都相互关联，而且解决这些问题可能需要用户深入掌握他们或许并不熟悉的领域的专业知识。为了解决这些问题，用户最终会在 Create React App 的基础上构建自己的定制化解决方案，而这恰恰是 Create React App 最初试图解决的问题。 +在 Create React App 中逐个解决这些问题可能颇具难度，因为每个问题都相互关联，而且解决这些问题可能需要用户深入掌握他们或许并不熟悉的领域的专业知识。为了解决这些问题，用户最终会在 Create React App 的基础上构建自己的定制化解决方案，而这恰恰是 Create React App 最初试图解决的问题。 ## 为什么我们推荐框架 {/*why-we-recommend-frameworks*/} @@ -263,7 +263,7 @@ const router = createBrowserRouter([ 框架会对应用的架构设计提出一些规范建议，目的是为用户带来更好的体验，这就如同构建工具会给出一些规范建议以使工具的使用更加便捷一样。这就是我们开始为新项目推荐像 [Next.js](https://nextjs.org/)、[React Router](https://reactrouter.com/) 和 [Expo](https://expo.dev/) 这类框架的原因。 -框架提供了与Create React App相同的入门体验，但同时也为用户在实际生产应用中必须解决的问题提供了解决方案。 +框架提供了与 Create React App 相同的入门体验，但同时也为用户在实际生产应用中必须解决的问题提供了解决方案。 @@ -287,7 +287,7 @@ const router = createBrowserRouter([ 服务器组件并不一定需要实时运行的服务器支持。它们既可以在持续集成（CI）服务器的构建阶段运行，以创建一个静态网站生成（SSG）应用；也可以在 Web 服务器的运行时阶段使用，从而实现服务器端渲染（SSR）应用。 -有关更多信息，请参阅 [介绍零捆绑包大小的 React 服务器组件](/blog/2020/12/21/data-fetching-with-react-server-components) 和 [相关文档](/reference/rsc/server-components)。 +有关更多信息，请参阅 [介绍零 bundle 大小的 React 服务器组件](/blog/2020/12/21/data-fetching-with-react-server-components) 和 [相关文档](/reference/rsc/server-components)。 From 658d97246a5cf882cae93cb15df8c12c5572cd4e Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Wed, 19 Feb 2025 07:08:31 +0800 Subject: [PATCH 10/21] Update src/content/blog/2025/02/14/sunsetting-create-react-app.md --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e4e83971ea..29703cfc1d 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 @@ -259,7 +259,7 @@ const router = createBrowserRouter([ 虽然你可以自己使用 Create React App、Vite 或 Parcel 等构建工具解决所有这些问题，但要做好却并非易事。就像 Create React App 本身将多个构建工具集成在一起一样，你需要一个工具将所有这些功能集成在一起，以便为用户提供最佳体验。 -这类能够集成构建工具、渲染、路由、数据获取和代码分割等功能的工具被称作 “框架”。或者，如果你倾向于将 React 本身视为一个框架，那么你可以把它们称为 “元框架”。 +这类能够集成构建工具、渲染、路由、数据获取和代码分割等功能的工具被称作“框架”。或者，如果你倾向于将 React 本身视为一个框架，那么你可以把它们称为“元框架”。 框架会对应用的架构设计提出一些规范建议，目的是为用户带来更好的体验，这就如同构建工具会给出一些规范建议以使工具的使用更加便捷一样。这就是我们开始为新项目推荐像 [Next.js](https://nextjs.org/)、[React Router](https://reactrouter.com/) 和 [Expo](https://expo.dev/) 这类框架的原因。 From 266dfd69ae90639f9e1a9bc5a0973c0974ba0057 Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Wed, 19 Feb 2025 07:13:21 +0800 Subject: [PATCH 11/21] fix --- .../blog/2025/02/14/sunsetting-create-react-app.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 29703cfc1d..53d72a384a 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 @@ -1,8 +1,8 @@ --- -title: "停止维护 Create React App" +title: "逐步淘汰 Create React App" author: Matt Carroll 和 Ricky Hanlon date: 2025/02/14 -description: 今天，我们不再推荐在新应用中使用 Create React App，并鼓励现有应用迁移到框架。当框架不适合你的项目，或者你更倾向于从构建框架开始时，我们还提供了文档。 +description: 今天，我们不再推荐在新应用中使用 Create React App，并鼓励现有应用迁移到框架。当框架不适合你的项目，或者你更倾向于从构建一个框架开始时，我们还提供了文档。 --- 2025 年 2 月 14 日，作者：[Matt Carroll](https://twitter.com/mattcarrollcode) 和 [Ricky Hanlon](https://bsky.app/profile/ricky.fm) @@ -11,7 +11,7 @@ description: 今天，我们不再推荐在新应用中使用 Create React App -今天，我们不再推荐在新应用中使用 [Create React App](https://create-react-app.dev/)，并鼓励现有应用迁移到 [框架](/learn/creating-a-react-app)。当框架不适合你的项目，或者你更倾向于从 [构建框架](/learn/building-a-react-framework)开始时，我们还提供了文档。 +今天，我们不再推荐在新应用中使用 [Create React App](https://create-react-app.dev/)，并鼓励现有应用迁移到 [框架](/learn/creating-a-react-app)。当框架不适合你的项目，或者你更倾向于从 [构建一个框架](/learn/building-a-react-framework)开始时，我们还提供了文档。 @@ -68,7 +68,7 @@ Create React App 将继续以维护模式运行，并且我们已经发布了一 React Router v7 是一个基于 Vite 的框架，它能让你在一个具备路由和数据获取功能的框架中，使用 Vite 快速的开发服务器和构建工具。就像我们推荐的其他框架一样，你可以使用 React Router v7 构建单页应用（SPA）。 -我们也推荐在 [将 React 添加到现有项目](/learn/add-react-to-an-existing-project) 或 [构建框架](/learn/building-a-react-framework) 时使用 Vite。 +我们也推荐在 [将 React 添加到现有项目](/learn/add-react-to-an-existing-project) 或 [构建一个框架](/learn/building-a-react-framework) 时使用 Vite。 就像 Svelte 有 SvelteKit、Vue 有 Nuxt、Solid 有 SolidStart 一样，对于新项目，React 建议使用能与 Vite 这类构建工具集成的框架。 @@ -269,9 +269,9 @@ const router = createBrowserRouter([ #### 服务器端渲染是可选的 {/*server-rendering-is-optional*/} -我们推荐的框架都提供了创建 [客户端渲染（CSR）](https://developer.mozilla.org/en-US/docs/Glossary/CSR) 应用的选项。 +我们推荐的框架都提供了创建 [客户端渲染（CSR）](https://developer.mozilla.org/zh-CN/docs/Glossary/CSR) 应用的选项。 -在某些情况下，客户端渲染（CSR）对于某个页面来说是正确的选择，但很多时候并非如此。即使你的应用大部分采用客户端渲染，通常也会有一些单独的页面能够从服务器端渲染特性中获益，比如 [静态网站生成（SSG）](https://developer.mozilla.org/en-US/docs/Glossary/SSG) 或 [服务器端渲染（SSR）](https://developer.mozilla.org/en-US/docs/Glossary/SSR)，例如服务条款页面或文档页面。 +在某些情况下，客户端渲染（CSR）对于某个页面来说是正确的选择，但很多时候并非如此。即使你的应用大部分采用客户端渲染，通常也会有一些单独的页面能够从服务器端渲染特性中获益，比如 [静态网站生成（SSG）](https://developer.mozilla.org/zh-CN/docs/Glossary/SSG) 或 [服务器端渲染（SSR）](https://developer.mozilla.org/zh-CN/docs/Glossary/SSR)，例如服务条款页面或文档页面。 服务器渲染通常会向客户端发送更少的JavaScript代码，并生成一个完整的HTML文档，这通过减少 [总阻塞时间（TBT）](https://web.dev/articles/tbt) 来提高 [首次内容绘制（FCP）](https://web.dev/articles/fcp) 的速度，同时也可能降低 [下一次绘制的交互时间（INP）](https://web.dev/articles/inp)。这就是为什么 [Chrome 团队鼓励](https://web.dev/articles/rendering-on-the-web) 开发者考虑使用静态或服务器端渲染，而不是完全的客户端渲染方法，以实现最佳性能。 @@ -295,7 +295,7 @@ const router = createBrowserRouter([ #### 服务器渲染不仅仅用于 SEO {/*server-rendering-is-not-just-for-seo*/} -一个常见的误解是，服务器端渲染仅仅是为了 [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO)。 +一个常见的误解是，服务器端渲染仅仅是为了 [SEO](https://developer.mozilla.org/zh-CN/docs/Glossary/SEO)。 虽然服务器端渲染可以提升搜索引擎优化效果，但它还能通过减少用户在看到屏幕上的内容之前需要下载和解析的 JavaScript 代码量来提高性能。 From 78554f9fcf116168e7a364b24eda7424fea34362 Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Wed, 19 Feb 2025 13:22:42 +0800 Subject: [PATCH 12/21] fix --- .../2025/02/14/sunsetting-create-react-app.md | 49 ++++++++++--------- 1 file changed, 26 insertions(+), 23 deletions(-) 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 64c390ba32..89ebc8d22b 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 @@ -2,7 +2,7 @@ title: "逐步淘汰 Create React App" author: Matt Carroll 和 Ricky Hanlon date: 2025/02/14 -description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch. +description: 今天，我们正式宣布弃用 Create React App 作为新应用的推荐工具，并建议现有应用迁移至主流框架（如 Next.js、Remix 等），或迁移到 Vite、Parcel、RSBuild 等现代构建工具。我们还同步更新了相关文档，涵盖以下场景：当框架不适合你的项目时；当你希望自行构建框架时；以及当你希望通过从零开始搭建 React 应用来深入理解其工作原理时。 --- 2025 年 2 月 14 日，作者：[Matt Carroll](https://twitter.com/mattcarrollcode) 和 [Ricky Hanlon](https://bsky.app/profile/ricky.fm) @@ -11,9 +11,11 @@ description: Today, we’re deprecating Create React App for new apps, and encou -Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](#how-to-migrate-to-a-framework), or to [migrate to a build tool](#how-to-migrate-to-a-build-tool) like Vite, Parcel, or RSBuild. +今日起，我们将正式弃用 [Create React App](https://create-react-app.dev/) 作为新应用的推荐工具，并建议现有应用迁移至 [框架](#how-to-migrate-to-a-framework)，或迁移至 [构建工具](#how-to-migrate-to-a-build-tool)（如 Vite、Parcel 或 RSBuild）。 + +我们还提供了相关文档，适用于你的项目不适合使用框架的情况、你想要构建自己的框架，或者你只是想通过 [从零开始构建一个 React 应用](/learn/build-a-react-app-from-scratch) 来了解React的工作原理。 + -We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by [building a React app from scratch](/learn/build-a-react-app-from-scratch). @@ -29,7 +31,7 @@ Create React App 通过将多个工具整合到一个推荐的配置中，解决 ## 弃用 Create React App {/*deprecating-create-react-app*/} -Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-build-tools) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks). +虽然 Create React App 让入门变得简单，[但其存在的若干限制](#limitations-of-build-tools) 使得构建高性能的生产级应用颇具挑战。理论上，我们可以通过将其逐步发展为 [框架](#why-we-recommend-frameworks) 的方式来解决这些问题。 然而，由于 Create React App 目前没有活跃的维护者，并且已经有许多现有的框架能够解决这些问题，我们决定弃用 Create React App。 @@ -48,10 +50,10 @@ This error message will only be shown once per install. -We've also added a deprecation notice to the Create React App [website](https://create-react-app.dev/) and GitHub [repo](https://github.com/facebook/create-react-app). Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19. +我们已在 Create React App 的 [官网](https://create-react-app.dev/) 和 GitHub [代码仓库](https://github.com/facebook/create-react-app) 添加了弃用通知。Create React App 将以维护模式继续运行，并发布了与 React 19 兼容的新版本 Create React App。 -## How to Migrate to a Framework {/*how-to-migrate-to-a-framework*/} -We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) and single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and can be deployed to a CDN or static hosting service without a server. +## 如何迁移到框架 {/*how-to-migrate-to-a-framework*/} +我们推荐使用 [框架创建新的 React 应用](/learn/creating-a-react-app)。所有推荐的框架均支持客户端渲染（[CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)）和单页面应用（[SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)），并可通过 CDN 或静态托管服务部署，无需服务器支持。 对于现有的应用程序，这些指南将帮助你迁移到仅客户端的单页应用（SPA）： @@ -59,31 +61,32 @@ We recommend [creating new React apps](/learn/creating-a-react-app) with a frame * [React Router 的框架适配指南](https://reactrouter.com/upgrading/component-routes). * [Expo webpack 到 Expo Router 的迁移指南](https://docs.expo.dev/router/migrate/from-expo-webpack/) -## How to Migrate to a Build Tool {/*how-to-migrate-to-a-build-tool*/} +## 如何迁移到构建工具 {/*how-to-migrate-to-a-build-tool*/} 如果你的应用程序有特殊的限制，或者你更喜欢通过构建自己的框架来解决这些问题，或者你只是想从头学习 React 的工作原理，你可以使用 Vite、Parcel 或 Rsbuild 来定制自己的 React 设置。 -For existing apps, these guides will help you migrate to a build tool: +针对现有应用，以下指南将协助你迁移至构建工具： -* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/) -* [Parcel Create React App migration guide](https://stackoverflow.com/a/49605484) -* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra) +* [Create React App 到 Vite 迁移指南](https://www.robinwieruch.de/vite-create-react-app/) +* [Create React App 到 Parcel 迁移指南](https://stackoverflow.com/a/49605484) +* [Create React App 到 Rsbuild 迁移指南](https://rsbuild.dev/guide/migration/cra) -To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Building a React App from Scratch](/learn/build-a-react-app-from-scratch). +为帮助开发者快速上手 Vite、Parcel 或 Rsbuild，我们新增了 [从零开始构建 React 应用](/learn/build-a-react-app-from-scratch) 文档。 -#### Do I need a framework? {/*do-i-need-a-framework*/} +#### 是否需要使用框架？ {/*do-i-need-a-framework*/} + +大多数应用都能从使用框架中获益，但在某些合理场景下从零开始构建 React 应用也是可行的。经验法则是：若你的应用需要路由功能，使用框架将更具优势。 -Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework. +正如 Svelte 拥有 SvelteKit、Vue 拥有 Nuxt、Solid 拥有 SolidStart，[React 推荐使用框架](#why-we-recommend-frameworks)——这类框架已原生集成路由功能，并与数据获取、代码分割等特性深度整合。此举可避免开发者陷入自行编写复杂配置的困境，本质上规避了重复造轮子的风险。 -Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, [React recommends using a framework](#why-we-recommend-frameworks) that fully integrates routing into features like data-fetching and code-splitting out of the box. This avoids the pain of needing to write your own complex configurations and essentially build a framework yourself. -However, you can always [build a React app from scratch](/learn/build-a-react-app-from-scratch) using a build tool like Vite, Parcel, or Rsbuild. +不过，你仍可选择使用 Vite、Parcel 或 Rsbuild 等 [构建工具从零搭建 React 应用](/learn/build-a-react-app-from-scratch)。 -Continue reading to learn more about the [limitations of build tools](#limitations-of-build-tools) and [why we recommend frameworks](#why-we-recommend-frameworks). +请继续阅读以深入了解 [构建工具的局限性](#limitations-of-build-tools) 以及 [我们推荐框架的原因](#why-we-recommend-frameworks)。 ## Limitations of Build Tools {/*limitations-of-build-tools*/} @@ -116,7 +119,7 @@ import Home from './Home'; import Dashboard from './Dashboard'; export default function App() { - // ❌ Routing in state does not create URLs + // ❌ 状态管理式路由无法生成有效 URL const [route, setRoute] = useState('home'); return (
@@ -135,7 +138,7 @@ import {RouterProvider, createBrowserRouter} from 'react-router'; import Home from './Home'; import Dashboard from './Dashboard'; -// ✅ Each route has it's own URL +// ✅ 每个路由对应独立 URL const router = createBrowserRouter([ {path: '/', element: }, {path: '/dashboard', element: } @@ -162,7 +165,7 @@ export default function App() { export default function Dashboard() { const [data, setData] = useState(null); - // ❌ Fetching data in a component causes network waterfalls + // ❌ 在组件内获取数据会引发网络瀑布流 useEffect(() => { fetch('/api/data') .then(response => response.json()) @@ -188,7 +191,7 @@ export async function loader() { return data; } -// ✅ Fetching data in parallel while the code is downloading +// ✅ 在代码下载期间并行获取数据 export default function Dashboard({loaderData}) { return (
@@ -226,7 +229,7 @@ Create React App 中的另一个常见问题是 [代码分割](https://www.patte import Home from './Home'; import Dashboard from './Dashboard'; -// ✅ Routes are downloaded before rendering +// ✅ 路由代码在渲染前完成加载 const router = createBrowserRouter([ {path: '/', lazy: () => import('./Home')}, {path: '/dashboard', lazy: () => import('Dashboard')} From cf48ef9c9babcc1c457ca365924220be8651e340 Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Wed, 19 Feb 2025 13:28:19 +0800 Subject: [PATCH 13/21] fix --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 -- 1 file changed, 2 deletions(-) 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 89ebc8d22b..629f70d736 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 @@ -15,8 +15,6 @@ description: 今天，我们正式宣布弃用 Create React App 作为新应用 我们还提供了相关文档，适用于你的项目不适合使用框架的情况、你想要构建自己的框架，或者你只是想通过 [从零开始构建一个 React 应用](/learn/build-a-react-app-from-scratch) 来了解React的工作原理。 - - ----- From 102e7082546515cc2040480e7c72f34f545ed269 Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Wed, 19 Feb 2025 13:30:03 +0800 Subject: [PATCH 14/21] fix --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 1 - 1 file changed, 1 deletion(-) 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 629f70d736..25b616f941 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 @@ -79,7 +79,6 @@ This error message will only be shown once per install. 正如 Svelte 拥有 SvelteKit、Vue 拥有 Nuxt、Solid 拥有 SolidStart，[React 推荐使用框架](#why-we-recommend-frameworks)——这类框架已原生集成路由功能，并与数据获取、代码分割等特性深度整合。此举可避免开发者陷入自行编写复杂配置的困境，本质上规避了重复造轮子的风险。 - 不过，你仍可选择使用 Vite、Parcel 或 Rsbuild 等 [构建工具从零搭建 React 应用](/learn/build-a-react-app-from-scratch)。 From f99f79c6d78eec3f4ace48894db0174361e456a6 Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Wed, 19 Feb 2025 13:47:35 +0800 Subject: [PATCH 15/21] Update src/content/blog/2025/02/14/sunsetting-create-react-app.md --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 25b616f941..1f24bcfd1d 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 @@ -206,7 +206,7 @@ export default function Dashboard({loaderData}) { Create React App 中的另一个常见问题是 [代码分割](https://www.patterns.dev/vanilla/bundle-splitting)。Create React App 并未包含特定的代码分割解决方案。如果你刚刚开始开发，你可能根本不会考虑代码分割。 -这意味着你的应用会作为一个单一的 bundle 进行发布（部署）。 +这意味着你的应用会作为一个单一的 bundle 进行发布。 ```txt - bundle.js 75kb From 13d4bee93b38a1d67dbd03d8ae3dbef4430776b1 Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Wed, 19 Feb 2025 15:03:30 +0800 Subject: [PATCH 16/21] fix --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 1f24bcfd1d..aa745c90fd 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 @@ -154,7 +154,7 @@ export default function App() { ### 数据获取 {/*data-fetching*/} -在 Create React App 中，另一个常见的问题是数据获取。Create React App并未内置特定的数据获取解决方案。一个常见的选择是在 副作用函数(useEffect) 中使用 `fetch` 来加载数据。 +React 应用开发中的另一个常见问题是数据获取。Create React App 并没有内置特定的数据获取解决方案。如果你刚刚入门，常见的做法是在 副作用（effect） 中使用 fetch 方法来加载数据。 但是，这样做意味着数据是在组件渲染之后才获取的，这可能会导致 网络瀑布流问题（network waterfalls）。网络瀑布流问题的产生是因为数据是在应用程序渲染时才开始获取的，而不是在代码下载的同时并行获取数据： @@ -177,7 +177,7 @@ export default function Dashboard() { } ``` -在 副作用函数（useEffect） 中获取数据意味着用户需要等待更长时间才能看到内容，即使这些数据本可以更早地获取。为了解决这个问题，你可以使用一些数据获取库，例如：[React Query](https://react-query.tanstack.com/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/)，这些库提供了预取数据的功能，使得请求可以在组件渲染之前就开始，从而减少用户等待时间并提升性能 +在 副作用（effect） 中获取数据意味着用户需要等待更长时间才能看到内容，即使这些数据本可以更早地获取。为了解决这个问题，你可以使用一些数据获取库，例如：[React Query](https://react-query.tanstack.com/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/)，这些库提供了预取数据的功能，使得请求可以在组件渲染之前就开始，从而减少用户等待时间并提升性能 这些库在与路由的 "loader" 模式 集成时效果最佳，可以在路由级别指定数据依赖关系，从而使路由器能够优化数据获取： @@ -316,5 +316,5 @@ const router = createBrowserRouter([ --- -感谢 [Dan Abramov](https://bsky.app/profile/danabra.mov) 创建了 Create React App，也感谢 [Joe Haddad](https://github.com/Timer)、 [Ian Schmitz](https://github.com/ianschmitz)、 [Brody McKee](https://github.com/mrmckeb) 以及 [其他众多贡献者](https://github.com/facebook/create-react-app/graphs/contributors) 多年来对 Create React App 的维护。感谢 [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social)、[Dan Abramov](https://bsky.app/profile/danabra.mov)、[Devon Govett](https://bsky.app/profile/devongovett.bsky.social)、[Eli White](https://x.com/Eli_White)、[Jack Herrington](https://bsky.app/profile/jherr.dev)、[Joe Savona](https://x.com/en_JS)、[Lauren Tan](https://bsky.app/profile/no.lol)、[Lee Robinson](https://x.com/leeerob)、[Mark Erikson](https://bsky.app/profile/acemarke.dev)、[Ryan Florence](https://x.com/ryanflorence)、[Sophie Alpert](https://bsky.app/profile/sophiebits.com)、[Tanner Linsley](https://bsky.app/profile/tannerlinsley.com) 和 [Theo Browne](https://x.com/theo) 对这篇文章进行审阅并提供反馈。 +感谢 [Dan Abramov](https://bsky.app/profile/danabra.mov) 创建了 Create React App，也感谢 [Joe Haddad](https://github.com/Timer)、[Ian Schmitz](https://github.com/ianschmitz)、[Brody McKee](https://github.com/mrmckeb) 以及 [其他众多贡献者](https://github.com/facebook/create-react-app/graphs/contributors) 多年来对 Create React App 的维护。感谢 [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social)、[Dan Abramov](https://bsky.app/profile/danabra.mov)、[Devon Govett](https://bsky.app/profile/devongovett.bsky.social)、[Eli White](https://x.com/Eli_White)、[Jack Herrington](https://bsky.app/profile/jherr.dev)、[Joe Savona](https://x.com/en_JS)、[Lauren Tan](https://bsky.app/profile/no.lol)、[Lee Robinson](https://x.com/leeerob)、[Mark Erikson](https://bsky.app/profile/acemarke.dev)、[Ryan Florence](https://x.com/ryanflorence)、[Sophie Alpert](https://bsky.app/profile/sophiebits.com)、[Tanner Linsley](https://bsky.app/profile/tannerlinsley.com) 和 [Theo Browne](https://x.com/theo) 对这篇文章进行审阅并提供反馈。 From 1d4f7b5e7621c530892c41fcb214cee8f8f20519 Mon Sep 17 00:00:00 2001 From: tom <434234339@qq.com> Date: Wed, 19 Feb 2025 15:49:25 +0800 Subject: [PATCH 17/21] fix --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 aa745c90fd..a195c416d5 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 @@ -154,7 +154,7 @@ export default function App() { ### 数据获取 {/*data-fetching*/} -React 应用开发中的另一个常见问题是数据获取。Create React App 并没有内置特定的数据获取解决方案。如果你刚刚入门，常见的做法是在 副作用（effect） 中使用 fetch 方法来加载数据。 +React 应用开发中的另一个常见问题是数据获取。Create React App 并没有内置特定的数据获取解决方案。如果你刚刚入门，常见的做法是在副作用中使用 fetch 方法来加载数据。 但是，这样做意味着数据是在组件渲染之后才获取的，这可能会导致 网络瀑布流问题（network waterfalls）。网络瀑布流问题的产生是因为数据是在应用程序渲染时才开始获取的，而不是在代码下载的同时并行获取数据： @@ -177,7 +177,7 @@ export default function Dashboard() { } ``` -在 副作用（effect） 中获取数据意味着用户需要等待更长时间才能看到内容，即使这些数据本可以更早地获取。为了解决这个问题，你可以使用一些数据获取库，例如：[React Query](https://react-query.tanstack.com/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/)，这些库提供了预取数据的功能，使得请求可以在组件渲染之前就开始，从而减少用户等待时间并提升性能 +在副作用中获取数据意味着用户需要等待更长时间才能看到内容，即使这些数据本可以更早地获取。为了解决这个问题，你可以使用一些数据获取库，例如：[React Query](https://react-query.tanstack.com/)、[SWR](https://swr.vercel.app/)、[Apollo](https://www.apollographql.com/docs/react) 或 [Relay](https://relay.dev/)，这些库提供了预取数据的功能，使得请求可以在组件渲染之前就开始，从而减少用户等待时间并提升性能 这些库在与路由的 "loader" 模式 集成时效果最佳，可以在路由级别指定数据依赖关系，从而使路由器能够优化数据获取： From 66851217c7ba55a5092e8cca023addf0d7b57fb4 Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Wed, 19 Feb 2025 15:53:00 +0800 Subject: [PATCH 18/21] Update src/content/blog/2025/02/14/sunsetting-create-react-app.md --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a195c416d5..48dd91eda9 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 @@ -179,7 +179,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/)，这些库提供了预取数据的功能，使得请求可以在组件渲染之前就开始，从而减少用户等待时间并提升性能 -这些库在与路由的 "loader" 模式 集成时效果最佳，可以在路由级别指定数据依赖关系，从而使路由器能够优化数据获取： +这些库在与路由的“loader”模式集成时效果最佳，可以在路由级别指定数据依赖关系，从而使路由器能够优化数据获取： ```js export async function loader() { From 2062d1ed19cc0c47581364fe3ed1c19a7836c23e Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Wed, 19 Feb 2025 15:54:35 +0800 Subject: [PATCH 19/21] Apply suggestions from code review --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 48dd91eda9..58d5cefb4e 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 @@ -212,7 +212,7 @@ Create React App 中的另一个常见问题是 [代码分割](https://www.patte - bundle.js 75kb ``` -但为了达到理想的性能表现，你应该将代码 “分割” 成多个独立的代码包，这样用户只需下载他们所需要的部分。通过仅下载查看当前页面所需的代码，就能减少用户加载应用的等待时间。 +但为了达到理想的性能表现，你应该将代码“分割”成多个独立的代码包，这样用户只需下载他们所需要的部分。通过仅下载查看当前页面所需的代码，就能减少用户加载应用的等待时间。 ```txt - core.js 25kb From b523ad80ba4094f822d021fea61399a4c4ecadca Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Wed, 19 Feb 2025 15:56:12 +0800 Subject: [PATCH 20/21] Apply suggestions from code review --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 58d5cefb4e..7f2f844bd8 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 @@ -212,7 +212,7 @@ Create React App 中的另一个常见问题是 [代码分割](https://www.patte - bundle.js 75kb ``` -但为了达到理想的性能表现，你应该将代码“分割”成多个独立的代码包，这样用户只需下载他们所需要的部分。通过仅下载查看当前页面所需的代码，就能减少用户加载应用的等待时间。 +但为了达到理想的性能表现，你应该将代码“分割”成多个独立的代码包，这样用户只需下载他们所需要的部分。通过仅下载查看当前页面所需的代码，就能减少用户加载应用的等待时间。 ```txt - core.js 25kb From 33a7aba7308f006c5a5bf36d1793bf8c307537ef Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Wed, 19 Feb 2025 15:58:00 +0800 Subject: [PATCH 21/21] Apply suggestions from code review --- src/content/blog/2025/02/14/sunsetting-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 7f2f844bd8..f9ffb3b6ca 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 @@ -310,7 +310,7 @@ const router = createBrowserRouter([ 虽然服务器端渲染可以提升搜索引擎优化效果，但它还能通过减少用户在看到屏幕上的内容之前需要下载和解析的 JavaScript 代码量来提高性能。 -这就是为什么 Chrome 团队 [has encouraged](https://web.dev/articles/rendering-on-the-web) 开发者考虑采用静态渲染或服务器端渲染，而非完全的客户端渲染方式，以实现尽可能最佳的性能。 +这就是为什么 Chrome 团队 [已经鼓励](https://web.dev/articles/rendering-on-the-web) 开发者考虑采用静态渲染或服务器端渲染，而非完全的客户端渲染方式，以实现尽可能最佳的性能。