reactjs · docschina-bot · Apr 24, 2024 · Apr 24, 2024 · Apr 24, 2024 · Apr 25, 2024
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,6 @@ yarn-error.log*
 
 # external fonts
 public/fonts/**/Optimistic_*.woff2
+
+# rss
+public/rss.xml
diff --git a/package.json b/package.json
@@ -15,11 +15,12 @@
     "prettier:diff": "yarn nit:source",
     "lint-heading-ids": "node scripts/headingIdLinter.js",
     "fix-headings": "node scripts/headingIdLinter.js --fix",
-    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids",
+    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss",
     "tsc": "tsc --noEmit",
     "start": "next start",
     "postinstall": "patch-package && (is-ci || husky install .husky)",
-    "check-all": "npm-run-all prettier lint:fix tsc"
+    "check-all": "npm-run-all prettier lint:fix tsc rss",
+    "rss": "node scripts/generateRss.js"
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "2.13.5",

diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg
diff --git a/scripts/generateRss.js b/scripts/generateRss.js
@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+const {generateRssFeed} = require('../src/utils/rss');
+
+generateRssFeed();
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
@@ -21,6 +21,7 @@ import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {HomeContent} from './HomeContent';
 import {TopNav} from './TopNav';
 import cn from 'classnames';
+import Head from 'next/head';
 
 import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
 
@@ -117,7 +118,21 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         image={`/images/og-` + section + '.png'}
         searchOrder={searchOrder}
       />
+<<<<<<< HEAD
       {/* <SocialBanner /> */}
+=======
+      {(isHomePage || isBlogIndex) && (
+        <Head>
+          <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="React Blog RSS Feed"
+            href="/rss.xml"
+          />
+        </Head>
+      )}
+      <SocialBanner />
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
       <TopNav
         section={section}
         routeTree={routeTree}

diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx
@@ -15,6 +15,10 @@ interface ConsoleBlockProps {
   children: React.ReactNode;
 }
 
+interface ConsoleBlockMultiProps {
+  children: React.ReactNode;
+}
+
 const Box = ({
   width = '60px',
   height = '17px',
@@ -29,7 +33,7 @@ const Box = ({
   <div className={className} style={{width, height, ...customStyles}}></div>
 );
 
-function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
+export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   let message: React.ReactNode | null;
   if (typeof children === 'string') {
     message = children;
@@ -38,7 +42,10 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   }
 
   return (
-    <div className="mb-4 text-secondary" translate="no" dir="ltr">
+    <div
+      className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
+      translate="no"
+      dir="ltr">
       <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
         <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
           <Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
@@ -73,4 +80,72 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   );
 }
 
-export default ConsoleBlock;
+export function ConsoleBlockMulti({children}: ConsoleBlockMultiProps) {
+  return (
+    <div
+      className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
+      translate="no"
+      dir="ltr">
+      <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
+        <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
+          <Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
+        </div>
+        <div className="flex text-sm px-4">
+          <div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
+            Console
+          </div>
+          <div className="px-4 py-2 flex">
+            <Box className="me-2 bg-gray-300 dark:bg-gray-70" />
+            <Box className="me-2 hidden md:block bg-gray-300 dark:bg-gray-70" />
+            <Box className="hidden md:block bg-gray-300 dark:bg-gray-70" />
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 divide-y divide-gray-300 dark:divide-gray-70 text-base">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ConsoleLogLine({children, level}: ConsoleBlockProps) {
+  let message: React.ReactNode | null;
+  if (typeof children === 'string') {
+    message = children;
+  } else if (isValidElement(children)) {
+    message = children.props.children;
+  } else if (Array.isArray(children)) {
+    message = children.reduce((result, child) => {
+      if (typeof child === 'string') {
+        result += child;
+      } else if (isValidElement(child)) {
+        // @ts-ignore
+        result += child.props.children;
+      }
+      return result;
+    }, '');
+  }
+
+  return (
+    <div
+      className={cn(
+        'ps-4 pe-2 pt-1 pb-2 grid grid-cols-[18px_auto] font-mono rounded-b-md',
+        {
+          'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
+            level === 'error',
+          'bg-yellow-5 text-yellow-50': level === 'warning',
+          'bg-gray-5 text-secondary dark:text-secondary-dark': level === 'info',
+        }
+      )}>
+      {level === 'error' && (
+        <IconError className="self-start mt-1.5 text-[.7rem] w-6" />
+      )}
+      {level === 'warning' && (
+        <IconWarning className="self-start mt-1 text-[.65rem] w-6" />
+      )}
+      <div className="px-2 pt-1 whitespace-break-spaces text-code leading-tight">
+        {message}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
@@ -8,7 +8,7 @@ import cn from 'classnames';
 
 import CodeBlock from './CodeBlock';
 import {CodeDiagram} from './CodeDiagram';
-import ConsoleBlock from './ConsoleBlock';
+import {ConsoleBlock, ConsoleLogLine, ConsoleBlockMulti} from './ConsoleBlock';
 import ExpandableCallout from './ExpandableCallout';
 import ExpandableExample from './ExpandableExample';
 import {H1, H2, H3, H4, H5} from './Heading';
@@ -420,6 +420,8 @@ export const MDXComponents = {
   pre: CodeBlock,
   CodeDiagram,
   ConsoleBlock,
+  ConsoleBlockMulti,
+  ConsoleLogLine,
   DeepDive: (props: {
     children: React.ReactNode;
     title: string;

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
@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "介绍零打包大小的 React 服务器组件"
+=======
+title: "Introducing Zero-Bundle-Size React Server Components"
+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.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 ---
 
 2020 年 12 月 21 日 [Dan Abramov](https://twitter.com/dan_abramov)、[Lauren Tan](https://twitter.com/potetotes)、[Joseph Savona](https://twitter.com/en_JS) 与 [Sebastian Markbåge](https://twitter.com/sebmarkbage)

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
@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "React 18 发布计划"
+=======
+title: "The Plan for 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...
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 ---
 
 2021 年 7 月 8 日 [Andrew Clark](https://twitter.com/acdlite)、[Brian Vaughn](https://github.com/bvaughn)、[Christine Abernathy](https://twitter.com/abernathyca)、[Dan Abramov](https://twitter.com/dan_abramov)、[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)

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
@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "回顾 React Conf 2021"
+=======
+title: "React Conf 2021 Recap"
+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.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 ---
 
 2021 年 12 月 17 日 [Jesslyn Tannady](https://twitter.com/jtannady) 与 [Rick Hanlon](https://twitter.com/rickhanlonii)

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
@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "如何升级到 React 18"
+=======
+title: "How to Upgrade to 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.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 ---
 
 2022 年 8 月 3 日 [Rick Hanlon](https://twitter.com/rickhanlonii)

diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md
@@ -1,5 +1,8 @@
 ---
 title: "React v18.0"
+author: The React Team
+date: 2022/03/08
+description: React 18 is now available on npm! In our last post, we shared step-by-step instructions for upgrading your app to React 18. In this post, we'll give an overview of what's new in React 18, and what it means for the future.
 ---
 
 2022 年 3 月 29 日，由 [React 团队](/community/team) 发布

diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "React Labs：我们正在努力的方向——2022 年 6 月"
+=======
+title: "React Labs: What We've Been Working On – June 2022"
+author:  Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbage, and Xuan Huang
+date: 2022/06/15
+description: React 18 was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 ---
 
 2022 年 6 月 15 日 [Andrew Clark](https://twitter.com/acdlite)、[Dan Abramov](https://twitter.com/dan_abramov)、[Jan Kassens](https://twitter.com/kassens)、[Joseph Savona](https://twitter.com/en_JS)、[Josh Story](https://twitter.com/joshcstory)、[Lauren Tan](https://twitter.com/potetotes)、[Luna Ruan](https://twitter.com/lunaruan)、[Mengdi Chen](https://twitter.com/mengdi_en)、[Rick Hanlon](https://twitter.com/rickhanlonii)、[Robert Zhang](https://twitter.com/jiaxuanzhang01)、[Sathya Gunasekaran](https://twitter.com/_gsathya)、[Sebastian Markbåge](https://twitter.com/sebmarkbage) 与 [Xuan Huang](https://twitter.com/Huxpro)

diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "介绍 react.dev"
+=======
+title: "Introducing react.dev"
+author: Dan Abramov and Rachel Nabors
+date: 2023/03/16
+description: Today we are thrilled to launch react.dev, the new home for React and its documentation. In this post, we would like to give you a tour of the new site.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 ---
 
 2023 年 3 月 16 日 [Dan Abramov](https://twitter.com/dan_abramov) 与 [Rachel Nabors](https://twitter.com/rachelnabors)

diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "React Labs：我们正在努力的方向——2023 年 3 月"
+=======
+title: "React Labs: What We've Been Working On – March 2023"
+author: Joseph Savona, Josh Story, Lauren Tan, Mengdi Chen, Samuel Susla, Sathya Gunasekaran, Sebastian Markbage, and Andrew Clark
+date: 2023/03/22
+description: In React Labs posts, we write about projects in active research and development. We've made significant progress on them since our last update, and we'd like to share what we learned.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 ---
 
 2023 年 3 月 22 日 [Joseph Savona](https://twitter.com/en_JS)、[Josh Story](https://twitter.com/joshcstory)、[Lauren Tan](https://twitter.com/potetotes)、[Mengdi Chen](https://twitter.com/mengdi_en)、[Samuel Susla](https://twitter.com/SamuelSusla)、[Sathya Gunasekaran](https://twitter.com/_gsathya)、[Sebastian Markbåge](https://twitter.com/sebmarkbage) 与 [Andrew Clark](https://twitter.com/acdlite)

diff --git a/src/content/blog/2023/05/03/react-canaries.md b/src/content/blog/2023/05/03/react-canaries.md
@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "React Canaries：在 Meta 之外逐步推出新功能"
+=======
+title: "React Canaries: Enabling Incremental Feature Rollout Outside Meta"
+author: Dan Abramov, Sophie Alpert, Rick Hanlon, Sebastian Markbage, and Andrew Clark
+date: 2023/05/03
+description: We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final, before they're released in a stable version--similar to how Meta has long used bleeding-edge versions of React internally. We are introducing a new officially supported [Canary release channel](/community/versioning-policy#canary-channel). It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 ---
 
 2023 年 5 月 3 日 [Dan Abramov](https://twitter.com/dan_abramov)、[Sophie Alpert](https://twitter.com/sophiebits)、[Rick Hanlon](https://twitter.com/rickhanlonii)、[Sebastian Markbåge](https://twitter.com/sebmarkbage) 与 [Andrew Clark](https://twitter.com/acdlite)

diff --git a/...ontent/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/...ontent/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "React Labs：我们正在努力的方向——2024 年 2 月"
+=======
+title: "React Labs: What We've Been Working On – February 2024"
+author: Joseph Savona, Ricky Hanlon, Andrew Clark, Matt Carroll, and Dan Abramov
+date: 2024/02/15
+description: In React Labs posts, we write about projects in active research and development. We’ve made significant progress since our last update, and we’d like to share our progress.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 ---
 
 2024 年 2 月 15 日 [Joseph Savona](https://twitter.com/en_JS)、[Ricky Hanlon](https://twitter.com/rickhanlonii)、[Andrew Clark](https://twitter.com/acdlite)、[Matt Carroll](https://twitter.com/mattcarrollcode) 与 [Dan Abramov](https://twitter.com/dan_abramov)
@@ -52,7 +59,11 @@ JavaScript 是一个因其松散规则和动态特性而闻名的具有挑战性
 </form>
 ```
 
+<<<<<<< HEAD
 `action` 函数可以同步或异步执行。你可以在客户端使用标准 JavaScript 定义它们，也可以在服务器上使用 [`'use server'`](/reference/react/use-server) 指示符。当使用 action 时，React 将帮助管理数据提交的生命周期，提供类似 [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 和 [`useFormState`](/reference/react-dom/hooks/useFormState) 的 Hook，以访问表单操作的当前 state 与响应。
+=======
+The `action` function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the  [`'use server'`](/reference/rsc/use-server) directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), and [`useActionState`](/reference/react/useActionState) to access the current state and response of the form action.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 
 默认情况下，Action 在 [transition](/reference/react/useTransition) 中提交，使当前页面在操作处理过程中保持交互性。由于 Action 支持异步函数，我们还添加了在 transitions 中使用 `async/await` 的功能，这允许在异步请求（如 `fetch`）开始时使用转换的 `isPending` 状态显示待处理 UI，并在应用更新时始终显示待处理 UI。
 
@@ -72,13 +83,21 @@ Canaries 是我们开发 React 的一种变化。以前，功能会在 Meta 内
 
 React 服务器组件、资源加载、文档元数据与 Action 都已经加入了 React Canary，并且我们已经在 react.dev 上为这些功能添加了文档：
 
+<<<<<<< HEAD
 - **指示符**：[`"use client"`](/reference/react/use-client) 与 [`"use server"`](/reference/react/use-server) 是设计用于全栈 React 框架的打包功能。它们标记了两个环境之间的“分割点”：use client 指示符指示打包工具生成一个 `<script>` 标签（类似于 [Astro Islands](https://docs.astro.build/en/concepts/islands/#creating-an-island)），而 use server 告诉打包工具生成一个 POST 端点（类似于 [tRPC Mutations](https://trpc.io/docs/concepts)）。它们让你可以编写将客户端交互性与相关的服务器端逻辑组合在一起的可重用组件。
+=======
+- **Directives**: [`"use client"`](/reference/rsc/use-client) and [`"use server"`](/reference/rsc/use-server) are bundler features designed for full-stack React frameworks. They mark the "split points" between the two environments: `"use client"` instructs the bundler to generate a `<script>` tag (like [Astro Islands](https://docs.astro.build/en/concepts/islands/#creating-an-island)), while `"use server"` tells the bundler to generate a POST endpoint (like [tRPC Mutations](https://trpc.io/docs/concepts)). Together, they let you write reusable components that compose client-side interactivity with the related server-side logic.
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 
 - **文档元数据**：我们内置支持在组件树中的任何位置渲染 [`<title>`](/reference/react-dom/components/title)、[`<meta>`](/reference/react-dom/components/meta) 和元数据 [`<link>`](/reference/react-dom/components/link) 标签。这些在所有环境中都以相同的方式工作，包括完全客户端代码、SSR 和 RSC。这为像 [React Helmet](https://github.com/nfl/react-helmet) 这样的库开创的功能提供了内置支持。
 
 - **资源加载**：我们将 Suspense 与样式表、字体和脚本等资源的加载生命周期集成在一起，以便 React 考虑它们来确定像 [`<style>`](/reference/react-dom/components/style)、[`<link>`](/reference/react-dom/components/link) 和 [`<script>`](/reference/react-dom/components/script) 这样的元素中的内容是否已准备就绪。我们还添加了新的 [资源加载 API](/reference/react-dom#resource-preloading-apis)，如 `preload` 和 `preinit`，以提供更大的控制权，指示何时应加载和初始化资源。
 
+<<<<<<< HEAD
 - **Action**：如上所述，我们已将 Action 添加到管理从客户端发送数据到服务器的功能中。现在可以将 `action` 添加到像 [`<form/>`](/reference/react-dom/components/form) 这样的元素中，使用 [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 访问状态，使用 [`useFormState`](/reference/react-dom/hooks/useFormState) 处理结果，并使用 [`useOptimistic`](/reference/react/useOptimistic) 乐观地更新 UI。
+=======
+- **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`<form/>`](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useActionState`](/reference/react/useActionState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic).
+>>>>>>> 01edd5c1070c2c563f86ee508cff3e8cca6a36c3
 
 由于所有这些功能是相互配合的，因此单独在稳定渠道中发布它们是困难的。发布 Action 而不带有用于访问表单状态的补充 Hook 会限制 Action 的实际可用性。引入 React 服务器组件而不集成 Server Action 会把在服务器上修改数据变得复杂化。