diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000000..0de500150a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.github/ISSUE_TEMPLATE/0-bug.yml b/.github/ISSUE_TEMPLATE/0-bug.yml deleted file mode 100644 index 56d2e8540f..0000000000 --- a/.github/ISSUE_TEMPLATE/0-bug.yml +++ /dev/null @@ -1,34 +0,0 @@ -name: "🐛 Report a bug" -description: "Report a problem on the website." -title: "[Bug]: " -labels: ["bug: unconfirmed"] -body: - - type: textarea - attributes: - label: Summary - description: | - A clear and concise summary of what the bug is. - placeholder: | - Example bug report: - When I click the "Submit" button on "Feedback", nothing happens. - validations: - required: true - - type: input - attributes: - label: Page - description: | - What page(s) did you encounter this bug on? - placeholder: | - https://react.dev/ - validations: - required: true - - type: textarea - attributes: - label: Details - description: | - Please provide any additional details about the bug. - placeholder: | - Example details: - The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists. - validations: - required: false diff --git a/.github/ISSUE_TEMPLATE/1-typo.yml b/.github/ISSUE_TEMPLATE/1-typo.yml deleted file mode 100644 index c86557a116..0000000000 --- a/.github/ISSUE_TEMPLATE/1-typo.yml +++ /dev/null @@ -1,34 +0,0 @@ -name: "🤦 Typo or mistake" -description: "Report a typo or mistake in the docs." -title: "[Typo]: " -labels: ["type: typos"] -body: - - type: textarea - attributes: - label: Summary - description: | - A clear and concise summary of what the mistake is. - placeholder: | - Example: - The code example on the "useReducer" page includes an unused variable `nextId`. - validations: - required: true - - type: input - attributes: - label: Page - description: | - What page is the typo on? - placeholder: | - https://react.dev/ - validations: - required: true - - type: textarea - attributes: - label: Details - description: | - Please provide a explanation for why this is a mistake. - placeholder: | - Example mistake: - In the "useReducer" section of the "API Reference" page, the code example under "Writing a reducer function" includes an unused variable `nextId` that should be removed. - validations: - required: false diff --git a/.github/ISSUE_TEMPLATE/2-suggestion.yml b/.github/ISSUE_TEMPLATE/2-suggestion.yml deleted file mode 100644 index ac0b480fe9..0000000000 --- a/.github/ISSUE_TEMPLATE/2-suggestion.yml +++ /dev/null @@ -1,34 +0,0 @@ -name: "💡 Suggestions" -description: "Suggest a new page, section, or edit for an existing page." -title: "[Suggestion]: " -labels: ["type: documentation"] -body: - - type: textarea - attributes: - label: Summary - description: | - A clear and concise summary of what we should add. - placeholder: | - Example: - Add a new page for how to use React with TypeScript. - validations: - required: true - - type: input - attributes: - label: Page - description: | - What page is this about? - placeholder: | - https://react.dev/ - validations: - required: false - - type: textarea - attributes: - label: Details - description: | - Please provide a explanation for what you're suggesting. - placeholder: | - Example: - I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation. - validations: - required: true diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml deleted file mode 100644 index a47295e1e8..0000000000 --- a/.github/ISSUE_TEMPLATE/3-framework.yml +++ /dev/null @@ -1,116 +0,0 @@ -name: "📄 Suggest new framework" -description: "I am a framework author applying to be included as a recommended framework." -title: "[Framework]: " -labels: ["type: framework"] -body: - - type: markdown - attributes: - value: | - ## Apply to be included as a recommended React framework - - _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._ - - Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production. - - While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision). - - To be included, frameworks must meet the following criteria: - - - **Free & open-source**: must be open source and free to use. - - **Well maintained**. must be actively maintained, providing bug fixes and improvements. - - **Active community**: must have a sufficiently large and active community to support users. - - **Clear onboarding**: must have clear install steps to install the React version of the framework. - - **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem. - - **Self-hosting option**: must support an option to self-host applications without losing access to features. - - **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh. - - **User experience**. must provide built-in support for common problems like routing and data-fetching. - - **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time. - - Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below. - - type: input - attributes: - label: Name - description: | - What is the name of your framework? - validations: - required: true - - type: input - attributes: - label: Homepage - description: | - What is the URL of your homepage? - validations: - required: true - - type: input - attributes: - label: Install instructions - description: | - What is the URL of your getting started guide? - validations: - required: true - - type: dropdown - attributes: - label: Is your framework open source? - description: | - We only recommend free and open source frameworks. - options: - - 'No' - - 'Yes' - validations: - required: true - - type: textarea - attributes: - label: Well maintained - description: | - Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples. - validations: - required: true - - type: textarea - attributes: - label: Active community - description: | - Please describe your community. Include the size of your community, and links to community resources. - validations: - required: true - - type: textarea - attributes: - label: Clear onboarding - description: | - Please describe how a user can install your framework with React. Include links to any relevant documentation. - validations: - required: true - - type: textarea - attributes: - label: Ecosystem compatibility - description: | - Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework. - validations: - required: true - - type: textarea - attributes: - label: Self-hosting option - description: | - Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework. - validations: - required: true - - type: textarea - attributes: - label: Developer Experience - description: | - Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh. - validations: - required: true - - type: textarea - attributes: - label: User Experience - description: | - Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR. - validations: - required: true - - type: textarea - attributes: - label: Compatible with our future vision for React - description: | - Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components. - validations: - required: true diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml deleted file mode 100644 index 63e310e0ba..0000000000 --- a/.github/ISSUE_TEMPLATE/config.yml +++ /dev/null @@ -1,7 +0,0 @@ -contact_links: - - name: 📃 Bugs in React - url: https://github.com/facebook/react/issues/new/choose - about: This issue tracker is not for bugs in React. Please file React issues here. - - name: 🤔 Questions and Help - url: https://reactjs.org/community/support.html - about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index 7e4f6d2f2c..0000000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index 83e7f2e8a9..8c46d96771 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -58,7 +58,7 @@ jobs: - name: Download base branch bundle stats uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e - if: success() && github.event.number + if: success() with: workflow: analyze.yml branch: ${{ github.event.pull_request.base.ref }} diff --git a/README.md b/README.md index 182192cb55..ecd588894a 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,15 @@ +# [React 中文文档](https://zh-hans.react.dev/) + +此仓库包含 [React 中文文档](https://zh-hans.react.dev/) 的文档及源码，并由官方实时同步。 + +## 参与贡献 + +目前，大部分的翻译工作都已经完成。现在主要工作是同步和完善已有翻译。 + +**参与贡献前，请仔细阅读 [React 中文文档译文规范](https://github.com/reactjs/zh-hans.react.dev/wiki/React-Translation-Guide)**。 + +--- + # react.dev This repo contains the source code and documentation powering [react.dev](https://react.dev/). diff --git a/TRANSLATION.md b/TRANSLATION.md new file mode 100644 index 0000000000..c07b511f91 --- /dev/null +++ b/TRANSLATION.md @@ -0,0 +1,66 @@ +# React 中文文档翻译指南 + +下面我们会从 [翻译注意事项](#翻译注意事项) 以及 [翻译流程](#翻译流程) 两个方面开始介绍。 + +关于翻译的问题和反馈，请移步至 [这个讨论](https://github.com/reactjs/zh-hans.react.dev/discussions/1089)。 + +如果你有除了翻译内容以外的贡献，请移步到 [英文文档仓库](https://github.com/reactjs/react.dev/tree/main/README.md)。 + +## 翻译注意事项 + +- 在翻译的过程中，我们需要遵循 [React 中文文档译文规范](https://github.com/reactjs/zh-hans.react.dev/wiki/React-Translation-Guide)。 +- 对于翻译中的专有名词，参见 [术语表](https://github.com/reactjs/zh-hans.react.dev/issues/2)。 + +## 翻译流程 + +1. 阅读 [翻译注意事项](#翻译注意事项) + +~~2. 挑选你想要翻译的文章并进行 [任务认领](https://github.com/reactjs/zh-hans.react.dev/issues/602)~~ （**目前翻译工作大多数已经完成，无需在这里认领，请留意新提出的 issue，在那里进行认领**） + +3. 你可能需要设置一些必要的开发环境，参见 [前提准备](#前提准备) +4. 准备就绪，你就可以进行 [翻译工作](#开始翻译)，翻译工作包括切换分支、内容修改和代码测试 +5. 需要将你的改变提交到 GitHub 并创建 Pull Request，参见 [提交和推送](#提交和推送) +6. 审查人员会审核你的 Pull Request，当两人以上通过该 Pull Request 时，你的翻译将被合并到仓库中 + +注：在以前，我们还有一份更为详细的 [翻译流程说明](https://github.com/reactjs/zh-hans.react.dev/issues/603)，可以供你参考 + +### 前提准备 + +- Git +- Node：任意从 12.x 开始或者更高的版本 +- Yarn：参见 [Yarn 网站上的安装说明](https://yarnpkg.com/lang/en/docs/install/) +- fork 该仓库（无论是什么样的贡献，都需要该操作） +- clone 这个仓库到本地：`git clone my-fork-name` + +#### 安装相关依赖 + +1. 进入该项目的根目录 +2. `yarn`：下载网站需要的 npm 依赖 + +#### 在本地运行 + +1. `yarn dev`：运行开发服务器（由 [Next.js](https://nextjs.org/) 支持） +2. `open http://localhost:3000`：用你最爱的浏览器打开这个网站 + +### 开始翻译 + +#### 切换分支 + +1. `git checkout main`：你可以在仓库中的任意文件夹运行这段命令，它会切换到 main 分支 +2. `git pull origin main`：这将确保你的 main 分支保持最新 +3. `git checkout -b the-name-of-my-branch`：这将创建一个新的分支，并切换到该分支（使用合适的名称替换 `the-name-of-my-branch`） + +#### 审查你的改变 + +> 在你为该项目做出贡献后，你可以先在本地审查你的贡献。 + +1. 如果可以，请在桌面和移动设备上测试最新版本在常见浏览器中的任何视觉变化。 +2. 运行 `yarn check-all`。（这将运行 Prettier、ESLint 以及验证 TypeScript 的类型）。 + +### 提交和推送 + +1. `git add -A && git commit -m "My message"`：暂存以及提交你的改变（使用其它提交信息替换 `My message`，例如 `Fix header logo on Android`） +2. `git push -u my-fork-name the-name-of-my-branch` +3. 进入 [zh-hans.react.dev 仓库](https://github.com/reactjs/zh-hans.react.dev)，你将看到你最新 push 的分支。 +4. 跟随 [GitHub 的指南](https://docs.github.com/zh/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request?tool=webui) 创建 Pull Request。 +5. 在你完成以上步骤之后，该仓库会触发预构建，此时你可以查看你的改变是否符合预期。 diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index fe92725170..76ee294dc7 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -74,7 +74,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) { {exit: isSubmitted} )}>

- {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'} + {isSubmitted ? '谢谢你的反馈意见！' : '这个页面对你有帮助吗？'}

{!isSubmitted && ( ) : ( @@ -87,7 +87,7 @@ export function Challenge({ onClick={toggleSolution} active={showSolution}> {' '} - {showSolution ? 'Hide solution' : 'Show solution'} + {showSolution ? '隐藏答案' : '展示答案'} ) )} @@ -101,7 +101,7 @@ export function Challenge({ )} onClick={handleClickNextChallenge} active> - Next {isRecipes ? 'Example' : 'Challenge'} + 下一个{isRecipes ? '示例' : '挑战'} )} @@ -111,13 +111,11 @@ export function Challenge({ {showSolution && (

- Solution + 答案

{currentChallenge.solution}
- + {hasNextChallenge && (

- Ready to learn this topic? + 想要仔细学习这个主题的内容吗？

{children} {path ? ( @@ -202,7 +202,7 @@ function LearnMore({ label="Read More" href={path} type="primary"> - Read More + 阅读更多 ) : null} @@ -216,7 +216,7 @@ function LearnMore({ function ReadBlogPost({path}: {path: string}) { return ( - Read Post + 阅读文章 ); @@ -253,7 +253,7 @@ function YouWillLearn({ children: any; isChapter?: boolean; }) { - let title = isChapter ? 'In this chapter' : 'You will learn'; + let title = isChapter ? '本章节' : '你将会学习到'; return {children}; } @@ -273,7 +273,6 @@ function AuthorCredit({

- Illustrated by{' '} {authorLink ? ( ) : ( author - )} + )}{' '} + 绘图

@@ -516,7 +516,7 @@ export const MDXComponents = { children: React.ReactNode; title: string; excerpt: string; - }) => , + }) => , Diagram, DiagramGroup, FullWidth({children}: {children: any}) { diff --git a/src/components/MDX/Recap.tsx b/src/components/MDX/Recap.tsx index 293304367d..3fe35e87ab 100644 --- a/src/components/MDX/Recap.tsx +++ b/src/components/MDX/Recap.tsx @@ -20,7 +20,7 @@ function Recap({children}: RecapProps) { return (

- Recap + 摘要

{children}
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx index 4a241c87cb..7e5534e853 100644 --- a/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/src/components/MDX/Sandpack/CustomPreset.tsx @@ -110,7 +110,7 @@ const SandboxShell = memo(function SandboxShell({ className="inline me-1.5 text-xl" displayDirection={isExpanded ? 'up' : 'down'} /> - {isExpanded ? 'Show less' : 'Show more'} + {isExpanded ? '收起' : '显示更多'} )} diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx index b51627d89b..11b424036a 100644 --- a/src/components/MDX/Sandpack/DownloadButton.tsx +++ b/src/components/MDX/Sandpack/DownloadButton.tsx @@ -109,7 +109,7 @@ ${css} onClick={downloadHTML} title="Download Sandbox" type="button"> - Download + 下载 ); } diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx index 20fc3b5fe2..b9a537e9ef 100644 --- a/src/components/MDX/YouWillLearnCard.tsx +++ b/src/components/MDX/YouWillLearnCard.tsx @@ -35,7 +35,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) { type="primary" size="md" label={title}> - Read More + 阅读更多
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx index 9060410202..f281d4d82b 100644 --- a/src/components/Seo.tsx +++ b/src/components/Seo.tsx @@ -50,7 +50,7 @@ export const Seo = withRouter( }`; // Allow setting a different title for Google results const pageTitle = - (titleForTitleTag ?? title) + (isHomePage ? '' : ' – React'); + (titleForTitleTag ?? title) + (isHomePage ? '' : ' – React 中文文档'); // Twitter's meta parser is not very good. const twitterTitle = pageTitle.replace(/[<>]/g, ''); let description = isHomePage diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index 9a69d179c3..28157d41b5 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -14,23 +14,23 @@ import type {RouteTag} from './Layout/getRouteMeta'; const variantMap = { foundation: { - name: 'Foundation', + name: '基础', classes: 'bg-yellow-50 text-white', }, intermediate: { - name: 'Intermediate', + name: '中级', classes: 'bg-purple-40 text-white', }, advanced: { - name: 'Advanced', + name: '高级', classes: 'bg-green-40 text-white', }, experimental: { - name: 'Experimental', + name: '实验性的', classes: 'bg-ui-orange text-white', }, deprecated: { - name: 'Deprecated', + name: '弃用', classes: 'bg-red-40 text-white', }, }; diff --git a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md index b0bc9f558a..3a15f670af 100644 --- a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md +++ b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md @@ -1,34 +1,34 @@ --- -title: "Introducing Zero-Bundle-Size React Server Components" +title: "介绍零打包大小的 React 服务器组件" author: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbage date: 2020/12/21 -description: 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. +description: 2020 年是漫长的一年。随着它的结束，我们想在节日里分享一份特别的更新，介绍我们对零打包大小的 React 服务器组件的研究。 --- -December 21, 2020 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), and [Sebastian Markbåge](https://twitter.com/sebmarkbage) +2020 年 12 月 21 日 [Dan Abramov](https://bsky.app/profile/danabra.mov)、[Lauren Tan](https://twitter.com/potetotes)、[Joseph Savona](https://twitter.com/en_JS) 与 [Sebastian Markbåge](https://twitter.com/sebmarkbage) --- -2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size **React Server Components**. +2020 年是漫长的一年。随着它的结束，我们想在节日里分享一份特别的更新，介绍我们对零打包大小的 **React 服务器组件** 的研究。 --- -To introduce React Server Components, we have prepared a talk and a demo. If you want, you can check them out during the holidays, or later when work picks back up in the new year. +为了介绍 React 服务器组件，我们准备了一次演讲和演示。如果你愿意，在假期期间或新年工作重新开始后查看它们。 -**React Server Components are still in research and development.** We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so **don't feel like you have to catch up right now!** +**React 服务器组件仍处于研究和开发阶段**。我们将以透明的精神分享这项工作，并希望从 React 社区获得初步反馈。这个过程需要很多时间，所以 **你现在不必急着赶上进展**！ -If you want to check them out, we recommend going in the following order: +如果你想了解它们，我们建议按照以下顺序进行查看： -1. **Watch the talk** to learn about React Server Components and see the demo. +1. **观看演讲** 以了解 React 服务器组件并观看演示。 -2. **[Clone the demo](http://github.com/reactjs/server-components-demo)** to play with React Server Components on your computer. +2. **[克隆演示](http://github.com/reactjs/server-components-demo)** 并在你的计算机上尝试使用 React 服务器组件。 -3. **[Read the RFC (with FAQ at the end)](https://github.com/reactjs/rfcs/pull/188)** for a deeper technical breakdown and to provide feedback. +3. **[阅读 RFC（文末有FAQ）](https://github.com/reactjs/rfcs/pull/188)** 以深入了解技术细节并提供反馈意见。 -We are excited to hear from you on the RFC or in replies to the [@reactjs](https://twitter.com/reactjs) Twitter handle. Happy holidays, stay safe, and see you next year! +我们非常期待你对 RFC 的反馈或者通过 [@reactjs](https://twitter.com/reactjs) 的 Twitter 账号回复我们。祝你度过愉快的假期，保重，明年再见！ diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index bed24396de..72e2a57cd8 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -1,71 +1,71 @@ --- -title: "The Plan for React 18" +title: "React 18 的有关计划" author: Andrew Clark, Brian Vaughn, Christine Abernathy, Dan Abramov, Rachel Nabors, Rick Hanlon, Sebastian Markbage, and Seth Webster date: 2021/06/08 -description: The React team is excited to share a few updates. We’ve started work on the React 18 release, which will be our next major version. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. We’ve published a React 18 Alpha so that library authors can try it and provide feedback... +description: React 团队很高兴分享一些更新。我们已经开始推进 React 18 的更新，也正是我们的下一个主要版本。我们已经创建了一些工作组，筹备 React 18 新功能在社区内逐步推广的相关工作。我们已经发布了一个 React 18 Alpha 版本，以便于一些库的作者们能够测试并反馈…… --- -June 8, 2021 by [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Seth Webster](https://twitter.com/sethwebster) +2021 年 7 月 8 日 [Andrew Clark](https://twitter.com/acdlite)、[Brian Vaughn](https://github.com/bvaughn)、[Christine Abernathy](https://twitter.com/abernathyca)、[Dan Abramov](https://bsky.app/profile/danabra.mov)、[Rachel Nabors](https://twitter.com/rachelnabors)、[Rick Hanlon](https://twitter.com/rickhanlonii)、[Sebastian Markbåge](https://twitter.com/sebmarkbage) 与 [Seth Webster](https://twitter.com/sethwebster) --- -The React team is excited to share a few updates: +React 团队很高兴分享一些更新： -1. We’ve started work on the React 18 release, which will be our next major version. -2. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. -3. We’ve published a React 18 Alpha so that library authors can try it and provide feedback. +1. 我们已经开始推进 React 18 的更新，也正是我们的下一个主要版本。 +2. 我们已经创建了一些工作组，筹备 React 18 新功能在社区内逐步推广的相关工作。 +3. 我们已经发布了一个 React 18 Alpha 版本，以便于一些库的作者们能够测试并反馈。 -These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you're curious! +这些更新主要针对于第三方库的维护者们。如果你正在学习，教授或者使用 React 来构建面向用户的应用程序，你可以忽略这篇文章。但是如果你对此感到好奇，我们也非常欢迎你关注 React 18 工作组中的讨论。 --- -## What’s coming in React 18 {/*whats-coming-in-react-18*/} +## React 18 带来了什么 {/*whats-coming-in-react-18*/} -When it’s released, React 18 will include out-of-the-box improvements (like [automatic batching](https://github.com/reactwg/react-18/discussions/21)), new APIs (like [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), and a [new streaming server renderer](https://github.com/reactwg/react-18/discussions/37) with built-in support for `React.lazy`. +当 React 18 发布时，它将会有更好的开箱即用能力（如 [自动批处理](https://github.com/reactwg/react-18/discussions/21)），全新的 API（如 [`startTransition`](https://github.com/reactwg/react-18/discussions/41)），以及支持 `React.lazy` 的 [全新的流式服务端渲染](https://github.com/reactwg/react-18/discussions/37)。 -These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app. +这些功能之所以能够实现，要归功于我们在 React 18 中新加入的可选择性启用的机制，“并发渲染”，并且它使得 React 可以同时准备多个版本的 UI。这些大部分都是对底层的改动，但是也为你的应用程序提高其真实性能和用户感知性能创造了新的可能性， -If you've been following our research into the future of React (we don't expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means **you will be able to adopt React 18 without rewrites and try the new features at your own pace.** +如果你一直在关注我们对 React 的未来的研究（我们并不希望你这么做！），你可能已经听说过“并发模式”，或许还听说过它可能会对你的应用程序造成破坏性变更。为了回应社区对此的反馈，我们已经重新设计了渐进式的升级策略。相比于之前要么不升级，要么全部升级这样一刀切的方式，现在的只有被并发渲染相关的新功能触发的更新才会启用并发渲染。这对于工程实践的意义是，**你无需重写代码即可直接使用 React 18，并且可以根据自己的节奏和需求来尝试新特性**。 -## A gradual adoption strategy {/*a-gradual-adoption-strategy*/} +## 渐进式应用策略 {/*a-gradual-adoption-strategy*/} -Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. **You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release**. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon. +由于并发机制在 React 18 中是一个可选功能，没有对组件行为造成明显的破坏性变更。**你几乎不需要对应用程序中的代码进行任何改动，就可以直接升级到 React 18，这比以往的 React 版本升级要容易许多**。根据我们自己将几个应用程序升级到 React 18 的经验来看，预计大多数用户能在一个下午的时间内完成升级工作。 -We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we've found that most React components “just work” without additional changes. We're committed to making sure this is a smooth upgrade for the entire community, so today we're announcing the React 18 Working Group. +我们在 Facebook 上成功地将并发功能赋予给了数以万计的组件，并且以我们的实践经验来看，大部分的 React 组件无需任何改动就能正常工作。今天我们成立了 React 18 工作组，我们将致力于保证整个社区都能顺利升级。 -## Working with the community {/*working-with-the-community*/} +## 与社区合作 {/*working-with-the-community*/} -We’re trying something new for this release: We've invited a panel of experts, developers, library authors, and educators from across the React community to participate in our [React 18 Working Group](https://github.com/reactwg/react-18) to provide feedback, ask questions, and collaborate on the release. We couldn't invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future! +在这次更新中，我们正在尝试一些新的可能：我们邀请了 React 社区的专家、开发者、库的作者以及教育者参与我们的 [React 18 工作组](https://github.com/reactwg/react-18)，以提供反馈，咨询问题以及参与版本更新。我们没有没办法将所有人都邀请到这个刚建立的小群体，但是如果这次试验成功的话，我们也期待更多人的加入。 -**The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.** The Working Group is hosted on [GitHub Discussions](https://github.com/reactwg/react-18/discussions) and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog. +**React 18 工作组的目标是为生态做好准备，使现有的应用程序和库能够顺利、渐进地采用 React 18**。该工作组被托管在 [GitHub 讨论区](https://github.com/reactwg/react-18/discussions) 以供公众阅读。工作组的成员也可以留下反馈，咨询问题以及分享想法。核心团队也将会使用这个代码仓库的讨论区来分享我们的研发成果。在新版本变得越来越稳定的同时，所有重要信息都会在博客上发布。 -For more information on upgrading to React 18, or additional resources about the release, see the [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4). +想要了解关于升级到 React 18 的更多信息，或者关于该版本的其他资源，请参阅 [React 18 公告](https://github.com/reactwg/react-18/discussions/4)。 -## Accessing the React 18 Working Group {/*accessing-the-react-18-working-group*/} +## 访问 React 18 工作组 {/*accessing-the-react-18-working-group*/} -Everyone can read the discussions in the [React 18 Working Group repo](https://github.com/reactwg/react-18). +每个人都可以阅读在 [React 18 工作组代码仓库](https://github.com/reactwg/react-18) 中的讨论信息。 -Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community. +我们预计对工作组感兴趣的人数会激增，所以目前只允许被邀请的成员可以创建或评论主题。不过，这些过程是完全公开的，所以每个人都能得到一致的信息。我们相信这是一个很好的折衷方案，既能为工作组的成员创造一个利于工作的环境，又能保持对广大社区的开放性。 -As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues). +和从前一样，你仍然可以在我们的 [issue](https://github.com/facebook/react/issues) 中发布错误报告、疑难问题和反馈等信息。 -## How to try React 18 Alpha today {/*how-to-try-react-18-alpha-today*/} +## 如何体验 React 18 alpha {/*how-to-try-react-18-alpha-today*/} -New alphas are [regularly published to npm using the `@alpha` tag](https://github.com/reactwg/react-18/discussions/9). These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday. +新的 alpha 版本是 [将 `@alpha` 标签定期发布到 npm 中](https://github.com/reactwg/react-18/discussions/9)。这些版本是由我们仓库主分支上最新的提交内容构建的。当一个新功能或者漏洞补丁被合并到主分支时，这些内容将在下一个工作日中出现在 alpha 版本中。 -There may be significant behavioral or API changes between alpha releases. Please remember that **alpha releases are not recommended for user-facing, production applications**. +在 alpha 版本之间可能会有重大的行为逻辑或者 API 的变动。请谨记，**alpha 版本不建议在面向用户的生产环境应用中使用**。 -## Projected React 18 release timeline {/*projected-react-18-release-timeline*/} +## React 18 的预计发布时间 {/*projected-react-18-release-timeline*/} -We don't have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications. +我们没有明确的版本更新排期，但是我们预计在 React 18 可以满足大部分的生产环境应用之前，需要几个月的时间来收集反馈和迭代更新。 -* Library Alpha: Available today -* Public Beta: At least several months -* Release Candidate (RC): At least several weeks after Beta -* General Availability: At least several weeks after RC +* 库的 Alpha 版本：今天可用 +* 公开的 Beta 版：至少几个月 +* RC 版本：至少在 Beta 版发布后的几周 +* 正式版：至少在 RC 版本发布之后的几周 -More details about our projected release timeline are [available in the Working Group](https://github.com/reactwg/react-18/discussions/9). We'll post updates on this blog when we're closer to a public release. +关于发布任务排期的更多细节都在 [走近工作组](https://github.com/reactwg/react-18/discussions/9)。当临近公开发布时，我们会在这个博客上发布更新。 diff --git a/src/content/blog/2021/12/17/react-conf-2021-recap.md b/src/content/blog/2021/12/17/react-conf-2021-recap.md index c9e75ff7b9..4adbc21e23 100644 --- a/src/content/blog/2021/12/17/react-conf-2021-recap.md +++ b/src/content/blog/2021/12/17/react-conf-2021-recap.md @@ -1,160 +1,160 @@ --- -title: "React Conf 2021 Recap" +title: "回顾 React Conf 2021" author: Jesslyn Tannady and Rick Hanlon date: 2021/12/17 -description: Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features. +description: 上周，我们举办了第六届 React Conf。在以往的几年中，我们在 React Conf 的舞台上发布了行业改变的信息，如 React Native 和 React Hooks。今年，我们从发布 React 18 和逐步采用并发功能开始，分享了我们对 React 的多平台愿景。 --- -December 17, 2021 by [Jesslyn Tannady](https://twitter.com/jtannady) and [Rick Hanlon](https://twitter.com/rickhanlonii) +2021 年 12 月 17 日 [Jesslyn Tannady](https://twitter.com/jtannady) 与 [Rick Hanlon](https://twitter.com/rickhanlonii) --- -Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as [_React Native_](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/) and [_React Hooks_](https://reactjs.org/docs/hooks-intro.html). This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features. +上周，我们举办了第六届 React Conf。在以往的几年中，我们在 React Conf 的舞台上发布了行业改变的信息，如 [**React Native**](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/) 和 [**React Hooks**](https://reactjs.org/docs/hooks-intro.html)。今年，我们从发布 React 18 和逐步采用并发功能开始，分享了我们对 React 的多平台愿景。 --- -This was the first time React Conf was hosted online, and it was streamed for free, translated to 8 different languages. Participants from all over the world joined our conference Discord and the replay event for accessibility in all timezones. Over 50,000 people registered, with over 60,000 views of 19 talks, and 5,000 participants in Discord across both events. +这是 React Conf 首次在线举办，并且免费直播，并翻译成 8 种不同的语言。来自世界各地的参与者参加了我们的会议 Discord 和针对所有时区都可访问的重播活动。超过 50000 人注册，19 场演讲总共有超过 60000 次观看，Discord 平台上两个活动共有 5000 名参与者。 -All the talks are [available to stream online](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa). +所有的演讲都可以 [在线播放](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa)。 -Here’s a summary of what was shared on stage: +以下是大会分享内容的摘要： -## React 18 and concurrent features {/*react-18-and-concurrent-features*/} +## React 18 和并发特性 {/*react-18-and-concurrent-features*/} -In the keynote, we shared our vision for the future of React starting with React 18. +在主题演讲中，我们分享了从 React 18 开始对未来 React 的愿景。 -React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Apps can upgrade to React 18 and begin gradually adopting concurrent features with the amount of effort on par with any other major release. +在没有引入任何重大的破坏性变化的情况下，React 18 添加了期待已久的并发渲染器和对 Suspense 的更新。应用程序可以升级到 React 18 并开始逐步采用并发功能，其工作量与任何其他主要版本相当。 -**This means there is no concurrent mode, only concurrent features.** +**这意味着没有并发模式，只有并发功能**。 -In the keynote, we also shared our vision for Suspense, Server Components, new React working groups, and our long-term many-platform vision for React Native. +在主题演讲中，我们还分享了对 Suspense、服务器组件、新 React 工作组的愿景，以及对 React Native 的长期多平台愿景。 -Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here: +请在此处观看 [Andrew Clark](https://twitter.com/acdlite)、[Juan Tejada](https://twitter.com/_jstejada)、[Lauren Tan](https://twitter.com/potetotes) 和 [Rick Hanlon](https://twitter.com/rickhanlonii) 的完整主题演讲： -## React 18 for Application Developers {/*react-18-for-application-developers*/} +## 面向应用程序开发人员的 React 18 {/*react-18-for-application-developers*/} -In the keynote, we also announced that the React 18 RC is available to try now. Pending further feedback, this is the exact version of React that we will publish to stable early next year. +在主题演讲中，我们还宣布 React 18 RC 现已可供试用。在等待进一步的反馈之前，这是我们将于明年初发布稳定版的 React 版本。 -To try the React 18 RC, upgrade your dependencies: +要尝试 React 18 RC，请升级你的依赖项： ```bash npm install react@rc react-dom@rc ``` -and switch to the new `createRoot` API: +并切换到新的 **createRoot** API： ```js -// before +// 切换前 const container = document.getElementById('root'); ReactDOM.render(, container); -// after +// 切换后 const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(); ``` -For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here: +有关升级到 React 18 的演示，请参阅 [Shruti Kapoor](https://twitter.com/shrutikapoor08) 的演讲： -## Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/} +## Suspense 串流服务端渲染 {/*streaming-server-rendering-with-suspense*/} -React 18 also includes improvements to server-side rendering performance using Suspense. +React 18 还包括使用 Suspense 对服务端渲染性能的改进。 -Streaming server rendering lets you generate HTML from React components on the server, and stream that HTML to your users. In React 18, you can use `Suspense` to break down your app into smaller independent units which can be streamed independently of each other without blocking the rest of the app. This means users will see your content sooner and be able to start interacting with it much faster. +串流服务端渲染允许你从服务器上的 React 组件生成 HTML，并将该 HTML 流式传输给用户。在 React 18 中，你可以使用 **Suspense** 将应用程序分解为更小的独立单元，这些单元可以彼此独立地进行流式传输，而不会阻塞应用程序的其余部分。这意味着用户将更快地看到你的内容，并能够更快地开始与之交互。 -For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here: +如需深入了解，请参阅 [Shaundai Person](https://twitter.com/shaundai) 的演讲： -## The first React working group {/*the-first-react-working-group*/} +## 第一个 React 工作组 {/*the-first-react-working-group*/} -For React 18, we created our first Working Group to collaborate with a panel of experts, developers, library maintainers, and educators. Together we worked to create our gradual adoption strategy and refine new APIs such as `useId`, `useSyncExternalStore`, and `useInsertionEffect`. +对于 React 18，我们创建了第一个工作组，与专家、开发人员、库维护人员和教育工作者小组合作。我们共同制定了逐步采用策略并完善了新的 API，例如 **useId**、**useSyncExternalStore** 和 **useInsertionEffect**。 -For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk: +有关这项工作的概述，请参阅 [Aakansha' Doshi](https://twitter.com/aakansha1216) 的演讲： -## React Developer Tooling {/*react-developer-tooling*/} +## React 开发者工具 {/*react-developer-tooling*/} -To support the new features in this release, we also announced the newly formed React DevTools team and a new Timeline Profiler to help developers debug their React apps. +为了支持此版本中的新功能，我们还宣布了新成立的 React DevTools 团队和新的 Timeline Profiler，以帮助开发人员调试他们的 React 应用程序。 -For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk: +有关新 DevTools 功能的更多信息和演示，请参阅 [Brian Vaughn](https://twitter.com/brian_d_vaughn) 的演讲： -## React without memo {/*react-without-memo*/} +## 没有 memo 的 React {/*react-without-memo*/} -Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype: +展望未来，[Xuan Huang (黄玄)](https://twitter.com/Huxpro) 分享了我们的 React Labs 对自动记忆编译器的研究的更新。查看此演讲以获取更多信息和编译器原型的演示： -## React docs keynote {/*react-docs-keynote*/} +## React 文档主题演讲 {/*react-docs-keynote*/} -[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's new docs ([now shipped as react.dev](/blog/2023/03/16/introducing-react-dev)): +[Rachel Nabors](https://twitter.com/rachelnabors) 开始了有关 React 学习和设计的部分演讲，并发表了关于我们对 React 新文档（[现已作为 React.dev 发布](/blog/2023/03/16/introducing-react-dev)）的投入的主题演讲： -## And more... {/*and-more*/} +## 以及更多 {/*and-more*/} -**We also heard talks on learning and designing with React:** +**我们还听到了有关使用 React 进行学习和设计的演讲**： -* Debbie O'Brien: [Things I learnt from the new React docs](https://youtu.be/-7odLW_hG7s). -* Sarah Rainsberger: [Learning in the Browser](https://youtu.be/5X-WEQflCL0). -* Linton Ye: [The ROI of Designing with React](https://youtu.be/7cPWmID5XAk). -* Delba de Oliveira: [Interactive playgrounds with React](https://youtu.be/zL8cz2W0z34). +* 由 Debbie O'Brien 演讲的 [Things I learnt from the new React docs](https://youtu.be/-7odLW_hG7s)。 +* 由 Sarah Rainsberger 演讲的 [Learning in the Browser](https://youtu.be/5X-WEQflCL0)。 +* 由 Linton Ye 演讲的 [The ROI of Designing with React](https://youtu.be/7cPWmID5XAk)。 +* 由 Delba de Oliveira 演讲的 [Interactive playgrounds with React](https://youtu.be/zL8cz2W0z34)。 -**Talks from the Relay, React Native, and PyTorch teams:** +**来自 Relay、React Native 和 PyTorch 团队的演讲**： -* Robert Balicki: [Re-introducing Relay](https://youtu.be/lhVGdErZuN4). -* Eric Rozell and Steven Moyes: [React Native Desktop](https://youtu.be/9L4FFrvwJwY). -* Roman Rädle: [On-device Machine Learning for React Native](https://youtu.be/NLj73vrc2I8) +* 由 Robert Balicki 演讲的 [Re-introducing Relay](https://youtu.be/lhVGdErZuN4)。 +* 由 Eric Rozell 和 Steven Moyes 演讲的 [React Native Desktop](https://youtu.be/9L4FFrvwJwY)。 +* 由 Roman Rädle 演讲的 [On-device Machine Learning for React Native](https://youtu.be/NLj73vrc2I8)。 -**And talks from the community on accessibility, tooling, and Server Components:** +**社区中关于可访问性、工具和服务器组件的演讲**： -* Daishi Kato: [React 18 for External Store Libraries](https://youtu.be/oPfSC5bQPR8). -* Diego Haz: [Building Accessible Components in React 18](https://youtu.be/dcm8fjBfro8). -* Tafu Nakazaki: [Accessible Japanese Form Components with React](https://youtu.be/S4a0QlsH0pU). -* Lyle Troxell: [UI tools for artists](https://youtu.be/b3l4WxipFsE). -* Helen Lin: [Hydrogen + React 18](https://youtu.be/HS6vIYkSNks). +* 由 Daishi Kato 演讲的 [React 18 for External Store Libraries](https://youtu.be/oPfSC5bQPR8)。 +* 由 Diego Haz 演讲的 [Building Accessible Components in React 18](https://youtu.be/dcm8fjBfro8)。 +* 由 Tafu Nakazaki 演讲的 [Accessible Japanese Form Components with React](https://youtu.be/S4a0QlsH0pU). +* 由 Lyle Troxell 演讲的 [UI tools for artists](https://youtu.be/b3l4WxipFsE)。 +* 由 Helen Lin 演讲的 [Hydrogen + React 18](https://youtu.be/HS6vIYkSNks)。 -## Thank you {/*thank-you*/} +## 感谢 {/*thank-you*/} -This was our first year planning a conference ourselves, and we have a lot of people to thank. +这是我们自己策划会议的第一年，我们要感谢很多人。 -First, thanks to all of our speakers [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0), and [Xuan Huang (黄玄)](https://twitter.com/Huxpro). +首先，感谢所有演讲者 [Aakansha Doshi](https://twitter.com/aakansha1216),、 [Andrew Clark](https://twitter.com/acdlite)、[Brian Vaughn](https://twitter.com/brian_d_vaughn)、[Daishi Kato](https://twitter.com/dai_shi)、[Debbie O'Brien](https://twitter.com/debs_obrien)、[Delba de Oliveira](https://twitter.com/delba_oliveira)、[Diego Haz](https://twitter.com/diegohaz)、[Eric Rozell](https://twitter.com/EricRozell)、[Helen Lin](https://twitter.com/wizardlyhel)、[Juan Tejada](https://twitter.com/_jstejada)、[Lauren Tan](https://twitter.com/potetotes)、[Linton Ye](https://twitter.com/lintonye)、[Lyle Troxell](https://twitter.com/lyle)、[Rachel Nabors](https://twitter.com/rachelnabors)、[Rick Hanlon](https://twitter.com/rickhanlonii)、[Robert Balicki](https://twitter.com/StatisticsFTW)、[Roman Rädle](https://twitter.com/raedle)、[Sarah Rainsberger](https://twitter.com/sarah11918)、[Shaundai Person](https://twitter.com/shaundai)、[Shruti Kapoor](https://twitter.com/shrutikapoor08)、[Steven Moyes](https://twitter.com/moyessa)、[Tafu Nakazaki](https://twitter.com/hawaiiman0) 和 [Xuan Huang (黄玄)](https://twitter.com/Huxpro)。 -Thanks to everyone who helped provide feedback on talks including [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), and [Tim Yung](https://twitter.com/yungsters). +感谢所有为会谈提供反馈的人，包括 [Andrew Clark](https://twitter.com/acdlite)、[Dan Abramov](https://bsky.app/profile/danabra.mov)、[Dave McCabe](https://twitter.com/mcc_abe)、[Eli White](https://twitter.com/Eli_White)、[Joe Savona](https://twitter.com/en_JS)、 [Lauren Tan](https://twitter.com/potetotes)、[Rachel Nabors](https://twitter.com/rachelnabors) 和 [Tim Yung](https://twitter.com/yungsters)。 -Thanks to [Lauren Tan](https://twitter.com/potetotes) for setting up the conference Discord and serving as our Discord admin. +感谢 [Lauren Tan](https://twitter.com/potetotes) 组织了 Discord 会议并担任我们的 Discord 管理员。 -Thanks to [Seth Webster](https://twitter.com/sethwebster) for feedback on overall direction and making sure we were focused on diversity and inclusion. +感谢 [Seth Webster](https://twitter.com/sethwebster) 对总体方向的反馈，并确保我们专注于多样性和包容性。 -Thanks to [Rachel Nabors](https://twitter.com/rachelnabors) for spearheading our moderation effort, and [Aisha Blake](https://twitter.com/AishaBlake) for creating our moderation guide, leading our moderation team, training the translators and moderators, and helping to moderate both events. +感谢 [Rachel Nabors](https://twitter.com/rachelnabors) 领导我们的审核工作，感谢 [Aisha Blake](https://twitter.com/AishaBlake) 创建我们的审核指南、领导我们的审核团队、培训翻译人员和审核人员以及帮助审核这两项活动。 -Thanks to our moderators [Jesslyn Tannady](https://twitter.com/jtannady), [Suzie Grange](https://twitter.com/missuze), [Becca Bailey](https://twitter.com/beccaliz), [Luna Wei](https://twitter.com/lunaleaps), [Joe Previte](https://twitter.com/jsjoeio), [Nicola Corti](https://twitter.com/Cortinico), [Gijs Weterings](https://twitter.com/gweterings), [Claudio Procida](https://twitter.com/claudiopro), Julia Neumann, Mengdi Chen, Jean Zhang, Ricky Li, and [Xuan Huang (黄玄)](https://twitter.com/Huxpro). +感谢我们的会议主席 [Jesslyn Tannady](https://twitter.com/jtannady)、[Suzie Grange](https://twitter.com/missuze)、[Becca Bailey](https://twitter.com/beccaliz)、[Luna Wei](https://twitter.com/lunaleaps)、[Joe Previte](https://twitter.com/jsjoeio)、[Nicola Corti](https://twitter.com/Cortinico)、[Gijs Weterings](https://twitter.com/gweterings)、[Claudio Procida](https://twitter.com/claudiopro)、Julia Neumann、Mengdi Chen、Jean Zhang、Ricky Li 和 [Xuan Huang (黄玄)](https://twitter.com/Huxpro)。 -Thanks to [Manjula Dube](https://twitter.com/manjula_dube), [Sahil Mhapsekar](https://twitter.com/apheri0), and Vihang Patel from [React India](https://www.reactindia.io/), and [Jasmine Xie](https://twitter.com/jasmine_xby), [QiChang Li](https://twitter.com/QCL15), and [YanLun Li](https://twitter.com/anneincoding) from [React China](https://twitter.com/ReactChina) for helping moderate our replay event and keep it engaging for the community. +感谢来自 [React India](https://www.reactindia.io/) 的 [Manjula Dube](https://twitter.com/manjula_dube)、[Sahil Mhapsekar](https://twitter.com/apheri0) 和 Vihang Patel，以及来自 [React China](https://twitter.com/ReactChina) 的 [Jasmine Xie](https://twitter.com/jasmine_xby)、[QiChang Li](https://twitter.com/QCL15) 和 [YanLun Li](https://twitter.com/anneincoding) 帮助主持我们的重播活动并保持其对社区的吸引力。 -Thanks to Vercel for publishing their [Virtual Event Starter Kit](https://vercel.com/virtual-event-starter-kit), which the conference website was built on, and to [Lee Robinson](https://twitter.com/leeerob) and [Delba de Oliveira](https://twitter.com/delba_oliveira) for sharing their experience running Next.js Conf. +感谢 Vercel 发布了会议网站所基于的 [虚拟活动入门套件](https://vercel.com/virtual-event-starter-kit)，并感谢 [Lee Robinson](https://twitter.com/leeerob) 和 [Delba de Oliveira](https://twitter.com/delba_oliveira) 分享了他们举办 Next.js Conf 的经验。 -Thanks to [Leah Silber](https://twitter.com/wifelette) for sharing her experience running conferences, learnings from running [RustConf](https://rustconf.com/), and for her book [Event Driven](https://leanpub.com/eventdriven/) and the advice it contains for running conferences. +感谢 [Leah Silber](https://twitter.com/wifelette) 分享她举办会议的经验、从举办 [RustConf](https://rustconf.com/) 中学到的知识，以及她的书 [《事件驱动》](https://leanpub.com/eventdriven/) 及其包含的关于举办会议的建议。 -Thanks to [Kevin Lewis](https://twitter.com/_phzn) and [Rachel Nabors](https://twitter.com/rachelnabors) for sharing their experience running Women of React Conf. +感谢 [Kevin Lewis](https://twitter.com/_phzn) 和 [Rachel Nabors](https://twitter.com/rachelnabors) 分享了她们举办 Women of React Conf 的经验。 -Thanks to [Aakansha Doshi](https://twitter.com/aakansha1216), [Laurie Barth](https://twitter.com/laurieontech), [Michael Chan](https://twitter.com/chantastic), and [Shaundai Person](https://twitter.com/shaundai) for their advice and ideas throughout planning. +感谢 [Aakansha Doshi](https://twitter.com/aakansha1216)、[Laurie Barth](https://twitter.com/laurieontech)、[Michael Chan](https://twitter.com/chantastic) 和 [Shaundai Person](https://twitter.com/shaundai) 在整个规划过程中提供的建议和想法。 -Thanks to [Dan Lebowitz](https://twitter.com/lebo) for help designing and building the conference website and tickets. +感谢 [Dan Lebowitz](https://twitter.com/lebo) 帮助设计和构建会议网站和门票。 -Thanks to Laura Podolak Waddell, Desmond Osei-Acheampong, Mark Rossi, Josh Toberman and others on the Facebook Video Productions team for recording the videos for the Keynote and Meta employee talks. +感谢 Laura Podolak Waddell、Desmond Osei-Acheampong、Mark Rossi、Josh Toberman 以及 Facebook 视频制作团队的其他人员录制了主题演讲和 Meta 员工演讲的视频。 -Thanks to our partner HitPlay for helping to organize the conference, editing all the videos in the stream, translating all the talks, and moderating the Discord in multiple languages. +感谢我们的合作伙伴 HitPlay 帮助组织会议、编辑直播中的所有视频、翻译所有演讲以及以多种语言主持 Discord。 -Finally, thanks to all of our participants for making this a great React Conf! +最后，感谢所有参与者让本次 React Conf 变得精彩！ diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md index 9d34dfaaa3..05d834e454 100644 --- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md +++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md @@ -1,47 +1,47 @@ --- -title: "How to Upgrade to React 18" +title: "如何升级到 React 18" author: Rick Hanlon date: 2022/03/08 -description: As we shared in the release post, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. +description: 正如我们在发布报告中分享的那样，React 18 借助新的并发渲染引入了许多新特性，对于已经存在的应用可以采用渐进式策略。在这篇文章中，我们会指导你如何逐步升级到 React 18。 --- -March 08, 2022 by [Rick Hanlon](https://twitter.com/rickhanlonii) +2022 年 8 月 3 日 [Rick Hanlon](https://twitter.com/rickhanlonii) --- -As we shared in the [release post](/blog/2022/03/29/react-v18), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. +正如我们在 [发布报告](/blog/2022/03/29/react-v18) 中分享的那样，React 18 借助新的并发渲染引入了许多新特性，对于已经存在的应用可以采用渐进式策略。在这篇文章中，我们会指导你如何逐步升级到 React 18。 -Please [report any issues](https://github.com/facebook/react/issues/new/choose) you encounter while upgrading to React 18. +如果你在升级的过程中遇到任何问题，可以在 GitHub [提 issue](https://github.com/facebook/react/issues/new/choose)。 -For React Native users, React 18 will ship in a future version of React Native. This is because React 18 relies on the New React Native Architecture to benefit from the new capabilities presented in this blogpost. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s). +对于 React Native 用户来说， React 18 会在 React Native 的未来版本中出现。因为 React 18 依赖于新的 React Native 架构才能受益于这篇文章中提出的新的能力。想了解更多信息，请查看 [这里的 React 会议纪要](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s)。 --- -## Installing {/*installing*/} +## 安装 {/*installing*/} -To install the latest version of React: +安装最新版的 React： ```bash npm install react react-dom ``` -Or if you’re using yarn: +或者也可以使用 yarn： ```bash yarn add react react-dom ``` -## Updates to Client Rendering APIs {/*updates-to-client-rendering-apis*/} +## 客户端渲染 API 的更新 {/*updates-to-client-rendering-apis*/} -When you first install React 18, you will see a warning in the console: +当你第一次安装 React 18 的时候，控制台会出现如下警告： @@ -49,41 +49,41 @@ ReactDOM.render is no longer supported in React 18. Use createRoot instead. Unti -React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features. +React 18 引入了一个新的 root API，它提供了更好的操作根节点的方式。新的 root API 还启用了新的并发渲染器，使开发者能够选择使用并发特性。 ```js -// Before +// 之前 import { render } from 'react-dom'; const container = document.getElementById('app'); render(, container); -// After +// 现在 import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); -const root = createRoot(container); // createRoot(container!) if you use TypeScript +const root = createRoot(container); // 如果你使用 TypeScript，请使用 createRoot(container!) root.render(); ``` -We’ve also changed `unmountComponentAtNode` to `root.unmount`: +我们也已经将 `unmountComponentAtNode` 修改为 `root.unmount`： ```js -// Before +// 之前 unmountComponentAtNode(container); -// After +// 现在 root.unmount(); ``` -We've also removed the callback from render, since it usually does not have the expected result when using Suspense: +我们从 render 中移除了回调函数，因为当使用 Suspense 的时候通常不是预期的结果： ```js -// Before +// 之前 const container = document.getElementById('app'); render(, container, () => { console.log('rendered'); }); -// After +// 现在 function AppWithCallbackAfterRender() { useEffect(() => { console.log('rendered'); @@ -99,59 +99,59 @@ root.render(); -There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information. +对于旧的 render 回调函数 API 没有一对一的替换——它取决于你的用例。查看工作组的 [使用 createRoot 替换 render](https://github.com/reactwg/react-18/discussions/5) 博文了解更多信息。 -Finally, if your app uses server-side rendering with hydration, upgrade `hydrate` to `hydrateRoot`: +最后如果应用通过激活使用了服务端渲染，你需要将 `hydrate` 升级到 `hydrateRoot`： ```js -// Before +// 之前 import { hydrate } from 'react-dom'; const container = document.getElementById('app'); hydrate(, container); -// After +// 现在 import { hydrateRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = hydrateRoot(container, ); -// Unlike with createRoot, you don't need a separate root.render() call here. +// 和 createRoot 不一样，在这里你不需要单独的 root.render()。 ``` -For more information, see the [working group discussion here](https://github.com/reactwg/react-18/discussions/5). +了解更多信息，请查看 [工作组的讨论](https://github.com/reactwg/react-18/discussions/5)。 -**If your app doesn't work after upgrading, check whether it's wrapped in ``.** [Strict Mode has gotten stricter in React 18](#updates-to-strict-mode), and not all your components may be resilient to the new checks it adds in development mode. If removing Strict Mode fixes your app, you can remove it during the upgrade, and then add it back (either at the top or for a part of the tree) after you fix the issues that it's pointing out. +**如果你的应用升级后无法工作，请检查它是否被 `` 包裹**。[严格模式在 React 18 中变得更加严格](#updates-to-strict-mode)，并不是所有组件都可以弹性应对它在开发模式中添加的新检查。如果移除严格模式可以修复你的应用，你可以在升级期间移除它，然后等你修复它指出的问题之后再在树的顶部或者其中一部分添加回来。 -## Updates to Server Rendering APIs {/*updates-to-server-rendering-apis*/} +## 服务端渲染 API 的更新 {/*updates-to-server-rendering-apis*/} -In this release, we’re revamping our `react-dom/server` APIs to fully support Suspense on the server and Streaming SSR. As part of these changes, we're deprecating the old Node streaming API, which does not support incremental Suspense streaming on the server. +在这次发布中，我们修改 `react-dom/server` API 使它完全支持服务端的 Suspense 和 流式 SSR。作为这些变化的一部分，我们正在废弃旧的 Node 流式 API，因为它不支持服务端的增量 Suspense 流。 -Using this API will now warn: +现在使用这个 API 会发出警告： -* `renderToNodeStream`: **Deprecated ⛔️️** +* `renderToNodeStream`：**废弃 ⛔️️** -Instead, for streaming in Node environments, use: -* `renderToPipeableStream`: **New ✨** +取而代之的是，对于 Node 环境中的流我们使用： +* `renderToPipeableStream`：**新增 ✨** -We're also introducing a new API to support streaming SSR with Suspense for modern edge runtime environments, such as Deno and Cloudflare workers: -* `renderToReadableStream`: **New ✨** +同时也引入了新的 API 借助 Suspense 为像 Deno 和 Cloudflare workers 这样的现代分布式运行时环境来支持流式 SSR： +* `renderToReadableStream`：**新增 ✨** -The following APIs will continue working, but with limited support for Suspense: -* `renderToString`: **Limited** ⚠️ -* `renderToStaticMarkup`: **Limited** ⚠️ +下面的 API 会继续工作，但是对于 Suspense 支持是有限的： +* `renderToString`：**有限制** ⚠️ +* `renderToStaticMarkup`：**有限制** ⚠️ -Finally, this API will continue to work for rendering e-mails: +最后这个 API 会继续用于渲染电子邮件： * `renderToStaticNodeStream` -For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021. +更多关于服务端渲染 API 的变化信息，可以查看工作组文章 [在服务端升级到 React 18](https://github.com/reactwg/react-18/discussions/22)，[深入探讨新的 Suspense SSR 架构](https://github.com/reactwg/react-18/discussions/37)，以及 [Shaundai 个人](https://twitter.com/shaundai) 在 React 2021 会议上关于 [使用 Suspense 的流式服务端渲染](https://www.youtube.com/watch?v=pj5N-Khihgc) 的演讲。 -## Updates to TypeScript definitions {/*updates-to-typescript-definitions*/} +## 更新 TypeScript 类型定义 {/*updates-to-typescript-definitions*/} -If your project uses TypeScript, you will need to update your `@types/react` and `@types/react-dom` dependencies to the latest versions. The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the `children` prop now needs to be listed explicitly when defining props, for example: +如果项目使用了 TypeScript，你需要更新 `@types/react` 和 `@types/react-dom` 依赖到最新版。新的类型更加安全并且能捕获过去常常被类型检查器忽略的问题。最值得注意的变化是，现在定义 props 时，`children` prop 需要被明确列出来，例如： ```typescript{3} interface MyButtonProps { @@ -160,51 +160,51 @@ interface MyButtonProps { } ``` -See the [React 18 typings pull request](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) for a full list of type-only changes. It links to example fixes in library types so you can see how to adjust your code. You can use the [automated migration script](https://github.com/eps1lon/types-react-codemod) to help port your application code to the new and safer typings faster. +查看 [React 18 类型 PR](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) 查看只有类型变了的完整清单。它链接到了在类型库中修复的例子，你可以从中了解如何调整你自己的代码。你可以使用 [自动迁移脚本](https://github.com/eps1lon/types-react-codemod) 来帮助你的应用代码更快变更到更安全的新类型。 -If you find a bug in the typings, please [file an issue](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package) in the DefinitelyTyped repo. +如果你发现了类型中的问题，请在 DefinitelyTyped 仓库 [提交 issue](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package)。 -## Automatic Batching {/*automatic-batching*/} +## 自动批处理 {/*automatic-batching*/} -React 18 adds out-of-the-box performance improvements by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default: +React 18 通过默认做更多批量处理来增加开箱即用性能提升。批量处理指的是 React 为了提高性能将多个 state 更新分组到一个单独的重渲染。React 18 之前，我们只在 React 事件处理函数内部实现批量更新，而 promise、setTimeout、本地事件处理函数或者其他事件中更新状态，在 React 中默认是不进行批量处理的： ```js -// Before React 18 only React events were batched +// React 18 之前，只有 React 事件会被批量处理 function handleClick() { setCount(c => c + 1); setFlag(f => !f); - // React will only re-render once at the end (that's batching!) + // React 只会在结束的时候重新渲染一次（这就是批量处理！） } setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); - // React will render twice, once for each state update (no batching) + // React 会渲染两次，每一个 state 更新的时候渲染一次（非批量处理） }, 1000); ``` -Starting in React 18 with `createRoot`, all updates will be automatically batched, no matter where they originate from. This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events: +从使用 `createRoot` 的 React 18 开始，无论来自于哪里，所有的更新都会自动批量处理。这意味着 timeout、promise、本地事件处理函数或者其他任何事件的更新都会和 React 事件内部的更新一样批量处理： ```js -// After React 18 updates inside of timeouts, promises, -// native event handlers or any other event are batched. +// React 18 中 timeout、promise、 +// 本地事件处理函数或者其他任何事件的更新都会批量处理。 function handleClick() { setCount(c => c + 1); setFlag(f => !f); - // React will only re-render once at the end (that's batching!) + // React 只会在结束的时候重新渲染一次（这就是批量处理！） } setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); - // React will only re-render once at the end (that's batching!) + // React 只会在结束的时候重新渲染一次（这就是批量处理！） }, 1000); ``` -This is a breaking change, but we expect this to result in less work rendering, and therefore better performance in your applications. To opt-out of automatic batching, you can use `flushSync`: +这是一个破坏性变更，但是我们期望这个变更可以产生更少的渲染工作，从而提高应用的性能表现。为了有选择性地使用自动化处理，你可以使用 `flushSync` 包裹： ```js import { flushSync } from 'react-dom'; @@ -213,60 +213,60 @@ function handleClick() { flushSync(() => { setCounter(c => c + 1); }); - // React has updated the DOM by now + // React 现在已经更新了 DOM flushSync(() => { setFlag(f => !f); }); - // React has updated the DOM by now + // React 现在已经更新了 DOM } ``` -For more information, see the [Automatic batching deep dive](https://github.com/reactwg/react-18/discussions/21). +更多信息请查看 [深入探索自动批处理](https://github.com/reactwg/react-18/discussions/21)。 -## New APIs for Libraries {/*new-apis-for-libraries*/} +## 新 API {/*new-apis-for-libraries*/} -In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs: +在 React 18 工作组，我们和第三方库的维护者合作，创建需要支持 styles 和外部存储中的特定用例的并发渲染的新 API。为了支持 React 18，一些第三方库可能需要切换到下面的 API 之一： -* `useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86). -* `useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for ``), require careful positioning in the DOM due to style precedence rules. Building a stylesheet capability that allows for composability within components is hard, so users often end up either loading all of their styles far from the components that may depend on them, or they use a style library which encapsulates this complexity. +样式表，无论是外部链接的 (``) 还是内联的 (``)，都需要在 DOM 中进行精确的定位，因为样式优先级规则。构建一个允许在组件内部进行组合的样式表功能是困难的，所以用户通常要么将所有的样式远离可能依赖它们的组件加载，要么使用一个封装了这种复杂性的样式库。 -In React 19, we're addressing this complexity and providing even deeper integration into Concurrent Rendering on the Client and Streaming Rendering on the Server with built in support for stylesheets. If you tell React the `precedence` of your stylesheet it will manage the insertion order of the stylesheet in the DOM and ensure that the stylesheet (if external) is loaded before revealing content that depends on those style rules. +在 React 19 中，我们正在解决这个复杂性，并提供更深入的集成到客户端的并发渲染和服务器的流式渲染，内置支持样式表。如果你告诉 React 你的样式表的 `precedence`，它将管理样式表在 DOM 中的插入顺序，并确保在显示依赖于这些样式规则的内容之前加载样式表（如果是外部的）。 ```js {4,5,17} function ComponentOne() { @@ -626,9 +626,9 @@ function ComponentTwo() { } ``` -During Server Side Rendering React will include the stylesheet in the ``, which ensures that the browser will not paint until it has loaded. If the stylesheet is discovered late after we've already started streaming, React will ensure that the stylesheet is inserted into the `` on the client before revealing the content of a Suspense boundary that depends on that stylesheet. +在服务器端渲染时，React 会在 `` 中包含样式表，确保浏览器在加载完样式表之前不会进行绘制。如果在已经开始流式传输后才发现样式表，React 会确保在揭示依赖于该样式表的 Suspense 边界的内容之前，将样式表插入到客户端的 `` 中。 -During Client Side Rendering React will wait for newly rendered stylesheets to load before committing the render. If you render this component from multiple places within your application React will only include the stylesheet once in the document: +在客户端渲染时，React 会等待新渲染的样式表加载完成后再提交渲染。如果你在应用程序的多个地方渲染此组件，React 会只在文档中包含一次样式表： ```js {5} function App() { @@ -640,17 +640,17 @@ function App() { } ``` -For users accustomed to loading stylesheets manually this is an opportunity to locate those stylesheets alongside the components that depend on them allowing for better local reasoning and an easier time ensuring you only load the stylesheets that you actually depend on. +对于习惯于手动加载样式表的用户来说，这是一个机会，可以将这些样式表放在依赖它们的组件旁边，从而更好地进行本地推理，并确保只加载你实际依赖的样式表。 -Style libraries and style integrations with bundlers can also adopt this new capability so even if you don't directly render your own stylesheets, you can still benefit as your tools are upgraded to use this feature. +样式库和与打包器的样式集成也可以采用这种新的功能，所以即使你不直接渲染你自己的样式表，你也可以从你的工具升级到使用这个特性中受益。 -For more details, read the docs for [``](/reference/react-dom/components/link) and [` @@ -16,58 +16,58 @@ The [built-in browser ` ``` -[See more examples below.](#usage) +[参见下方更多示例](#usage)。 -#### Props {/*props*/} +#### 属性 {/*props*/} -`