Merge branch 'docs-translation' of github.com:CoderSerio/zh-hans.react.dev into docs-translation

Author: CoderSerio

src/components/Tag.tsx

@@ -7,23 +7,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',
   },
 };

src/content/blog/2022/03/29/react-v18.md

@@ -16,15 +16,15 @@ React 18 现在可以在 npm 上使用啦！在我们的上一篇文章里，我
 
 我们最新的主要版本更新的内容包括自动批处理等开箱即用能力优化，startTransition 等新的 API, 还有支持 Suspense 的流式服务端渲染。
 
-这些 React 18 新功能很多都是基于我们新推出的并发渲染，也就是一种解锁了全新的强大力量的底层变动。并发模式 React 是选择性启用的——只有当你使用了一个并发功能的时候才会开启——但是我们认为它将会对人们构建应用的方式产生巨大的影响。
+这些 React 18 新功能很多都基于我们新推出的并发渲染特性，也就是一种解锁了全新的能力强大的底层变动。并发模式 React 是选择性启用的——只有当你使用了一个并发功能的时候才会开启——但是我们认为它将会对人们构建应用的方式产生巨大的影响。
 
-我们花了很多年时间来研发 React 的并发渲染，同时我们也还考虑为现有用户提供一种过渡的路径。去年夏天，[我们成立了 React 18 工作组](/blog/2021/06/08/the-plan-for-react-18) 来收集社区专家们的反馈信息，保证整个 React 生态系统都能有一个丝滑的升级体验。
+我们花了很多年时间来研发 React 的并发渲染，同时我们也还考虑为现有用户提供一种过渡的路径。去年夏天，[我们成立了 React 18 工作组](/blog/2021/06/08/the-plan-for-react-18) 来收集社区专家们的反馈信息，保证整个 React 生态都能有一个丝滑的升级体验。
 
 如果你忘了，我们在 React 大会 2021 上公开提出了这个愿景：
 
-* 在 [摘要](https://www.youtube.com/watch?v=FZ0cG47msEk&* list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa) 中，我们解释了 React 18 为什么能够实现让开发者创造更好的用户体验这一使命。
-* [Shruti Kapoor](https://twitter.com/shrutikapoor08) [示范如何使用 React 18 中的新功能](https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2)
-* [Shaundai Person](https://twitter.com/shaundai) gave us an overview of [支持 Suspense 的流式服务端渲染](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3)
+* 在 [摘要](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa) 中，我们解释了 React 18 为什么能够实现让开发者创造更好的用户体验这一使命。
+* [Shruti Kapoor](https://twitter.com/shrutikapoor08) [示范了如何使用 React 18 中的新功能](https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2)。
+* [Shaundai Person](https://twitter.com/shaundai) 给了我们一个 [支持 Suspense 的流式服务端渲染](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3) 的概览。
 
 以下是一个在此版本中对需要关注的内容的总结，先从并发渲染开始。
 
@@ -40,7 +40,7 @@ React 18 中最重要的更新内容是我们希望你永远不要考虑：并
 
 并发渲染本身并不是一个功能。它是一个新的底层机制，使得 React 能够同时准备多个版本的 UI。你可以把并发视为一种实现细节——由于它解锁的新功能的缘故，它会非常有价值。React 使用在底层实现上使用了非常高级的技术，像优先队列和多级缓冲。但是你不会在任何公开的 API 中感知到这些。
 
-我们设计 API 的时候，刻意隐藏了实现细节。作为一名 React 开发者，你只需要关注视图是 **什么样**，然后由 React 来处理 **如何** 来实现。所以我们不需要React 开发者知道底层运行原理。
+我们设计 API 的时候，刻意隐藏了实现细节。作为一名 React 开发者，你只需要关注视图是 **什么样**，然后由 React 来处理 **如何** 来实现。所以我们不需要 React 开发者知道底层运行原理。
 
 不过，并发 React 比一个典型的实现细节更重要──它是 React 核心渲染模型的基础性更新。因此，虽然知道并发渲染底层工作原理不是很重要，但可能值得在高级技术方面去了解它是什么。
 
@@ -50,17 +50,17 @@ React 18 中最重要的更新内容是我们希望你永远不要考虑：并
 
 另一个例子是可重用状态。并发 React 可以从屏幕中移除部分 UI，之后将他们再加回来，并重用之前的状态。例如，当一个用户标签页切出又切回，React 应该能够立即将之前的屏幕恢复到它先前的状态。在即将到来的次要版本中，我们计划添加一个新的名为 `<Offscreen>` 的组件，它实现了这种模式。同样地，你将能够使用 Offscreen 在后台准备新的 UI，在用户显示前准备就绪以便快速响应。
 
-并发渲染是一个 React 中非常强大的工具，并且我们大多数新功能都是利用了它的优势来创建的，包括 Suspense，过渡和流式服务端渲染。但是在并发渲染这个新的基础上，React 18 也仅仅只是实现我们构建目标的第一步。
+并发渲染是一个 React 中非常强大的工具，并且我们大多数新功能都是利用了它的优势来创建的，包括 Suspense，过渡和流式服务端渲染。但是在并发渲染这个方向，React 18 也仅仅只是实现我们最终目标的第一步。
 
 ## 渐进地采用并发特性 {/*gradually-adopting-concurrent-features*/}
 
-从技术上讲，并发渲染时一个破坏性变更。因为并发渲染时可中断的，当它启用时，组件行为会略微不同。
+从技术上讲，并发渲染是一个破坏性变更。因为并发渲染是可中断的，当它启用时，组件行为会略微不同。
 
 在我们的测试过程中，我们已经把上千个组件更新到了 React 18。我们发现，几乎所有现有的组件仅能在并发渲染下“正常工作”。然而部分组件可能需要一些额外的迁移工作。这种变化通常很小，你仍然可以按照自己的节奏进行。React 18 中的新渲染行为 **只在你的应用中使用新功能的部分启用**。
 
 整体上的升级方案是使你的应用基于 React 18 运行而不用破坏现存的代码。然后你可以渐进地按照你的节奏开始添加并发功能。你可以在开发环境中使用 [`<StrictMode>`](/reference/react/StrictMode) 以利于暴露并发模式相关的问题。严格模式不影响生产环境的，但是在开发环境中它将会上外额外的警告日志，并且被视为幂等的函数将被调用两次。这没办法捕获所有异常，但是能够有效预防大部分常见的错误类型。
 
-在你升级到 React 18 后，你可以立即开始使用并发模式的功能。例如，你可以使用 startTransition 在屏幕内容之间进行导航，而不会阻塞用户输入。或者使用 useDeferredValue 来节流处理开销巨大的重绘。
+在你升级到 React 18 后，你可以立即开始使用并发模式的功能。例如，你可以使用 startTransition 在屏幕内容之间进行导航，而不会阻塞用户输入。或者使用 useDeferredValue 来节流处理开销巨大的重渲染。
 
 无论如何，我们希望你在应用中添加并发渲染能力的主要方式是，使用一个支持并发渲染的库或者框架。在大多数情况中，你不用与并发模式的 API 直接交互。例如，在导航到一个新的屏幕时，开发者无需调用 startTransition，路由库会自动将导航操作包裹在 startTransition 中。
 
@@ -86,7 +86,7 @@ React 18 中最重要的更新内容是我们希望你永远不要考虑：并
 
 ### 新功能: 自动批处理 {/*new-feature-automatic-batching*/}
 
-批处理是指，当 React 在一个单独的重绘中批量处理多个状态更新以此实现优化性能。如果没有自动批处理的话，我们仅能够在 React 事件处理程序中批量更新。promise 内的更新，setTimeout，原生应用的事件处理程序或者任何其他事件，默认情况下在 React 中都不会被批处理；但现在，这些更新内容就会被自动批处理：
+批处理是指，当 React 在一个单独的重渲染事件中批量处理多个状态更新以此实现优化性能。如果没有自动批处理的话，我们仅能够在 React 事件处理程序中批量更新。promise 内的更新，setTimeout，原生应用的事件处理程序或者任何其他事件，默认情况下在 React 中都不会被批处理；但现在，这些更新内容就会被自动批处理：
 
 
 ```js
@@ -254,7 +254,7 @@ React 18 中的 Suspense 在与过渡 API 结合时效果最好。如果你在
 
 #### useInsertionEffect {/*useinsertioneffect*/}
 
-`useInsertionEffect` 是一个新的 Hook ，允许 CSS-in-JS 库解决在渲染中注入样式的性能问题。除非你已经建立了一个 CSS-in-JS 库，否则我们不希望你使用它。这个 Hook 将在 DOM 被变更后运行，但在 layout effect 读取新布局之前。这解决了一个在 React 17 及以下版本中已经存在的问题，但在 React 18 中更加重要，因为 React 在并发渲染时向浏览器让步，给它一个重新计算布局的机会。 [参阅文档](/reference/react/useInsertionEffect).
+`useInsertionEffect` 是一个新的 Hook ，允许 CSS-in-JS 库解决在渲染中注入样式的性能问题。除非你已经建立了一个 CSS-in-JS 库，否则我们不希望你使用它。这个 Hook 将在 DOM 被变更后运行，但在 layout effect 读取新布局之前。这解决了一个在 React 17 及以下版本中已经存在的问题，但在 React 18 中更加重要，因为 React 在并发渲染时向浏览器让步，给它一个重新计算布局的机会。 [参阅文档](/reference/react/useInsertionEffect)。
 
 > Note
 >
@@ -264,7 +264,7 @@ React 18 中的 Suspense 在与过渡 API 结合时效果最好。如果你在
 
 请参阅 [如何升级到 React 18](/blog/2022/03/08/react-18-upgrade-guide) 以获取分步说明和完整的中断列表和值得注意的变化。
 
-## Changelog {/*changelog*/}
+## 修改日志 {/*changelog*/}
 
 ### React {/*react*/}
 

src/content/learn/index.md

@@ -5,6 +5,7 @@ translators:
  - sooia
  - KnowsCount
  - QC-L
+ - Zhou Chenyang
 ---
 
 <Intro>
@@ -540,4 +541,4 @@ button {
 
 至此，你已经了解了如何编写 React 代码的基本知识。
 
-Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React.
+看看 [教程](/learn/tutorial-tic-tac-toe)，把它们付诸实践，用 React 建立你的第一个迷你应用程序。

src/content/reference/react-dom/components/textarea.md

@@ -42,7 +42,7 @@ title: "<textarea>"
 
 * `defaultValue`：一个字符串，表示文本框的 [初始值](#providing-an-initial-value-for-a-text-area)。
 
-以下 `<select>` 属性均可用于受控与非受控组件：
+以下 `<textarea>` 属性均可用于受控与非受控组件：
 
 * [`autoComplete`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea#attr-autocomplete)：可以为 `'on'` 或 `'off'`，表示自动完成的行为。
 * [`autoFocus`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea#attr-autofocus)：布尔值。如果为 `true`，React 将在挂载时聚焦该元素。

src/content/reference/react/Children.md

@@ -214,7 +214,7 @@ function RowList({ children }) {
 }
 ```
 
-在上述例子中，`RowList` 用  `<div className="Row">` 包裹了接收到的每一个子元素。举个例子，假设父组件将三个 `<p>` 作为 `children` 属性传递给 `RowList`：
+在上述例子中，`RowList` 用 `<div className="Row">` 包裹了接收到的每一个子元素。举个例子，假设父组件将三个 `<p>` 作为 `children` 属性传递给 `RowList`：
 
 ```js
 <RowList>
@@ -534,7 +534,7 @@ export default function ReversedList({ children }) {
 
 <Note>
 
-像下面这样导入的就是（大写字母 `C` 开头的） `Children` API，本章节将会介绍它的一些替代方案：
+像下面这样导入的就是（大写字母 `C` 开头的）`Children` API，本章节将会介绍它的一些替代方案：
 
 ```js
 import { Children } from 'react';