docs(cn): fix some typos (#1170)

Co-authored-by: Xavi Lee <awxiaoxian2020@163.com>

Author: yionr

src/content/learn/conditional-rendering.md

@@ -18,7 +18,7 @@ translators:
 
 </YouWillLearn>
 
-## Conditionally returning JSX {/*conditionally-returning-jsx*/}
+## 条件返回 JSX {/*conditionally-returning-jsx*/}
 
 假设有一个 `PackingList` 组件，里面渲染多个 `Item` 组件，每个物品可标记为打包与否：
 
@@ -262,7 +262,7 @@ export default function PackingList() {
 
 ### 与运算符（`&&`） {/*logical-and-operator-*/}
 
-你会遇到的另一个常见的快捷表达式是 [JavaScript 与（`&&`）运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.)。在 React 组件里，通常用在当条件成立时，你想渲染一些 JSX，**或者不做任何渲染**。使用 `&&`，你也可以实现仅当 `isPacked` 为 `true` 时，渲染勾选符号。
+你会遇到的另一个常见的快捷表达式是 [JavaScript 逻辑与（`&&`）运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.)。在 React 组件里，通常用在当条件成立时，你想渲染一些 JSX，**或者不做任何渲染**。使用 `&&`，你也可以实现仅当 `isPacked` 为 `true` 时，渲染勾选符号。
 
 ```js
 return (
@@ -343,7 +343,7 @@ if (isPacked) {
 }
 ```
 
-[大括号 - JavaScript 的“新世界”](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world)。将变量用大括号嵌入在返回的 JSX 树中，来嵌套计算好的表达式与 JSX：
+[在 JSX 中通过大括号使用 JavaScript](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world)。将变量用大括号嵌入在返回的 JSX 树中，来嵌套计算好的表达式与 JSX：
 
 ```js
 <li className="item">

src/content/learn/describing-the-ui.md

@@ -469,7 +469,7 @@ h2 { font-size: 20px; }
 
 有些 JavaScript 函数是 **纯粹** 的。纯函数的基本定义：
 
-* **管好自己的事**。 在函数调用前，它不会改变任何已经存在的对象或变量。
+* **只负责自己的任务**。 它不会更改在该函数调用前就已存在的对象或变量。
 * **输入相同，输出也相同**。 在输入相同的情况下，对纯函数来说应总是返回相同的结果。
 
 严格遵循纯函数的定义编写组件，可以让代码库体量增长时，避免一些令人困惑的错误和不可预测的行为。下面是一个非纯函数组件的示例：

src/content/learn/importing-and-exporting-components.md

@@ -144,15 +144,15 @@ import Gallery from './Gallery';
 | 默认  | `export default function Button() {}` | `import Button from './Button.js';`     |
 | 具名  | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
-当使用默认导入时，你可以在 `import` 语句后面进行任意命名。比如 `import Banana from './Button.js'`，如此你能获得与默认导出一致的内容。相反，对于具名导入，导入和导出的名字必须一致。这也是为什么称其为 _具名_ 导入的原因！
+当使用默认导入时，你可以在 `import` 语句后面进行任意命名。比如 `import Banana from './Button.js'`，如此你能获得与默认导出一致的内容。相反，对于具名导入，导入和导出的名字必须一致。这也是为什么称其为 **具名** 导入的原因！
 
 **通常，文件中仅包含一个组件时，人们会选择默认导出，而当文件中包含多个组件或某个值需要导出时，则会选择具名导出。** 无论选择哪种方式，请记得给你的组件和相应的文件命名一个有意义的名字。我们不建议创建未命名的组件，比如 `export default () => {}`，因为这样会使得调试变得异常困难。
 
 </DeepDive>
 
 ## 从同一文件中导出和导入多个组件 {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-如果你只想展示一个 `Profile` 组，而不展示整个图集。你也可以导出 `Profile` 组件。但 `Gallery.js` 中已包含 *默认* 导出，此时，你不能定义 _两个_ 默认导出。但你可以将其在新文件中进行默认导出，或者将 `Profile` 进行 *具名* 导出。**同一文件中，有且仅有一个默认导出，但可以有多个具名导出！**
+如果你只想展示一个 `Profile` 组，而不展示整个图集。你也可以导出 `Profile` 组件。但 `Gallery.js` 中已包含 **默认** 导出，此时，你不能定义 **两个** 默认导出。但你可以将其在新文件中进行默认导出，或者将 `Profile` 进行 **具名** 导出。**同一文件中，有且仅有一个默认导出，但可以有多个具名导出！**
 
 <Note>
 

src/content/learn/installation.md

@@ -12,10 +12,10 @@ React 从诞生之初就是可被渐进式使用的。因此你可以选择性
 
 <YouWillLearn isChapter={true}>
 
-* [How to start a new React project](/learn/start-a-new-react-project)
-* [How to add React to an existing project](/learn/add-react-to-an-existing-project)
-* [How to set up your editor](/learn/editor-setup)
-* [How to install React Developer Tools](/learn/react-developer-tools)
+* [如何开始一个新的 React 项目](/learn/start-a-new-react-project)
+* [如果添加 React 到一个已有的项目](/learn/add-react-to-an-existing-project)
+* [如何设置你的编辑器](/learn/editor-setup)
+* [如何安装 React 开发者工具套件](/learn/react-developer-tools)
 
 </YouWillLearn>
 
@@ -43,15 +43,15 @@ React 文档中的大部分页面都包含这样的 sandbox。除 React 文档
 
 ### 本地尝试 React {/*try-react-locally*/}
 
-To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser!
+如果想在电脑本地上进行尝试, [下载这个HTML页面](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html)。 然后在你的编辑器和浏览器中打开!
 
-## Start a new React project {/*start-a-new-react-project*/}
+## 开始一个新的 React 项目 {/*start-a-new-react-project*/}
 
-If you want to build an app or a website fully with React, [start a new React project.](/learn/start-a-new-react-project)
+如果你想完全使用 React 建立一个应用或者一个网站, [开始一个新的 React 项目](/learn/start-a-new-react-project)。
 
-## Add React to an existing project {/*add-react-to-an-existing-project*/}
+## 添加 React 到一个已有的项目 {/*add-react-to-an-existing-project*/}
 
-If want to try using React in your existing app or a website, [add React to an existing project.](/learn/add-react-to-an-existing-project)
+如果你想在一个现有的应用或者网站上尝试 React, [添加 React 到一个现有的项目](/learn/add-react-to-an-existing-project)。
 
 ## 下一节 {/*next-steps*/}
 

src/content/learn/javascript-in-jsx-with-curly-braces.md

@@ -429,9 +429,9 @@ body > div > div { padding: 20px; }
 
 #### 在 JSX 大括号内编写表达式 {/*write-an-expression-inside-jsx-curly-braces*/}
 
-在下面的对象中，完整的图片 URL 被分成了四个部分：base URL、`imageId`、`imageSize` 和文件拓展名。
+在下面的对象中，完整的图片 URL 被分成了四个部分：`baseUrl`、`imageId`、`imageSize` 和`文件拓展名`。
 
-我们希望这些属性组合成图片的 URL：base URL（一直是 `'https://i.imgur.com/'`）、`imageId`（`'7vQD0fP'`）、`imageSize`（`'s'`）和文件拓展（总是 `'.jpg'`）。但是，`<img>` 标签 `src` 指明的方式是有问题的。
+我们希望这些属性组合成图片的 URL：`baseUrl`（一直是 `'https://i.imgur.com/'`）、`imageId`（`'7vQD0fP'`）、`imageSize`（`'s'`）和文件拓展（总是 `'.jpg'`）。但是，`<img>` 标签 `src` 指明的方式是有问题的。
 
 你能修复它吗？
 

src/content/learn/keeping-components-pure.md

@@ -24,7 +24,7 @@ translators:
 
 在计算机科学中（尤其是函数式编程的世界中），[纯函数](https://wikipedia.org/wiki/Pure_function) 通常具有如下特征：
 
-* **只负责自己的任务**。它不会更改在该函数调用前，就已存在的对象或变量。
+* **只负责自己的任务**。它不会更改在该函数调用前就已存在的对象或变量。
 * **输入相同，则输出相同**。给定相同的输入，纯函数应总是返回相同的结果。
 
 举个你非常熟悉的纯函数示例：数学中的公式。
@@ -167,7 +167,7 @@ React 提供了 “严格模式”，在严格模式下开发时，它将会调
 
 ### 局部 mutation：组件的小秘密 {/*local-mutation-your-components-little-secret*/}
 
-上述示例的问题出在渲染过程中，组件改变了 **预先存在的** 变量的值。为了让它听起来更可怕一点，我们将这种现象称为 **突变（mutation）** 。纯函数不会改变函数作用域外的变量、或在函数调用前创建的对象 — 这会使函数变得不纯粹！
+上述示例的问题出在渲染过程中，组件改变了 **预先存在的** 变量的值。为了让它听起来更可怕一点，我们将这种现象称为 **突变（mutation）** 。纯函数不会改变函数作用域外的变量、或在函数调用前创建的对象——这会使函数变得不纯粹！
 
 但是，**你完全可以在渲染时更改你 *刚刚* 创建的变量和对象**。在本示例中，你创建一个 `[]` 数组，将其分配给一个 `cups` 变量，然后 `push` 一打 cup 进去：
 
@@ -220,7 +220,7 @@ export default function TeaGathering() {
 <Recap>
 
 * 一个组件必须是纯粹的，就意味着：
-  * **只负责自己的任务。** 不应更改渲染前存在的任何对象或变量。
+  * **只负责自己的任务。** 它不会更改在该函数调用前就已存在的对象或变量。
   * **输入相同，则输出相同。** 给定相同的输入，组件应该总是返回相同的 JSX。
 * 渲染随时可能发生，因此组件不应依赖于彼此的渲染顺序。
 * 你不应该改变组件用于渲染的任何输入。这包括 props、state 和 context。通过 [“设置” state](/learn/state-a-components-memory) 来更新界面，而不要改变预先存在的对象。

src/content/learn/passing-props-to-a-component.md

@@ -54,7 +54,7 @@ body { min-height: 120px; }
 
 </Sandpack>
 
-你可以传递给 `<img>` 标签的 props 是预定义的（ReactDOM 符合 [HTML 标准](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)）。但是你可以将任何 props 传递给 *你自己的* 组件，例如 `<Avatar>` ，以便自定义它们。 就像这样！
+你可以传递给 `<img>` 标签的 props 是预定义的（ReactDOM 符合 [HTML 标准](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)）。但是你可以将任何 props 传递给 **你自己的** 组件，例如 `<Avatar>` ，以便自定义它们。 就像这样！
 
 ## 向组件传递 props {/*passing-props-to-a-component*/}
 
@@ -173,7 +173,7 @@ body { min-height: 120px; }
 
 Props 使你独立思考父组件和子组件。 例如，你可以改变 `Profile` 中的 `person` 或 `size` props，而无需考虑 `Avatar` 如何使用它们。 同样，你可以改变 `Avatar` 使用这些 props 的方式，不必考虑 `Profile`。
 
-你可以将 props 想象成可以调整的“旋钮”。它们的作用与函数的参数相同 —— 事实上，props _正是_ 组件的唯一参数！ React 组件函数接受一个参数，一个 `props` 对象：
+你可以将 props 想象成可以调整的“旋钮”。它们的作用与函数的参数相同 —— 事实上，props **正是** 组件的唯一参数！ React 组件函数接受一个参数，一个 `props` 对象：
 
 ```js
 function Avatar(props) {
@@ -240,7 +240,7 @@ function Profile({ person, size, isSepia, thickBorder }) {
 }
 ```
 
-重复代码没有错（它可以更清晰）。但有时你可能会重视简洁。一些组件将它们所有的 props 转发给子组件，正如 `Profile` 转给 `Avatar` 那样。因为它们不直接使用它们任何 props，所以使用更简洁的“展开”语法是有意义的：
+重复代码没有错（它可以更清晰）。但有时你可能会重视简洁。一些组件将它们所有的 props 转发给子组件，正如 `Profile` 转给 `Avatar` 那样。因为这些组件不直接使用他们本身的任何 props，所以使用更简洁的“展开”语法是有意义的：
 
 ```js
 function Profile(props) {
@@ -412,7 +412,7 @@ export default function App() {
 
 这个例子说明，**一个组件可能会随着时间的推移收到不同的 props。** Props 并不总是静态的！在这里，`time` prop 每秒都在变化。当你选择另一种颜色时，`color` prop 也改变了。Props 反映了组件在任何时间点的数据，并不仅仅是在开始时。
 
-然而，props 是 [不可变的](https://en.wikipedia.org/wiki/Immutable_object)（一个计算机科学术语，意思是“不可改变”）。当一个组件需要改变它的 props（例如，响应用户交互或新数据）时，它不得不“请求”它的父组件传递 _不同的 props_ —— 一个新对象！它的旧 props 将被丢弃，最终 JavaScript 引擎将回收它们占用的内存。
+然而，props 是 [不可变的](https://en.wikipedia.org/wiki/Immutable_object)（一个计算机科学术语，意思是“不可改变”）。当一个组件需要改变它的 props（例如，响应用户交互或新数据）时，它不得不“请求”它的父组件传递 **不同的 props** —— 一个新对象！它的旧 props 将被丢弃，最终 JavaScript 引擎将回收它们占用的内存。
 
 **不要尝试“更改 props”。** 当你需要响应用户输入（例如更改所选颜色）时，你可以“设置 state”，你可以在 [State: 一个组件的内存](/learn/state-a-components-memory) 中继续了解。
 

src/content/learn/queueing-a-series-of-state-updates.md

@@ -58,19 +58,19 @@ setNumber(0 + 1);
 setNumber(0 + 1);
 ```
 
-但是这里还有另外一个影响因素需要讨论。**React 会等到事件处理函数中的 *所有* 代码都运行完毕再处理你的 state 更新。** 这就是为什么重新渲染只会发生在所有这些 `setNumber()` 调用 *之后* 的原因。
+但是这里还有另外一个影响因素需要讨论。**React 会等到事件处理函数中的** 所有 **代码都运行完毕再处理你的 state 更新。** 这就是为什么重新渲染只会发生在所有这些 `setNumber()` 调用 **之后** 的原因。
 
 这可能会让你想起餐厅里帮你点菜的服务员。服务员不会在你说第一道菜的时候就跑到厨房！相反，他们会让你把菜点完，让你修改菜品，甚至会帮桌上的其他人点菜。
 
 <Illustration src="/images/docs/illustrations/i_react-batching.png"  alt="在餐厅里，优雅的光标跟扮演服务员角色的 React 多次点菜。在她多次调用 setState() 之后，服务员将她所点的最后一个作为她的最终订单记录下来。" />
 
-这让你可以更新多个 state 变量——甚至来自多个组件的 state 变量——而不会触发太多的 [重新渲染](/learn/render-and-commit#re-renders-when-state-updates)。但这也意味着只有在你的事件处理函数及其中任何代码执行完成 *之后*，UI 才会更新。这种特性也就是 **批处理**，它会使你的 React 应用运行得更快。它还会帮你避免处理只​​更新了一部分 state 变量的令人困惑的“半成品”渲染。
+这让你可以更新多个 state 变量——甚至来自多个组件的 state 变量——而不会触发太多的 [重新渲染](/learn/render-and-commit#re-renders-when-state-updates)。但这也意味着只有在你的事件处理函数及其中任何代码执行完成 **之后**，UI 才会更新。这种特性也就是 **批处理**，它会使你的 React 应用运行得更快。它还会帮你避免处理只​​更新了一部分 state 变量的令人困惑的“半成品”渲染。
 
 **React 不会跨 *多个* 需要刻意触发的事件（如点击）进行批处理**——每次点击都是单独处理的。请放心，React 只会在一般来说安全的情况下才进行批处理。这可以确保，例如，如果第一次点击按钮会禁用表单，那么第二次点击就不会再次提交它。
 
 ## 在下次渲染前多次更新同一个 state {/*updating-the-same-state-multiple-times-before-the-next-render*/}
 
-这是一个不常见的用例，但是如果你想在下次渲染之前多次更新同一个 state，你可以像 `setNumber(n => n + 1)` 这样传入一个根据队列中的前一个 state 计算下一个 state 的 *函数*，而不是像 `setNumber(number + 1)` 这样传入 *下一个 state 值*。这是一种告诉 React “用 state 值做某事”而不是仅仅替换它的方法。
+这是一个不常见的用例，但是如果你想在下次渲染之前多次更新同一个 state，你可以像 `setNumber(n => n + 1)` 这样传入一个根据队列中的前一个 state 计算下一个 state 的 **函数**，而不是像 `setNumber(number + 1)` 这样传入 **下一个 state 值**。这是一种告诉 React “用 state 值做某事”而不是仅仅替换它的方法。
 
 现在尝试递增计数器：
 
@@ -171,7 +171,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 这是事件处理函数告诉 React 要做的事情：
 
 1. `setNumber(number + 5)`：`number` 为 `0`，所以 `setNumber(0 + 5)`。React 将 *“替换为 `5`”* 添加到其队列中。
-2. `setNumber(n => n + 1)`：`n => n + 1` 是一个更新函数。 React 将 *该函数* 添加到其队列中。
+2. `setNumber(n => n + 1)`：`n => n + 1` 是一个更新函数。 React 将 **该函数** 添加到其队列中。
 
 在下一次渲染期间，React 会遍历 state 队列：
 
@@ -249,7 +249,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 * **一个更新函数**（例如：`n => n + 1`）会被添加到队列中。
 * **任何其他的值**（例如：数字 `5`）会导致“替换为 `5`”被添加到队列中，已经在队列中的内容会被忽略。
 
-事件处理函数执行完成后，React 将触发重新渲染。在重新渲染期间，React 将处理队列。更新函数会在渲染期间执行，因此 **更新函数必须是 [纯函数](/learn/keeping-components-pure)** 并且只 *返回* 结果。不要尝试从它们内部设置 state 或者执行其他副作用。在严格模式下，React 会执行每个更新函数两次（但是丢弃第二个结果）以便帮助你发现错误。
+事件处理函数执行完成后，React 将触发重新渲染。在重新渲染期间，React 将处理队列。更新函数会在渲染期间执行，因此 **更新函数必须是 [纯函数](/learn/keeping-components-pure)** 并且只 **返回** 结果。不要尝试从它们内部设置 state 或者执行其他副作用。在严格模式下，React 会执行每个更新函数两次（但是丢弃第二个结果）以便帮助你发现错误。
 
 ### 命名惯例 {/*naming-conventions*/}
 
@@ -367,7 +367,7 @@ function delay(ms) {
 
 </Sandpack>
 
-这可以确保你在增加或减少计数器时是根据其 *最新* 的 state 而不是点击时的 state 来进行增减的。
+这可以确保你在增加或减少计数器时是根据其 **最新** 的 state 而不是点击时的 state 来进行增减的。
 
 </Solution>
 

src/content/learn/rendering-lists.md

@@ -289,7 +289,7 @@ Warning: Each child in a list should have a unique "key" prop.
 
 </ConsoleBlock>
 
-这是因为你必须给数组中的每一项都指定一个 `key`————它可以是字符串或数字的形式，只要能唯一标识出各个数组项就行：
+这是因为你必须给数组中的每一项都指定一个 `key`——它可以是字符串或数字的形式，只要能唯一标识出各个数组项就行：
 
 ```js
 <li key={person.id}>...</li>