From 3f4ad920f51fe345fb00bb39faffaff886d82c69 Mon Sep 17 00:00:00 2001
From: YogaLin <lsyoga@foxmail.com>
Date: Tue, 30 Nov 2021 00:29:23 +0800
Subject: [PATCH 1/9] docs(cn): preserving-and-resetting-state

---
 .../learn/preserving-and-resetting-state.md   | 342 +++++++++---------
 1 file changed, 171 insertions(+), 171 deletions(-)

diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index 6356630fa1..7dfaff5351 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -1,36 +1,36 @@
 ---
-title: Preserving and Resetting State
+title: 如何控制状态的保留或重置
 ---
 
 <Intro>
 
-State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.
+状态与组件之间是隔离的。根据组件在 UI 树中的位置，React 可以跟踪组件所属的状态。你可以控制在 re-render 之间保留还是重置状态。
 
 </Intro>
 
 <YouWillLearn>
 
-* How React "sees" component structures
-* When React chooses to preserve or reset the state
-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
+* React 眼中的组件结构
+* React 保留或重置状态的条件
+* 如何强制 React 重置组件的状态
+* Key 和组件切换对状态保留的影响
 
 </YouWillLearn>
 
-## The UI tree {/*the-ui-tree*/}
+## UI 树 {/*the-ui-tree*/}
 
-Browsers use many tree structures to model UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) represents HTML elements, the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) does the same for CSS. There's even an [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
+浏览器使用许多树形结构来建模 UI 。[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) 用于表示 HTML 元素，[CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) 则表示 CSS 元素。甚至还有 [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)！
 
-React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
+React 也使用树形结构来对你创造的 UI 进行管理和建模。React 根据 JSX 生成了 **UI 树** 。React DOM 根据 UI 树去更新浏览器的 DOM 元素。（React Native 则在不同的移动端平台将 UI 树转换为相应的元素）
 
-<img alt="React takes components, turns them into UI tree structures, and ReactDOM turns them into HTML in your browser using the DOM." src="/images/docs/sketches/s_react-dom-tree.png" />
+<img alt="React 获取组件后将它们转换为 UI 树结构，然后 ReactDOM 在浏览器中使用 DOM 将它们转换为 HTML。" src="/images/docs/sketches/s_react-dom-tree.png" />
 
-## State is tied to a position in the tree {/*state-is-tied-to-a-position-in-the-tree*/}
+## 状态与其在树中的位置相关联 {/*state-is-tied-to-a-position-in-the-tree*/}
 
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the UI tree.
+当你创建了一个组件状态，你可能会觉得这个状态存在于组件内。但实际上，状态在 React 内部。根据组件在 UI 树中的位置，React 将它所持有的每个状态与正确的组件关联起来。
 
 
-Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
+下面只定义了一个 `<Counter />` JSX 标签，但将它渲染在了两个不同的位置：
 
 <Sandpack>
 
@@ -64,7 +64,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -94,15 +94,15 @@ label {
 
 </Sandpack>
 
-Here's how these look as a tree: 
+下面是它们在树中的样子：
 
-<img alt="The JSX become a tree." src="/images/docs/sketches/s_jsx-to-tree.png" />
+<img alt="JSX 被转换为一棵树" src="/images/docs/sketches/s_jsx-to-tree.png" />
 
-**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works.
+**这是两个独立的 counter，因为它们在树中被渲染在了各自的位置** 一般情况下你不用去考虑这些位置来使用 React，但知道它们是如何工作的是很有用的。
 
-In React, each component on the screen has fully isolated state. For example, if you render two `Counter` components side by side, each of them will get its own, independent, `score` and `hover` states.
+在 React 中，屏幕中的每个组件都有完全独立的状态。举个例子，当你并排渲染了两个 `Counter` 组件时，它们都拥有各自独立的 `score` 和 `hover` 状态。
 
-Try clicking both counters and notice they don't affect each other:
+试试点击两个 counter 你会发现它们互不影响：
 
 <Sandpack>
 
@@ -135,7 +135,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -160,7 +160,7 @@ function Counter() {
 
 </Sandpack>
 
-React will only keep the state around for as long as you render the same component at the same position. To see this, increment both counters, then clear "Render the second counter" checkbox, and then tick it again:
+只有当相同的组件被渲染在了相同的位置，React 才会一直保留着组件的状态。想要验证这一点，可以增加两个计数器的值，清除“渲染第二个计数器”的复选框，然后重新勾选：
 
 <Sandpack>
 
@@ -181,7 +181,7 @@ export default function App() {
             setShowB(e.target.checked)
           }}
         />
-        Render the second counter
+        渲染第二个计数器
       </label>
     </div>
   );
@@ -204,7 +204,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -234,19 +234,19 @@ label {
 
 </Sandpack>
 
-Notice how the moment you stop rendering the second counter, its state disappears completely. That's because when React removes a component, it destroys its state.
+注意，当停止渲染第二个计数器的那一刻，它的状态完全消失了。这是因为当 React 删除一个组件时， React 会销毁它的状态。
 
-<img alt="React removes a component from the tree, it destroys its state as well" src="/images/docs/sketches/s_remove-ui.png" />
+<img alt="React 从树中移出组件的时候，也会同时移除它的状态" src="/images/docs/sketches/s_remove-ui.png" />
 
-When you tick "Render the second counter," a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM.
+当你重新勾选“渲染第二个计数器”复选框时，另一个计数器及其状态从头开始初始化（`score = 0`）并添加到 DOM 中。
 
-<img alt="When React adds UI to the DOM tree, it starts with all new state." src="/images/docs/sketches/s_add-back-ui.png" />
+<img alt="React 新增 UI 到 DOM 树时, 它会用新的状态进行初始化。" src="/images/docs/sketches/s_add-back-ui.png" />
 
-**React preserves a component's state for as long as it's being rendered at its position in the UI tree.** If it gets removed, or a different component gets rendered at the same position, React discards its state.
+**只要一个组件还被渲染在 UI 树的相同位置，React 就会保留它的状态。** 如果它被删除，或者一个不同的组件在相同的位置被渲染，React 将丢弃它的状态。
 
-## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/}
+## 同一组件在相同位置会保留状态 {/*same-component-at-the-same-position-preserves-state*/}
 
-In this example, there are two different `<Counter />` tags:
+在这个例子中，有两个不同的 `<Counter />` 标签：
 
 <Sandpack>
 
@@ -270,7 +270,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        使用好看的样式
       </label>
     </div>
   );
@@ -296,7 +296,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -331,18 +331,18 @@ label {
 
 </Sandpack>
 
-When you tick or clear the checkbox, the counter state does not get reset. Whether `isFancy` is `true` or `false`, you always have a `<Counter />` as the first child of the `div` returned from the root `App` component:
+当你勾选或清除复选框的时候，计数器状态没有被重置。不管 `isFancy` 是 `true` 还是 `false`，根 `App` 组件返回的 `div` 的第一个子元素总是 `<Counter />`：
 
-<img alt="React only sees the component and its position in the UI tree on render." src="/images/docs/sketches/s_ui-swap.png" />
+<img alt="React 只关注组件以及它在 UI 树中渲染的位置。" src="/images/docs/sketches/s_ui-swap.png" />
 
 
-It's the same component at the same position, so from React's perspective, it's the same counter.
+在相同位置的同一个组件，所以对 React 来说，它是同一个计数器。
 
-<Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="React weighs both components, and although they are different colors, it sees them as the same." />
+<Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="尽管两个组件颜色不同，React 比较两个组件后仍然认为它们是相同的。" />
 
 <Gotcha>
 
-Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`:
+记住 **对 React 来说重要的是组件在 UI 树中的位置,而不是在 JSX 的位置！** 这个组件有两个 `return` 语句，它们在 `if` 内外有不同的 `<Counter />` JSX 标签：
 
 <Sandpack>
 
@@ -363,7 +363,7 @@ export default function App() {
               setIsFancy(e.target.checked)
             }}
           />
-          Use fancy styling
+          使用好看的样式
         </label>
       </div>
     );
@@ -379,7 +379,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        使用好看的样式
       </label>
     </div>
   );
@@ -405,7 +405,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -440,15 +440,15 @@ label {
 
 </Sandpack>
 
-You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `<Counter />` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return. In both cases, the `App` component returns a `<div>` with `<Counter />` as a first child. This is why React considers them as _the same_ `<Counter />`.
+你可能认为当你勾选复选框的时候状态会被重置，但它没有！这是因为**两个 `<Counter />` 标签被渲染在了相同的位置。** React 不知道你的函数里是如何进行条件判断的，它只关注你返回的树。在这两种条件下，`App` 组件都返回了一个包裹着 `<Counter />` 作为第一个子元素的 `div`。这就是 React 认为它们是 _同一个_ `<Counter />` 的原因。
 
-You can think of them as having the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic.
+你可以认为它们有相同的“地址”：根节点的第一个子节点的第一个子节点。不管你的逻辑是怎么组织的，这就是 React 在上下两次渲染间将它们匹配的方式。
 
 </Gotcha>
 
-## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/}
+## 相同位置的不同组件将重置状态 {/*different-components-at-the-same-position-reset-state*/}
 
-In this example, ticking the checkbox will replace `<Counter>` with a `<p>`:
+在这个例子中，勾选复选框会将 `<Counter>` 替换为一个 `<p>`：
 
 <Sandpack>
 
@@ -460,7 +460,7 @@ export default function App() {
   return (
     <div>
       {isPaused ? (
-        <p>See you later!</p> 
+        <p>待会见！</p> 
       ) : (
         <Counter /> 
       )}
@@ -472,7 +472,7 @@ export default function App() {
             setIsPaused(e.target.checked)
           }}
         />
-        Take a break
+        休息一下
       </label>
     </div>
   );
@@ -495,7 +495,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -525,11 +525,11 @@ label {
 
 </Sandpack>
 
-Here, you switch between _different_ component types at the same position. Initially, the first child of the `<div>` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state.
+示例中，你在相同位置用 _不同类型_ 的组件进行切换。初始化时，`<div>` 的第一个子元素是一个 `Counter`。但是当你切换成一个 `p` 时，React 将 `Counter` 从 UI 树中移除并销毁了它的状态。
 
-<img alt="Removing a component from the UI tree destroys its state." src="/images/docs/sketches/s_ui-component-swap.png" />
+<img alt="将一个组件从 UI 树中移除会销毁它的状态。" src="/images/docs/sketches/s_ui-component-swap.png" />
 
-Also, **when you render a different component in the same position, it resets the state of its entire subtree**. To see how this works, increment the counter and then tick the checkbox:
+并且，**当你在相同位置渲染了不同的组件时，组件的整个子树都会被重置** 。验证这一点，可以增加计数器的值然后勾选复选框：
 
 <Sandpack>
 
@@ -557,7 +557,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        使用好看的样式
       </label>
     </div>
   );
@@ -583,7 +583,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -618,17 +618,17 @@ label {
 
 </Sandpack>
 
-The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
+当你勾选复选框后计数器的状态被重置了。即使只是渲染一个 `Counter` ， `div` 的第一个子元素从 `div` 变成了 `section` 。当子 `div` 被从 DOM 中移除的时候，它底下的整颗树（包含 `Counter` 以及它的状态）也都被销毁了。
 
-<img alt="If the first child isn't the same, forget about it!" src="/images/docs/sketches/s_ui-components-swap.png" />
+<img alt="如果第一个子元素不同，就回不去了！" src="/images/docs/sketches/s_ui-components-swap.png" />
 
-As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.
+一般来说，**如果你想在重新渲染之间保持状态，树的结构应该“匹配”** 于两次渲染之间。如果结构不同会导致状态的销毁，因为 React 会在组件从树中移除后销毁它的状态。
 
 <Gotcha>
 
-This is why you should not nest component function definitions.
+以下是为什么不应将组件的定义进行嵌套的原因。
 
-Here, the `MyTextField` component function is defined *inside* `MyComponent`:
+示例中， `MyTextField` 组件被定义在了 `MyComponent` 内：
 
 <Sandpack>
 
@@ -654,7 +654,7 @@ export default function MyComponent() {
       <MyTextField />
       <button onClick={() => {
         setCounter(counter + 1)
-      }}>Clicked {counter} times</button>
+      }}>点击了 {counter} 次</button>
     </>
   );
 }
@@ -663,13 +663,13 @@ export default function MyComponent() {
 </Sandpack>
 
 
-Every time you click the button, the input state disappears! This is because a *different* `MyTextField` function is created for every render of `MyComponent`. You're rendering a *different* component in the same position, so React resets all state below. This leads to bugs and performance problems. To avoid this problem, **always declare component functions at the top level, and don't nest their definitions.**
+每次点击按钮后，输入框的状态都消失了！这是因为每次渲染后都创建了一个 _不同_ 的 `MyTextField` 函数。在相同位置渲染的是 _不同_ 的组件，所以 React 将它相关的状态都重置了。这样会导致 bug 以及性能问题。为了避免这个问题， **总是将组件定义在最外层并且不要嵌套定义。**
 
 </Gotcha>
 
-## Resetting state at the same position {/*resetting-state-at-the-same-position*/}
+## 在相同位置重置状态 {/*resetting-state-at-the-same-position*/}
 
-By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn:
+默认情况下，React 会保留还在相同位置的组件的状态。通常这就是我们想要的，所以它作为默认行为很合理。但有时候，你可能想要重置一个组件的状态。考虑一下这个应用，它可以让两个玩家在每个回合中记录他们的得分：
 
 <Sandpack>
 
@@ -688,7 +688,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        下一位玩家！
       </button>
     </div>
   );
@@ -709,9 +709,9 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>{person}的分数：{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -739,21 +739,21 @@ h1 {
 
 </Sandpack>
 
-Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed.
+目前你切换了玩家后，分数还是没有变化。这两个 `Counter` 出现于相同位置，所以 React 认为是 _同一个_ `Counter` ，只是传了不同的 `person` prop。
 
-<Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="React weighs both components, and although they are different colors, it sees them as the same." />
+<Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="React 比较这两个组件，虽然他们的颜色不同，但依然认为它们是相同的。" />
 
-But conceptually, in this app they should be two separate counters. They might appear in the same place in the UI, but one is a counter for Taylor, and another is a counter for Sarah.
+概念上讲，这个应用的两个计数器应该是分离的。它们虽然 UI 上的位置相同，但是一个是 Taylor 的技术，一个是 Sarah 的计数器。
 
-There are two ways to reset state when switching between them:
+有两个方法可以在它们之间切换时重置状态：
 
-1. Render components in different positions
-2. Give each component an explicit identity with `key`
+1. 将组件渲染在不同的位置
+2. 给每个组件一个明确的标识 `key`
 
 
-### Option 1: Rendering a component in different positions {/*option-1-rendering-a-component-in-different-positions*/}
+### 方法一：将组件渲染在不同的位置 {/*option-1-rendering-a-component-in-different-positions*/}
 
-If you want these two `Counter`s to be independent, you can render them in two different positions:
+如果想要两个 `Counter` 是独立的，可以将他们渲染在不同的位置：
 
 <Sandpack>
 
@@ -773,7 +773,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        下一位玩家！
       </button>
     </div>
   );
@@ -796,7 +796,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -824,22 +824,22 @@ h1 {
 
 </Sandpack>
 
-* Initially, `isPlayerA` is `true`. So the first position contains `Counter` state, and the second one is empty.
-* When you click the "Next player" button the first position clears but the second one now contains a `Counter`.
+* 初始化时， `isPlayerA` 的值是 `true` 。所以第一个位置包含了 `Counter` 的状态，而第二个位置是空的。
+* 点击了“下一位玩家”按钮后，第一个位置被清空了但是第二个位置现在包含了一个 `Counter` 。
 
 <img alt=" " src="/images/docs/sketches/s_placeholder-ui.png" />
 
-> Each `Counter`'s state gets destroyed each time its removed from the DOM. This is why they reset every time you click the button.
+> 每次 `Counter` 被从 DOM 中移除时它的状态会被销毁。这就是每次点击了按钮后它们被重置的原因。
 
-This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
+如果只有少数独立的组件在相同的位置渲染，这个解决方案很方便。这个例子中只有 2 个组件，所以在 JSX 里分开进行渲染并不麻烦。
 
-### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/}
+### 方法二：使用 key 来重置状态 {/*option-2-resetting-state-with-a-key*/}
 
-There is also another, more generic, way to reset a component's state.
+还有另一种更通用的方法来重置组件的状态。
 
-You might have seen `key`s when [rendering lists](/learn/rendering-lists#keeping-list-items-in-order-with-key). Keys aren't just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent ("first counter", "second counter") to discern between components. But keys let you tell React that this is not just a *first* counter, or a *second* counter, but a specific counter--for example, *Taylor's* counter. This way, React will know *Taylor's* counter wherever it appears in the tree!
+你可能已经在[列表渲染](/learn/rendering-lists#keeping-list-items-in-order-with-key)章节看过了 `key` 。但 key 不只是用于列表！你可以使用 key 来让 React 区分任何组件。默认情况下，React 使用父级中的顺序（“第一个计数器”、“第二个计数器”）来区分组件。但是 key 可以告诉 React 这不仅仅是 *第一个* 或者 *第二个* 计数器，而是一个特定的计数器————例如，*Taylor* 的计数器。这样不管它出现在哪里 React 都会知道它是 *Taylor* 的计数器！
 
-In this example, the two `<Counter />`s don't share state even though they appear in the same place in JSX:
+在这个例子中，两个 `<Counter />` 不会共享状态，即使它们出现在 JSX 中的相同位置：
 
 <Sandpack>
 
@@ -858,7 +858,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        下一位玩家！
       </button>
     </div>
   );
@@ -879,9 +879,9 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>{person}的分数：{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        加一
       </button>
     </div>
   );
@@ -909,7 +909,7 @@ h1 {
 
 </Sandpack>
 
-Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:**
+在 Taylor 和 Sarah 之间切换不会保留状态。因为 **你给它们赋了不同的 `key`：**
 
 ```js
 {isPlayerA ? (
@@ -919,17 +919,17 @@ Switching between Taylor and Sarah does not preserve the state. This is because
 )}
 ```
 
-Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, from React's perspective, these are two different counters. As a result, they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over.
+指定 `key` 告诉 React 去使用 `key` 作为其位置信息的一部分，而不是它们在父元素中的顺序。这就是为什么尽管你用 JSX 将组件渲染在相同位置，但在 React 看来它们是两个不同的计数器。因此它们不会共享状态。每次一个计数器出现在屏幕上时，它的状态会被创建。每次它被移除了，它的状态会被销毁。在它们之间切换会一次又一次地重置它们的状态。
 
 <Illustration src="/images/docs/illustrations/i_keys-in-trees.png" alt="React distinguishes between components with different keys, even if they are of the same type." />
 
-> Remember that keys are not globally unique. They only specify the position *within the parent*.
+> 请记住 key 不是全局唯一的。它们只能在同一父元素内指定顺序。
 
-### Resetting a form with a key {/*resetting-a-form-with-a-key*/}
+### 使用 key 重置表单 {/*resetting-a-form-with-a-key*/}
 
-Resetting state with a key is particularly useful when dealing with forms.
+使用 key 来重置状态在处理表单时特别有用。
 
-In this chat app, the `<Chat>` component contains the text input state:
+在这个聊天应用中， `<Chat>` 组件包含文本输入状态：
 
 <Sandpack>
 
@@ -992,11 +992,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'跟 ' + contact.name + ' 聊一聊'}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>发送到 {contact.email}</button>
     </section>
   );
 }
@@ -1024,17 +1024,17 @@ textarea {
 
 </Sandpack>
 
-Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `<Chat>` is rendered at the same position in the tree.
+尝试在输入框中输入一些内容，然后点击 “Alice” 或 “Bob” 去切换到不同的收件人。你会发现因为 `<Chat>` 被渲染在了树的相同位置，输入框的状态依然被保留了。
 
-**In many apps, this may be the desired behavior, but not in a chat app!** You don't want to let the user send a message they already typed to a wrong person due to an accidental click. To fix it, add a `key`:
+**在很多应用里这可能就是想要的行为，但在这个聊天应用里不是的！** 你不希望用户因为一次偶然的点击而把他们已经输入的信息发送给一个错误的人。要修复这个问题，只需给组件添加一个 `key` ：
 
 ```js
 <Chat key={to.id} contact={to} />
 ```
 
-This ensures that when you select a different recipient, the `Chat` component will be recreated from scratch, including any state in the tree below it. React will also re-create the DOM elements instead of reusing them.
+这样确保了当你选择一个不同的收件人时， `Chat` 组件以及它在树中的任何状态都将从头开始重新创建。 React 还将重新创建 DOM 元素，而不是复用它们。
 
-Now switching the recipient always clears the text field:
+现在切换收件人都将清除文本字段：
 
 <Sandpack>
 
@@ -1097,11 +1097,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'跟 ' + contact.name + ' 聊一聊'}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>发送到 {contact.email}</button>
     </section>
   );
 }
@@ -1131,22 +1131,22 @@ textarea {
 
 <DeepDive title="Preserving state for removed components">
 
-In a real chat app, you'd probably want to recover the input state when the user selects the previous recipient again. There are a few ways to keep the state "alive" for a component that's no longer visible:
+在真正的聊天应用中，当用户再次选择前一个收件人时，你可能希望恢复输入的状态。对于不可见的组件，有几种方法可以让其状态保持“存活”：
 
-- You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes.
-- You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution.
-- You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too.
+- 你可以渲染 _所有_ 的聊天而不只是当前这一个，但是用 CSS 隐藏其他的。这些聊天不会从树中移除，所以它们的内部状态会被保留下来。这种方法对于简单 UI 非常有效。但如果隐藏的树节点很大且包含了大量的 DOM 节点，那么性能会变得很差。
+- 你可以进行 [状态提升](/learn/sharing-state-between-components) 并在父组件中保存每个收件人的草稿消息。这样即使子组件被移除了也无所谓，因为保留重要信息的是父组件。这是最常见的方法。
+- 除了 React 的状态，你也可以使用其他数据源。例如，即使用户不小心关闭页面后你也希望消息草稿持久化。要实现这一点，你可以让 `Chat` 组件从 [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 读取数据进行初始化，并把草稿保存到 localStorage 。
 
-No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `<Chat>` tree based on the current recipient.
+无论采取哪种策略，与 Alice 的聊天在概念上都不同于与 Bob 的聊天，因此根据当前收件人为 `<Chat>` 树指定一个 `key` 是有意义的。
 
 </DeepDive>
 
 <Recap>
 
-- React keeps state for as long as the same component is rendered at the same position.
-- State is not kept in JSX tags. It's associated with the tree position in which you put that JSX.
-- You can force a subtree to reset its state by giving it a different key.
-- Don't nest component definitions, or you'll reset state by accident.
+- 只要在相同位置渲染的是相同组件， React 就会保留状态。
+- 状态不是保留在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。
+- 你可以通过指定一个不同的 key 让一个子树重置它的状态。
+- 不要嵌套组件的定义，否则将意外地重置状态。
 
 </Recap>
 
@@ -1154,9 +1154,9 @@ No matter which strategy you pick, a chat _with Alice_ is conceptually distinct
 
 <Challenges>
 
-### Fix disappearing input text {/*fix-disappearing-input-text*/}
+### 修复丢失的输入文本 {/*fix-disappearing-input-text*/}
 
-This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text.
+这个例子在你按了按钮后会展示一条消息，但同时也会意外地重置输入文本。为什么会发生这种情况？修复它，使按下按钮不再重置输入文本。
 
 <Sandpack>
 
@@ -1168,11 +1168,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>提示：你最喜欢哪个城市？</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>隐藏提示</button>
       </div>
     );
   }
@@ -1181,7 +1181,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>显示提示</button>
     </div>
   );
 }
@@ -1205,9 +1205,9 @@ textarea { display: block; margin: 10px 0; }
 
 <Solution>
 
-The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `<div>`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes.
+`Form` 被渲染在了不同的位置是问题所在。在 `if` 分支里， `Form` 是 `<div>` 的第二个子元素，但在 `else` 分支里它是第一个子元素。所以在相同位置的组件类型发生了变化。第一个位置在保存 `p` 和 `Form` 之间变化，而第二个位置在保存 `Form` 和 `button` 之间变化。每当组件类型发生变化时， React 都会重置状态。
 
-The easiest solution is to unify the branches so that `Form` always renders in the same position:
+最简单的解决方案是统一分支的写法，这样 `Form` 总是在相同位置渲染：
 
 <Sandpack>
 
@@ -1219,17 +1219,17 @@ export default function App() {
   return (
     <div>
       {showHint &&
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>提示：你最喜欢哪个城市？</i></p>
       }
       <Form />
       {showHint ? (
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>隐藏提示</button>
       ) : (
         <button onClick={() => {
           setShowHint(true);
-        }}>Show hint</button>
+        }}>显示提示</button>
       )}
     </div>
   );
@@ -1253,7 +1253,7 @@ textarea { display: block; margin: 10px 0; }
 </Sandpack>
 
 
-Technically, you could also add `null` before `<Form />` in the `else` branch to match the `if` branch structure:
+还有个技巧，你可以将 `null` 添加到 `else` 分支的 `<Form />` 前，以匹配 `if` 的分支结构：
 
 <Sandpack>
 
@@ -1265,11 +1265,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>提示：你最喜欢哪个城市？</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>隐藏提示</button>
       </div>
     );
   }
@@ -1279,7 +1279,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>显示提示</button>
     </div>
   );
 }
@@ -1301,19 +1301,19 @@ textarea { display: block; margin: 10px 0; }
 
 </Sandpack>
 
-This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`.
+这样 `Form` 总是第二个子元素，所以它保持在相同位置并保留了它的状态。但是这种方法不那么明显，并且会引入其他人删除这个 `null` 的风险。
 
 </Solution>
 
-### Swap two form fields {/*swap-two-form-fields*/}
+### 交换两个表单字段 {/*swap-two-form-fields*/}
 
-This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field.
+这个表单可以让你输入姓氏和名字。它还有一个复选框控制哪个字段放在前面。勾选复选框时，“姓氏”字段将出现在“姓名”字段之前。
 
-It almost works, but there is a bug. If you fill in the "First name" input and tick the checkbox, the text will stay in the first input (which is now "Last name"). Fix it so that the input text *also* moves when you reverse the order.
+它几乎可以工作，但有一个 bug 。如果你填写了“名字”输入框并勾选复选框，文本将保留在第一个输入(现在变成了“姓氏”)。修复它，当你反转顺序时输入文本 *也* 会跟着移动。
 
 <Hint>
 
-It seems like for these fields, their position within the parent is not enough. Is there some way to tell React how to match up the state between re-renders?
+对于这两个字段来说，只利用它们在父节点中的位置不足以实现功能。有没有办法让 React 知道如何在重新渲染之间匹配状态？
 
 </Hint>
 
@@ -1331,22 +1331,22 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      反转顺序
     </label>
   );
   if (reverse) {
     return (
       <>
-        <Field label="Last name" /> 
-        <Field label="First name" />
+        <Field label="姓氏" /> 
+        <Field label="名字" />
         {checkbox}
       </>
     );
   } else {
     return (
       <>
-        <Field label="First name" /> 
-        <Field label="Last name" />
+        <Field label="名字" /> 
+        <Field label="姓氏" />
         {checkbox}
       </>
     );    
@@ -1357,7 +1357,7 @@ function Field({ label }) {
   const [text, setText] = useState('');
   return (
     <label>
-      {label}:{' '}
+      {label}：
       <input
         type="text"
         value={text}
@@ -1377,7 +1377,7 @@ label { display: block; margin: 10px 0; }
 
 <Solution>
 
-Give a `key` to both `<Field>` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `<Field>` even if their order within the parent changes:
+为 `if` 和 `else` 分支中的两个 `<Field>` 组件都指定一个 `key` 。这告诉 React 如何“匹配” `<Field>` 的正确状态，即使它们在父节点中的顺序发生了变化：
 
 <Sandpack>
 
@@ -1393,22 +1393,22 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      反转顺序
     </label>
   );
   if (reverse) {
     return (
       <>
-        <Field key="lastName" label="Last name" /> 
-        <Field key="firstName" label="First name" />
+        <Field key="lastName" label="姓氏" /> 
+        <Field key="firstName" label="名字" />
         {checkbox}
       </>
     );
   } else {
     return (
       <>
-        <Field key="firstName" label="First name" /> 
-        <Field key="lastName" label="Last name" />
+        <Field key="firstName" label="名字" /> 
+        <Field key="lastName" label="姓氏" />
         {checkbox}
       </>
     );    
@@ -1419,7 +1419,7 @@ function Field({ label }) {
   const [text, setText] = useState('');
   return (
     <label>
-      {label}:{' '}
+      {label}：
       <input
         type="text"
         value={text}
@@ -1439,11 +1439,11 @@ label { display: block; margin: 10px 0; }
 
 </Solution>
 
-### Reset a detail form {/*reset-a-detail-form*/}
+### 重置详情表单 {/*reset-a-detail-form*/}
 
-This is an editable contact list. You can edit the selected contact's details and then either press "Save" to update it, or "Reset" to undo your changes.
+这是一个可编辑的联系人列表。你您可以编辑所选联系人的详细信息，然后点击“保存”更新它或点击“重置”来撤消你的修改。
 
-When you select a different contact (for example, Alice), the state updates but the form keeps showing the previous contact's details. Fix it so that the form gets reset when the selected contact changes.
+当你选中另一个联系人（比如， Alice ），状态会更新，但表单会一直显示前一个联系人的详细信息。修复它，使选定的联系人改变时，表单获得重置时。
 
 <Sandpack>
 
@@ -1535,7 +1535,7 @@ export default function EditContact({ initialData, onSave }) {
   return (
     <section>
       <label>
-        Name:{' '}
+        名称：
         <input
           type="text"
           value={name}
@@ -1543,7 +1543,7 @@ export default function EditContact({ initialData, onSave }) {
         />
       </label>
       <label>
-        Email:{' '}
+        邮箱：
         <input
           type="email"
           value={email}
@@ -1558,13 +1558,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        保存
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        重置
       </button>
     </section>
   );
@@ -1595,7 +1595,7 @@ button {
 
 <Solution>
 
-Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form:
+将 `key={selectedId}` 赋给 `EditContact` 组件。这样在不同联系人之间切换将重置表单：
 
 <Sandpack>
 
@@ -1688,7 +1688,7 @@ export default function EditContact({ initialData, onSave }) {
   return (
     <section>
       <label>
-        Name:{' '}
+        名称：
         <input
           type="text"
           value={name}
@@ -1696,7 +1696,7 @@ export default function EditContact({ initialData, onSave }) {
         />
       </label>
       <label>
-        Email:{' '}
+        邮箱：
         <input
           type="email"
           value={email}
@@ -1711,13 +1711,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        保存
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        重置
       </button>
     </section>
   );
@@ -1748,13 +1748,13 @@ button {
 
 </Solution>
 
-### Clear an image while it's loading {/*clear-an-image-while-its-loading*/}
+### 清除加载中的图片 {/*clear-an-image-while-its-loading*/}
 
-When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `<img>` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next," the previous image immediately clears.
+当你点击“下一张”时，浏览器开始加载下一张图片。但因为它显示在相同的 `<img>` 标签中，默认情况下在下一张图片加载完成前你都会看到上一张图片。如果文案与图片的匹配很重要，那么这可能不是我们想要的。调整它，当你点击“下一张”，上一张图片就被立即清除。
 
 <Hint>
 
-Is there a way to tell React to re-create the DOM instead of reusing it?
+有没有办法让 React 重新创建而不是复用 DOM ？
 
 </Hint>
 
@@ -1779,10 +1779,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        下一张
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        第 {index + 1} 张图片 / {images.length}
       </h3>
       <img src={image.src} />
       <p>
@@ -1824,7 +1824,7 @@ img { width: 150px; height: 150px; }
 
 <Solution>
 
-You can provide a `key` to the `<img>` tag. When that `key` changes, React will re-create the `<img>` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text.
+你可以为 `<img>` 提供一个 `key` 。当 `key` 更改时，React 将从头开始重新创建 `<img>` DOM 节点。这样在每张图片加载时会导致一个短暂的闪白，所以你不会希望应用的每张图片都这样子。但是如果你想确保图片与文本始终匹配，那这么做是有意义的。
 
 <Sandpack>
 
@@ -1847,10 +1847,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        下一张
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        第 {index + 1} 张图片 / {images.length}
       </h3>
       <img key={image.src} src={image.src} />
       <p>
@@ -1892,11 +1892,11 @@ img { width: 150px; height: 150px; }
 
 </Solution>
 
-### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/}
+### 修复列表中错位的状态 {/*fix-misplaced-state-in-the-list*/}
 
-In this list, each `Contact` has state that determines whether "Show email" has been pressed for it. Press "Show email" for Alice, and then tick the "Show in reverse order" checkbox. You will notice that it's _Taylor's_ email that is expanded now, but Alice's--which has moved to the bottom--appears collapsed.
+在这个列表中每个 `Contact` 都有个状态表示是否按下了“显示邮箱”。点击 Alice 的“显示邮箱”按钮，然后勾选“以相反的顺序显示”复选框。你会注意到现在展开的是 _Taylor_ 的邮箱，而已经被移到底部的 Alice 的邮箱已经被收起了。
 
-Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering.
+修复它使得不管选中的顺序如何，表示展开的状态都与各个联系人相关联。
 
 <Sandpack>
 
@@ -1922,7 +1922,7 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        以相反的顺序显示
       </label>
       <ul>
         {displayedContacts.map((contact, i) =>
@@ -1956,7 +1956,7 @@ export default function Contact({ contact }) {
       <button onClick={() => {
         setExpanded(!expanded);
       }}>
-        {expanded ? 'Hide' : 'Show'} email
+        {expanded ? '隐藏' : '显示'}邮箱
       </button>
     </>
   );
@@ -1986,16 +1986,16 @@ button {
 
 <Solution>
 
-The problem is that this example was using index as a `key`:
+这个例子的问题是使用了 index 作为 `key`：
 
 ```js
 {displayedContacts.map((contact, i) =>
   <li key={i}>
 ```
 
-However, you want the state to be associated with _each particular contact_.
+然而我们希望状态与 _每个特定的联系人_ 相关联。
 
-Using the contact ID as a `key` instead fixes the issue:
+使用联系人的 ID 作为 `key` 来修复这个问题：
 
 <Sandpack>
 
@@ -2021,7 +2021,7 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        以相反的顺序显示
       </label>
       <ul>
         {displayedContacts.map(contact =>
@@ -2055,7 +2055,7 @@ export default function Contact({ contact }) {
       <button onClick={() => {
         setExpanded(!expanded);
       }}>
-        {expanded ? 'Hide' : 'Show'} email
+        {expanded ? '显示' : '隐藏'}邮箱
       </button>
     </>
   );
@@ -2083,7 +2083,7 @@ button {
 
 </Sandpack>
 
-State is associated with the tree position. A `key` lets you specify a named position instead of relying on order.
+状态与树的位置相关联。 `key` 允许你指定一个具名的位置，而不再依赖于顺序。
 
 </Solution>
 

From 4f214a99171d929fd9959f7a4d1c9bca0956dc64 Mon Sep 17 00:00:00 2001
From: YogaLin <lsyoga@foxmail.com>
Date: Tue, 30 Nov 2021 13:40:42 +0800
Subject: [PATCH 2/9] docs(cn): update preserving-and-resetting-state

---
 .../learn/preserving-and-resetting-state.md   | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index 7dfaff5351..8150d97d28 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -1,10 +1,12 @@
 ---
 title: 如何控制状态的保留或重置
+translators:
+  - YogaLin
 ---
 
 <Intro>
 
-状态与组件之间是隔离的。根据组件在 UI 树中的位置，React 可以跟踪组件所属的状态。你可以控制在 re-render 之间保留还是重置状态。
+状态与组件之间是隔离的。根据组件在 UI 树中的位置，React 可以跟踪组件所属的状态。你可以控制重新渲染时状态是保留还是重置。
 
 </Intro>
 
@@ -13,15 +15,15 @@ title: 如何控制状态的保留或重置
 * React 眼中的组件结构
 * React 保留或重置状态的条件
 * 如何强制 React 重置组件的状态
-* Key 和组件切换对状态保留的影响
+* Key 和组件类型变化对状态保留的影响
 
 </YouWillLearn>
 
 ## UI 树 {/*the-ui-tree*/}
 
-浏览器使用许多树形结构来建模 UI 。[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) 用于表示 HTML 元素，[CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) 则表示 CSS 元素。甚至还有 [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)！
+浏览器使用许多树形结构来构建 UI 。[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) 用于表示 HTML 元素，[CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) 则表示 CSS 元素。甚至还有 [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)！
 
-React 也使用树形结构来对你创造的 UI 进行管理和建模。React 根据 JSX 生成了 **UI 树** 。React DOM 根据 UI 树去更新浏览器的 DOM 元素。（React Native 则在不同的移动端平台将 UI 树转换为相应的元素）
+React 也使用树形结构来对你创造的 UI 进行管理和构建。React 根据 JSX 生成了 **UI 树** 。React DOM 根据 UI 树去更新浏览器的 DOM 元素。（React Native 则在不同的移动端平台将 UI 树转换为相应的元素）
 
 <img alt="React 获取组件后将它们转换为 UI 树结构，然后 ReactDOM 在浏览器中使用 DOM 将它们转换为 HTML。" src="/images/docs/sketches/s_react-dom-tree.png" />
 
@@ -98,7 +100,7 @@ label {
 
 <img alt="JSX 被转换为一棵树" src="/images/docs/sketches/s_jsx-to-tree.png" />
 
-**这是两个独立的 counter，因为它们在树中被渲染在了各自的位置** 一般情况下你不用去考虑这些位置来使用 React，但知道它们是如何工作的是很有用的。
+**这是两个独立的 counter，因为它们在树中被渲染在了各自的位置。** 一般情况下你不用去考虑这些位置来使用 React，但知道它们是如何工作会很有用。
 
 在 React 中，屏幕中的每个组件都有完全独立的状态。举个例子，当你并排渲染了两个 `Counter` 组件时，它们都拥有各自独立的 `score` 和 `hover` 状态。
 
@@ -160,7 +162,7 @@ function Counter() {
 
 </Sandpack>
 
-只有当相同的组件被渲染在了相同的位置，React 才会一直保留着组件的状态。想要验证这一点，可以增加两个计数器的值，清除“渲染第二个计数器”的复选框，然后重新勾选：
+只有当相同的组件被渲染在了相同的位置，React 才会一直保留着组件的状态。想要验证这一点，可以增加两个计数器的值，取消勾选“渲染第二个计数器”的复选框，然后重新勾选：
 
 <Sandpack>
 
@@ -236,7 +238,7 @@ label {
 
 注意，当停止渲染第二个计数器的那一刻，它的状态完全消失了。这是因为当 React 删除一个组件时， React 会销毁它的状态。
 
-<img alt="React 从树中移出组件的时候，也会同时移除它的状态" src="/images/docs/sketches/s_remove-ui.png" />
+<img alt="React 从树中移出组件的时候，也会同时销毁它的状态" src="/images/docs/sketches/s_remove-ui.png" />
 
 当你重新勾选“渲染第二个计数器”复选框时，另一个计数器及其状态从头开始初始化（`score = 0`）并添加到 DOM 中。
 
@@ -336,9 +338,9 @@ label {
 <img alt="React 只关注组件以及它在 UI 树中渲染的位置。" src="/images/docs/sketches/s_ui-swap.png" />
 
 
-在相同位置的同一个组件，所以对 React 来说，它是同一个计数器。
+位于相同位置的相同组件，所以对 React 来说，它是同一个计数器。
 
-<Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="尽管两个组件颜色不同，React 比较两个组件后仍然认为它们是相同的。" />
+<Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="尽管两个组件颜色不同，React 比较后仍然认为它们是相同的。" />
 
 <Gotcha>
 
@@ -440,7 +442,7 @@ label {
 
 </Sandpack>
 
-你可能认为当你勾选复选框的时候状态会被重置，但它没有！这是因为**两个 `<Counter />` 标签被渲染在了相同的位置。** React 不知道你的函数里是如何进行条件判断的，它只关注你返回的树。在这两种条件下，`App` 组件都返回了一个包裹着 `<Counter />` 作为第一个子元素的 `div`。这就是 React 认为它们是 _同一个_ `<Counter />` 的原因。
+你可能认为当你勾选复选框的时候状态会被重置，但它没有！这是因为 **两个 `<Counter />` 标签被渲染在了相同的位置。** React 不知道你的函数里是如何进行条件判断的，它只关注你返回的树。在这两种条件下，`App` 组件都返回了一个包裹着 `<Counter />` 作为第一个子元素的 `div`。这就是 React 认为它们是 _同一个_ `<Counter />` 的原因。
 
 你可以认为它们有相同的“地址”：根节点的第一个子节点的第一个子节点。不管你的逻辑是怎么组织的，这就是 React 在上下两次渲染间将它们匹配的方式。
 
@@ -525,7 +527,7 @@ label {
 
 </Sandpack>
 
-示例中，你在相同位置用 _不同类型_ 的组件进行切换。初始化时，`<div>` 的第一个子元素是一个 `Counter`。但是当你切换成一个 `p` 时，React 将 `Counter` 从 UI 树中移除并销毁了它的状态。
+示例中，你在相同位置用 _不同类型_ 的组件进行切换。初始化时， `<div>` 的第一个子元素是一个 `Counter` 。但是当你切换成一个 `p` 时，React 将 `Counter` 从 UI 树中移除并销毁了它的状态。
 
 <img alt="将一个组件从 UI 树中移除会销毁它的状态。" src="/images/docs/sketches/s_ui-component-swap.png" />
 
@@ -618,15 +620,15 @@ label {
 
 </Sandpack>
 
-当你勾选复选框后计数器的状态被重置了。即使只是渲染一个 `Counter` ， `div` 的第一个子元素从 `div` 变成了 `section` 。当子 `div` 被从 DOM 中移除的时候，它底下的整颗树（包含 `Counter` 以及它的状态）也都被销毁了。
+当你勾选复选框后计数器的状态被重置了。即使你渲染了一个 `Counter` ， `div` 的第一个子元素从 `div` 变成了 `section` 。当子 `div` 从 DOM 中被移除的时候，它底下的整颗树（包含 `Counter` 以及它的状态）也都被销毁了。
 
-<img alt="如果第一个子元素不同，就回不去了！" src="/images/docs/sketches/s_ui-components-swap.png" />
+<img alt="如果第一个子元素不同了，就回不去了！" src="/images/docs/sketches/s_ui-components-swap.png" />
 
-一般来说，**如果你想在重新渲染之间保持状态，树的结构应该“匹配”** 于两次渲染之间。如果结构不同会导致状态的销毁，因为 React 会在组件从树中移除后销毁它的状态。
+一般来说，**如果你想在重新渲染之间保持状态，树的结构应该“匹配”** 于两次渲染之间。结构不同会导致状态的销毁，因为 React 会在组件从树中移除后销毁它的状态。
 
 <Gotcha>
 
-以下是为什么不应将组件的定义进行嵌套的原因。
+以下是为什么不应将组件嵌套定义的原因。
 
 示例中， `MyTextField` 组件被定义在了 `MyComponent` 内：
 
@@ -709,7 +711,7 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}的分数：{score}</h1>
+      <h1>{person} 的分数：{score}</h1>
       <button onClick={() => setScore(score + 1)}>
         加一
       </button>
@@ -743,9 +745,9 @@ h1 {
 
 <Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="React 比较这两个组件，虽然他们的颜色不同，但依然认为它们是相同的。" />
 
-概念上讲，这个应用的两个计数器应该是分离的。它们虽然 UI 上的位置相同，但是一个是 Taylor 的技术，一个是 Sarah 的计数器。
+概念上讲，这个应用的两个计数器应该是分离的。它们虽然 UI 上的位置相同，但是一个是 Taylor 的计数器，一个是 Sarah 的计数器。
 
-有两个方法可以在它们之间切换时重置状态：
+有两个方法可以让它们之间切换时重置状态：
 
 1. 将组件渲染在不同的位置
 2. 给每个组件一个明确的标识 `key`
@@ -794,7 +796,7 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>{person} 的分数：{score}</h1>
       <button onClick={() => setScore(score + 1)}>
         加一
       </button>
@@ -837,7 +839,7 @@ h1 {
 
 还有另一种更通用的方法来重置组件的状态。
 
-你可能已经在[列表渲染](/learn/rendering-lists#keeping-list-items-in-order-with-key)章节看过了 `key` 。但 key 不只是用于列表！你可以使用 key 来让 React 区分任何组件。默认情况下，React 使用父级中的顺序（“第一个计数器”、“第二个计数器”）来区分组件。但是 key 可以告诉 React 这不仅仅是 *第一个* 或者 *第二个* 计数器，而是一个特定的计数器————例如，*Taylor* 的计数器。这样不管它出现在哪里 React 都会知道它是 *Taylor* 的计数器！
+你可能已经在 [列表渲染](/learn/rendering-lists#keeping-list-items-in-order-with-key) 章节看过了 `key` 。但 key 不只是用于列表！你可以使用 key 来让 React 区分任何组件。默认情况下，React 使用父级中的顺序（“第一个计数器”、“第二个计数器”）来区分组件。但是 key 可以告诉 React 这不仅仅是 *第一个* 或者 *第二个* 计数器，而是一个特定的计数器————例如，*Taylor* 的计数器。这样不管它出现在哪里 React 都会知道它是 *Taylor* 的计数器！
 
 在这个例子中，两个 `<Counter />` 不会共享状态，即使它们出现在 JSX 中的相同位置：
 
@@ -879,7 +881,7 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}的分数：{score}</h1>
+      <h1>{person} 的分数：{score}</h1>
       <button onClick={() => setScore(score + 1)}>
         加一
       </button>
@@ -919,7 +921,7 @@ h1 {
 )}
 ```
 
-指定 `key` 告诉 React 去使用 `key` 作为其位置信息的一部分，而不是它们在父元素中的顺序。这就是为什么尽管你用 JSX 将组件渲染在相同位置，但在 React 看来它们是两个不同的计数器。因此它们不会共享状态。每次一个计数器出现在屏幕上时，它的状态会被创建。每次它被移除了，它的状态会被销毁。在它们之间切换会一次又一次地重置它们的状态。
+指定 `key` 告诉 React 使用 `key` 作为其位置信息的一部分，而不是它们在父元素中的顺序。这就是为什么尽管你用 JSX 将组件渲染在相同位置，但在 React 看来它们是两个不同的计数器。因此它们不会共享状态。每次一个计数器出现在屏幕上时，它的状态会被创建。每次它被移除了，它的状态会被销毁。在它们之间切换会一次又一次地重置它们的状态。
 
 <Illustration src="/images/docs/illustrations/i_keys-in-trees.png" alt="React distinguishes between components with different keys, even if they are of the same type." />
 
@@ -1135,7 +1137,7 @@ textarea {
 
 - 你可以渲染 _所有_ 的聊天而不只是当前这一个，但是用 CSS 隐藏其他的。这些聊天不会从树中移除，所以它们的内部状态会被保留下来。这种方法对于简单 UI 非常有效。但如果隐藏的树节点很大且包含了大量的 DOM 节点，那么性能会变得很差。
 - 你可以进行 [状态提升](/learn/sharing-state-between-components) 并在父组件中保存每个收件人的草稿消息。这样即使子组件被移除了也无所谓，因为保留重要信息的是父组件。这是最常见的方法。
-- 除了 React 的状态，你也可以使用其他数据源。例如，即使用户不小心关闭页面后你也希望消息草稿持久化。要实现这一点，你可以让 `Chat` 组件从 [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 读取数据进行初始化，并把草稿保存到 localStorage 。
+- 除了 React 的状态，你也可以使用其他数据源。例如，即使用户不小心关闭页面后你也希望草稿消息持久化。要实现这一点，你可以让 `Chat` 组件从 [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 读取数据进行初始化，并把草稿保存到 localStorage 。
 
 无论采取哪种策略，与 Alice 的聊天在概念上都不同于与 Bob 的聊天，因此根据当前收件人为 `<Chat>` 树指定一个 `key` 是有意义的。
 
@@ -1156,7 +1158,7 @@ textarea {
 
 ### 修复丢失的输入文本 {/*fix-disappearing-input-text*/}
 
-这个例子在你按了按钮后会展示一条消息，但同时也会意外地重置输入文本。为什么会发生这种情况？修复它，使按下按钮不再重置输入文本。
+这个例子在你按了按钮后会展示一条消息，但同时也会意外地重置输入文本。为什么会发生这种情况？修复它，使按下按钮不再重置输入的文本。
 
 <Sandpack>
 
@@ -1307,9 +1309,9 @@ textarea { display: block; margin: 10px 0; }
 
 ### 交换两个表单字段 {/*swap-two-form-fields*/}
 
-这个表单可以让你输入姓氏和名字。它还有一个复选框控制哪个字段放在前面。勾选复选框时，“姓氏”字段将出现在“姓名”字段之前。
+这个表单可以让你输入姓氏和名字。它还有一个复选框控制哪个字段放在前面。勾选复选框时，“姓氏”字段将出现在“名字”字段之前。
 
-它几乎可以工作，但有一个 bug 。如果你填写了“名字”输入框并勾选复选框，文本将保留在第一个输入(现在变成了“姓氏”)。修复它，当你反转顺序时输入文本 *也* 会跟着移动。
+它差不多可以正常工作，但有一个 bug 。如果你填写了“名字”输入框并勾选复选框，文本将保留在第一个输入(现在变成了“姓氏”)。修复它，当你反转顺序时输入文本 *也* 会跟着移动。
 
 <Hint>
 
@@ -1441,9 +1443,9 @@ label { display: block; margin: 10px 0; }
 
 ### 重置详情表单 {/*reset-a-detail-form*/}
 
-这是一个可编辑的联系人列表。你您可以编辑所选联系人的详细信息，然后点击“保存”更新它或点击“重置”来撤消你的修改。
+这是一个可编辑的联系人列表。你您可以编辑所选联系人的详细信息，然后点击“保存”进行更新或点击“重置”来撤消你的修改。
 
-当你选中另一个联系人（比如， Alice ），状态会更新，但表单会一直显示前一个联系人的详细信息。修复它，使选定的联系人改变时，表单获得重置时。
+当你选中另一个联系人（比如， Alice），状态会更新，但表单会一直显示前一个联系人的详细信息。修复它，使选定的联系人改变时，表单获得重置时。
 
 <Sandpack>
 
@@ -1750,7 +1752,7 @@ button {
 
 ### 清除加载中的图片 {/*clear-an-image-while-its-loading*/}
 
-当你点击“下一张”时，浏览器开始加载下一张图片。但因为它显示在相同的 `<img>` 标签中，默认情况下在下一张图片加载完成前你都会看到上一张图片。如果文案与图片的匹配很重要，那么这可能不是我们想要的。调整它，当你点击“下一张”，上一张图片就被立即清除。
+当点击“下一张”时，浏览器开始加载下一张图片。但因为它显示在相同的 `<img>` 标签中，默认情况下在下一张图片加载完成前你都会看到上一张图片。如果文案与图片一一对应很重要，那么这可能不是我们想要的。调整它使得你点击“下一张”时上一张图片立即被清除。
 
 <Hint>
 
@@ -1824,7 +1826,7 @@ img { width: 150px; height: 150px; }
 
 <Solution>
 
-你可以为 `<img>` 提供一个 `key` 。当 `key` 更改时，React 将从头开始重新创建 `<img>` DOM 节点。这样在每张图片加载时会导致一个短暂的闪白，所以你不会希望应用的每张图片都这样子。但是如果你想确保图片与文本始终匹配，那这么做是有意义的。
+你可以为 `<img>` 提供一个 `key` 。当 `key` 更改时，React 将从头开始重新创建 `<img>` DOM 节点。这样会导致在每张图片加载时一个短暂的闪白，所以你不会希望应用里的每张图片都这样子。但是如果你想确保图片与文本始终匹配，那这么做是有意义的。
 
 <Sandpack>
 

From 6eea007c6ee159e095ad97e1c4589e4ebfa5f014 Mon Sep 17 00:00:00 2001
From: Yoga Lin <lsyoga@foxmail.com>
Date: Wed, 15 Dec 2021 21:56:22 +0800
Subject: [PATCH 3/9] Update
 beta/src/pages/learn/preserving-and-resetting-state.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hao Jiang ᛋ <22409868+Neo42@users.noreply.github.com>
---
 beta/src/pages/learn/preserving-and-resetting-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index 8150d97d28..d6261c5c4e 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -12,7 +12,7 @@ translators:
 
 <YouWillLearn>
 
-* React 眼中的组件结构
+* React 怎样“看待”组件结构
 * React 保留或重置状态的条件
 * 如何强制 React 重置组件的状态
 * Key 和组件类型变化对状态保留的影响

From b5d421bf11a92561fd977f38f1160cc88034cece Mon Sep 17 00:00:00 2001
From: YogaLin <lsyoga@foxmail.com>
Date: Wed, 22 Dec 2021 22:38:29 +0800
Subject: [PATCH 4/9] docs(cn): solve translation suggestions

---
 .../learn/preserving-and-resetting-state.md   | 191 +++++++++---------
 1 file changed, 96 insertions(+), 95 deletions(-)

diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index d6261c5c4e..dc1e5b004c 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -1,35 +1,36 @@
 ---
-title: 如何控制状态的保留或重置
+title: 对 state 进行保留和重置
 translators:
+  - Neo42
   - YogaLin
 ---
 
 <Intro>
 
-状态与组件之间是隔离的。根据组件在 UI 树中的位置，React 可以跟踪组件所属的状态。你可以控制重新渲染时状态是保留还是重置。
+各个组件的 state 是各自独立的。根据组件在 UI 树中的位置，React 可以跟踪哪些 state 属于哪个组件。你可以控制在重新渲染过程中何时对 state 进行保留和重置。
 
 </Intro>
 
 <YouWillLearn>
 
 * React 怎样“看待”组件结构
-* React 保留或重置状态的条件
-* 如何强制 React 重置组件的状态
-* Key 和组件类型变化对状态保留的影响
+* React 何时选择保留或重置 state
+* 如何强制 React 重置组件的 state
+* key 和组件类型如何影响 state 是否被保留
 
 </YouWillLearn>
 
 ## UI 树 {/*the-ui-tree*/}
 
-浏览器使用许多树形结构来构建 UI 。[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) 用于表示 HTML 元素，[CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) 则表示 CSS 元素。甚至还有 [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)！
+浏览器使用许多树形结构来为 UI 建立模型。[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) 用于表示 HTML 元素，[CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) 则表示 CSS 元素。甚至还有 [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)！
 
-React 也使用树形结构来对你创造的 UI 进行管理和构建。React 根据 JSX 生成了 **UI 树** 。React DOM 根据 UI 树去更新浏览器的 DOM 元素。（React Native 则在不同的移动端平台将 UI 树转换为相应的元素）
+React 也使用树形结构来对你创造的 UI 进行管理和建模。React 根据你的 JSX 生成 **UI 树**。React DOM 根据 UI 树去更新浏览器的 DOM 元素。（React Native 则将这些 UI 树转译成移动平台上特有的元素。）
 
 <img alt="React 获取组件后将它们转换为 UI 树结构，然后 ReactDOM 在浏览器中使用 DOM 将它们转换为 HTML。" src="/images/docs/sketches/s_react-dom-tree.png" />
 
-## 状态与其在树中的位置相关联 {/*state-is-tied-to-a-position-in-the-tree*/}
+## state 与树中的某个位置相关联 {/*state-is-tied-to-a-position-in-the-tree*/}
 
-当你创建了一个组件状态，你可能会觉得这个状态存在于组件内。但实际上，状态在 React 内部。根据组件在 UI 树中的位置，React 将它所持有的每个状态与正确的组件关联起来。
+当你为一个组件添加 state 时，你可能会觉得 state “活”在组件内部。但实际上，state 被保存在 React 内部。根据组件在 UI 树中的位置，React 将它所持有的每个 state 与正确的组件关联起来。
 
 
 下面只定义了一个 `<Counter />` JSX 标签，但将它渲染在了两个不同的位置：
@@ -96,13 +97,13 @@ label {
 
 </Sandpack>
 
-下面是它们在树中的样子：
+下面是它们的树形结构的样子：
 
-<img alt="JSX 被转换为一棵树" src="/images/docs/sketches/s_jsx-to-tree.png" />
+<img alt="JSX 被转换为一个树形结构" src="/images/docs/sketches/s_jsx-to-tree.png" />
 
 **这是两个独立的 counter，因为它们在树中被渲染在了各自的位置。** 一般情况下你不用去考虑这些位置来使用 React，但知道它们是如何工作会很有用。
 
-在 React 中，屏幕中的每个组件都有完全独立的状态。举个例子，当你并排渲染了两个 `Counter` 组件时，它们都拥有各自独立的 `score` 和 `hover` 状态。
+在 React 中，屏幕中的每个组件都有完全独立的 state。举个例子，当你并排渲染两个 `Counter` 组件时，它们都会拥有各自独立的 `score` 和 `hover` state。
 
 试试点击两个 counter 你会发现它们互不影响：
 
@@ -162,7 +163,7 @@ function Counter() {
 
 </Sandpack>
 
-只有当相同的组件被渲染在了相同的位置，React 才会一直保留着组件的状态。想要验证这一点，可以增加两个计数器的值，取消勾选“渲染第二个计数器”的复选框，然后重新勾选：
+只有当相同的组件被渲染在了相同的位置，React 才会一直保留着组件的 state。想要验证这一点，可以增加两个计数器的值，清空“渲染第二个计数器”复选框，然后再次勾选它：
 
 <Sandpack>
 
@@ -236,17 +237,17 @@ label {
 
 </Sandpack>
 
-注意，当停止渲染第二个计数器的那一刻，它的状态完全消失了。这是因为当 React 删除一个组件时， React 会销毁它的状态。
+注意，当你停止渲染第二个计数器的那一刻，它的 state 完全消失了。这是因为 React 在移除一个组件时，也会销毁它的 state。
 
-<img alt="React 从树中移出组件的时候，也会同时销毁它的状态" src="/images/docs/sketches/s_remove-ui.png" />
+<img alt="React 从树中移除一个组件时，也会销毁它的 state" src="/images/docs/sketches/s_remove-ui.png" />
 
-当你重新勾选“渲染第二个计数器”复选框时，另一个计数器及其状态从头开始初始化（`score = 0`）并添加到 DOM 中。
+当你重新勾选“渲染第二个计数器”复选框时，另一个计数器及其 state 将从头开始初始化（`score = 0`）并被添加到 DOM 中。
 
-<img alt="React 新增 UI 到 DOM 树时, 它会用新的状态进行初始化。" src="/images/docs/sketches/s_add-back-ui.png" />
+<img alt="在新增 UI 到 DOM 树时，React 会用新的 state 进行初始化。" src="/images/docs/sketches/s_add-back-ui.png" />
 
-**只要一个组件还被渲染在 UI 树的相同位置，React 就会保留它的状态。** 如果它被删除，或者一个不同的组件在相同的位置被渲染，React 将丢弃它的状态。
+**只要一个组件还被渲染在 UI 树的相同位置，React 就会保留它的 state。** 如果它被移除，或者一个不同的组件被渲染在相同的位置，那么 React 就会丢掉它的 state。
 
-## 同一组件在相同位置会保留状态 {/*same-component-at-the-same-position-preserves-state*/}
+## 相同位置的相同组件会使得 state 被保留下来 {/*same-component-at-the-same-position-preserves-state*/}
 
 在这个例子中，有两个不同的 `<Counter />` 标签：
 
@@ -333,18 +334,18 @@ label {
 
 </Sandpack>
 
-当你勾选或清除复选框的时候，计数器状态没有被重置。不管 `isFancy` 是 `true` 还是 `false`，根 `App` 组件返回的 `div` 的第一个子元素总是 `<Counter />`：
+当你勾选或清空复选框的时候，计数器 state 并没有被重置。不管 `isFancy` 是 `true` 还是 `false`，根组件 `App` 返回的 `div` 的第一个子组件都是 `<Counter />`：
 
 <img alt="React 只关注组件以及它在 UI 树中渲染的位置。" src="/images/docs/sketches/s_ui-swap.png" />
 
 
-位于相同位置的相同组件，所以对 React 来说，它是同一个计数器。
+它是位于相同位置的相同组件，所以对 React 来说，它是同一个计数器。
 
 <Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="尽管两个组件颜色不同，React 比较后仍然认为它们是相同的。" />
 
 <Gotcha>
 
-记住 **对 React 来说重要的是组件在 UI 树中的位置,而不是在 JSX 的位置！** 这个组件有两个 `return` 语句，它们在 `if` 内外有不同的 `<Counter />` JSX 标签：
+记住 **对 React 来说重要的是组件在 UI 树中的位置,而不是在 JSX 中的位置！** 这个组件在 `if` 内外有两个`return` 语句，它们带有不同的 `<Counter />` JSX 标签：
 
 <Sandpack>
 
@@ -442,13 +443,13 @@ label {
 
 </Sandpack>
 
-你可能认为当你勾选复选框的时候状态会被重置，但它没有！这是因为 **两个 `<Counter />` 标签被渲染在了相同的位置。** React 不知道你的函数里是如何进行条件判断的，它只关注你返回的树。在这两种条件下，`App` 组件都返回了一个包裹着 `<Counter />` 作为第一个子元素的 `div`。这就是 React 认为它们是 _同一个_ `<Counter />` 的原因。
+你可能以为当你勾选复选框的时候 state 会被重置，但它并没有！这是因为 **两个 `<Counter />` 标签被渲染在了相同的位置。** React 不知道你的函数里是如何进行条件判断的，它只会“看到”你返回的树。在这两种情况下，`App` 组件都会返回一个包裹着 `<Counter />` 作为第一个子组件的 `div`。这就是 React 认为它们是 _同一个_ `<Counter />` 的原因。
 
-你可以认为它们有相同的“地址”：根节点的第一个子节点的第一个子节点。不管你的逻辑是怎么组织的，这就是 React 在上下两次渲染间将它们匹配的方式。
+你可以认为它们有相同的“地址”：根组件的第一个子组件的第一个子组件。不管你的逻辑是怎么组织的，这就是 React 在前后两次渲染之间将它们进行匹配的方式。
 
 </Gotcha>
 
-## 相同位置的不同组件将重置状态 {/*different-components-at-the-same-position-reset-state*/}
+## 相同位置的不同组件会使 state 重置 {/*different-components-at-the-same-position-reset-state*/}
 
 在这个例子中，勾选复选框会将 `<Counter>` 替换为一个 `<p>`：
 
@@ -527,11 +528,11 @@ label {
 
 </Sandpack>
 
-示例中，你在相同位置用 _不同类型_ 的组件进行切换。初始化时， `<div>` 的第一个子元素是一个 `Counter` 。但是当你切换成一个 `p` 时，React 将 `Counter` 从 UI 树中移除并销毁了它的状态。
+示例中，你在相同位置对 _不同_ 的组件类型进行切换。刚开始 `<div>` 的第一个子组件是一个 `Counter`。但是当你切换成 `p` 时，React 将 `Counter` 从 UI 树中移除了并销毁了它的状态。
 
-<img alt="将一个组件从 UI 树中移除会销毁它的状态。" src="/images/docs/sketches/s_ui-component-swap.png" />
+<img alt="将一个组件从 UI 树中移除会销毁它的 state。" src="/images/docs/sketches/s_ui-component-swap.png" />
 
-并且，**当你在相同位置渲染了不同的组件时，组件的整个子树都会被重置** 。验证这一点，可以增加计数器的值然后勾选复选框：
+并且，**当你在相同位置渲染不同的组件时，组件的整个子树都会被重置**。要验证这一点，可以增加计数器的值然后勾选复选框：
 
 <Sandpack>
 
@@ -620,17 +621,17 @@ label {
 
 </Sandpack>
 
-当你勾选复选框后计数器的状态被重置了。即使你渲染了一个 `Counter` ， `div` 的第一个子元素从 `div` 变成了 `section` 。当子 `div` 从 DOM 中被移除的时候，它底下的整颗树（包含 `Counter` 以及它的状态）也都被销毁了。
+当你勾选复选框后计数器的 state 被重置了。虽然你渲染了一个 `Counter`，但是 `div` 的第一个子组件从 `div` 变成了 `section`。当子组件 `div` 从 DOM 中被移除的时候，它底下的整棵树（包含 `Counter` 以及它的 state）也都被销毁了。
 
-<img alt="如果第一个子元素不同了，就回不去了！" src="/images/docs/sketches/s_ui-components-swap.png" />
+<img alt="如果第一个子组件不一样了的话，就忘了它吧！" src="/images/docs/sketches/s_ui-components-swap.png" />
 
-一般来说，**如果你想在重新渲染之间保持状态，树的结构应该“匹配”** 于两次渲染之间。结构不同会导致状态的销毁，因为 React 会在组件从树中移除后销毁它的状态。
+一般来说，**如果你想在重新渲染时保留 state，几次渲染中的树形结构就应该相互“匹配”**。结构不同就会导致 state 的销毁，因为 React 会在将一个组件从树中移除时销毁它的 state。
 
 <Gotcha>
 
-以下是为什么不应将组件嵌套定义的原因。
+以下是为什么你不应该把组件函数的定义嵌套起来的原因。
 
-示例中， `MyTextField` 组件被定义在了 `MyComponent` 内：
+示例中， `MyTextField` 组件被定义在 `MyComponent` *内部*：
 
 <Sandpack>
 
@@ -665,13 +666,13 @@ export default function MyComponent() {
 </Sandpack>
 
 
-每次点击按钮后，输入框的状态都消失了！这是因为每次渲染后都创建了一个 _不同_ 的 `MyTextField` 函数。在相同位置渲染的是 _不同_ 的组件，所以 React 将它相关的状态都重置了。这样会导致 bug 以及性能问题。为了避免这个问题， **总是将组件定义在最外层并且不要嵌套定义。**
+每次你点击按钮，输入框的 state 都会消失！这是因为每次 `MyComponent` 渲染时都会创建一个 _不同_ 的 `MyTextField` 函数。你在相同位置渲染的是 _不同_ 的组件，所以 React 将其下所有的 state 都重置了。这样会导致 bug 以及性能问题。为了避免这个问题， **永远要将组件定义在最上层并且不要把它们的定义嵌套起来。**
 
 </Gotcha>
 
-## 在相同位置重置状态 {/*resetting-state-at-the-same-position*/}
+## 在相同位置重置 state {/*resetting-state-at-the-same-position*/}
 
-默认情况下，React 会保留还在相同位置的组件的状态。通常这就是我们想要的，所以它作为默认行为很合理。但有时候，你可能想要重置一个组件的状态。考虑一下这个应用，它可以让两个玩家在每个回合中记录他们的得分：
+默认情况下，React 会在一个组件保持在同一位置时保留它的 state。通常这就是你想要的，所以把它作为默认特性很合理。但有时候，你可能想要重置一个组件的 state。考虑一下这个应用，它可以让两个玩家在每个回合中记录他们的得分：
 
 <Sandpack>
 
@@ -741,21 +742,21 @@ h1 {
 
 </Sandpack>
 
-目前你切换了玩家后，分数还是没有变化。这两个 `Counter` 出现于相同位置，所以 React 认为是 _同一个_ `Counter` ，只是传了不同的 `person` prop。
+目前当你切换玩家时，分数会被保留下来。这两个 `Counter` 出现在相同的位置，所以 React 会认为它们是 _同一个_ `Counter`，只是传了不同的 `person` prop。
 
-<Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="React 比较这两个组件，虽然他们的颜色不同，但依然认为它们是相同的。" />
+<Illustration src="/images/docs/illustrations/i_react-is-blind-to-ui-swap.png" alt="虽然两个组件的颜色不同，但 React 在比较它们时依然会认为它们是相同的。" />
 
-概念上讲，这个应用的两个计数器应该是分离的。它们虽然 UI 上的位置相同，但是一个是 Taylor 的计数器，一个是 Sarah 的计数器。
+但是从概念上讲，这个应用中的两个计数器应该是各自独立的。虽然它们在 UI 中的位置相同，但是一个是 Taylor 的计数器，一个是 Sarah 的计数器。
 
-有两个方法可以让它们之间切换时重置状态：
+有两个方法可以在它们相互切换时重置 state：
 
 1. 将组件渲染在不同的位置
-2. 给每个组件一个明确的标识 `key`
+2. 使用 `key` 赋予每个组件一个明确的身份
 
 
 ### 方法一：将组件渲染在不同的位置 {/*option-1-rendering-a-component-in-different-positions*/}
 
-如果想要两个 `Counter` 是独立的，可以将他们渲染在不同的位置：
+你如果想让两个 `Counter` 各自独立的话，可以将它们渲染在不同的位置：
 
 <Sandpack>
 
@@ -826,22 +827,22 @@ h1 {
 
 </Sandpack>
 
-* 初始化时， `isPlayerA` 的值是 `true` 。所以第一个位置包含了 `Counter` 的状态，而第二个位置是空的。
-* 点击了“下一位玩家”按钮后，第一个位置被清空了但是第二个位置现在包含了一个 `Counter` 。
+* 起初 `isPlayerA` 的值是 `true`。所以第一个位置包含了 `Counter` 的 state，而第二个位置是空的。
+* 当你点击“下一位玩家”按钮时，第一个位置会被清空，而第二个位置现在包含了一个 `Counter`。
 
 <img alt=" " src="/images/docs/sketches/s_placeholder-ui.png" />
 
-> 每次 `Counter` 被从 DOM 中移除时它的状态会被销毁。这就是每次点击了按钮后它们被重置的原因。
+> 每次一个 `Counter` 被从 DOM 中移除时，它的 state 就会被销毁。这就是每次你点击按钮时它们就会被重置的原因。
 
-如果只有少数独立的组件在相同的位置渲染，这个解决方案很方便。这个例子中只有 2 个组件，所以在 JSX 里分开进行渲染并不麻烦。
+这个解决方案在你只有少数几个独立的组件渲染在相同的位置时会很方便。这个例子中只有 2 个组件，所以在 JSX 里将它们分开进行渲染并不麻烦。
 
-### 方法二：使用 key 来重置状态 {/*option-2-resetting-state-with-a-key*/}
+### 方法二：使用 key 来重置 state {/*option-2-resetting-state-with-a-key*/}
 
-还有另一种更通用的方法来重置组件的状态。
+还有另一种更通用的重置组件 state 的方法。
 
-你可能已经在 [列表渲染](/learn/rendering-lists#keeping-list-items-in-order-with-key) 章节看过了 `key` 。但 key 不只是用于列表！你可以使用 key 来让 React 区分任何组件。默认情况下，React 使用父级中的顺序（“第一个计数器”、“第二个计数器”）来区分组件。但是 key 可以告诉 React 这不仅仅是 *第一个* 或者 *第二个* 计数器，而是一个特定的计数器————例如，*Taylor* 的计数器。这样不管它出现在哪里 React 都会知道它是 *Taylor* 的计数器！
+你可能在 [渲染列表](/learn/rendering-lists#keeping-list-items-in-order-with-key) 时见到过 `key`。但 key 不只可以用于列表！你可以使用 key 来让 React 区分任何组件。默认情况下，React 使用父组件内部的顺序（“第一个计数器”、“第二个计数器”）来区分组件。但是 key 可以让你告诉 React 这不仅仅是 *第一个* 或者 *第二个* 计数器，而且还是一个特定的计数器——例如，*Taylor 的* 计数器。这样无论它出现在树的任何位置， React 都会知道它是 *Taylor 的* 计数器！
 
-在这个例子中，两个 `<Counter />` 不会共享状态，即使它们出现在 JSX 中的相同位置：
+在这个例子中，即使两个 `<Counter />` 会出现在 JSX 中的同一个位置，它们也不会共享 state：
 
 <Sandpack>
 
@@ -911,7 +912,7 @@ h1 {
 
 </Sandpack>
 
-在 Taylor 和 Sarah 之间切换不会保留状态。因为 **你给它们赋了不同的 `key`：**
+在 Taylor 和 Sarah 之间切换不会使 state 被保留下来。因为 **你给他们赋了不同的 `key`：**
 
 ```js
 {isPlayerA ? (
@@ -921,17 +922,17 @@ h1 {
 )}
 ```
 
-指定 `key` 告诉 React 使用 `key` 作为其位置信息的一部分，而不是它们在父元素中的顺序。这就是为什么尽管你用 JSX 将组件渲染在相同位置，但在 React 看来它们是两个不同的计数器。因此它们不会共享状态。每次一个计数器出现在屏幕上时，它的状态会被创建。每次它被移除了，它的状态会被销毁。在它们之间切换会一次又一次地重置它们的状态。
+指定一个 `key` 能够让 React 将 `key` 本身而非它们在父组件中的顺序作为位置的一部分。这就是为什么尽管你用 JSX 将组件渲染在相同位置，但在 React 看来它们是两个不同的计数器。因此它们永远都不会共享 state。每当一个计数器出现在屏幕上时，它的 state 会被创建出来。每当它被移除时，它的 state 就会被销毁。在它们之间切换会一次又一次地使它们的 state 重置。
 
 <Illustration src="/images/docs/illustrations/i_keys-in-trees.png" alt="React distinguishes between components with different keys, even if they are of the same type." />
 
-> 请记住 key 不是全局唯一的。它们只能在同一父元素内指定顺序。
+> 请记住 key 不是全局唯一的。它们只能指定 *父组件内部* 的顺序。
 
 ### 使用 key 重置表单 {/*resetting-a-form-with-a-key*/}
 
-使用 key 来重置状态在处理表单时特别有用。
+使用 key 来重置 state 在处理表单时特别有用。
 
-在这个聊天应用中， `<Chat>` 组件包含文本输入状态：
+在这个聊天应用中， `<Chat>` 组件包含文本输入 state：
 
 <Sandpack>
 
@@ -1026,15 +1027,15 @@ textarea {
 
 </Sandpack>
 
-尝试在输入框中输入一些内容，然后点击 “Alice” 或 “Bob” 去切换到不同的收件人。你会发现因为 `<Chat>` 被渲染在了树的相同位置，输入框的状态依然被保留了。
+尝试在输入框中输入一些内容，然后点击 “Alice” 或 “Bob” 来选择不同的收件人。你会发现因为 `<Chat>` 被渲染在了树的相同位置，输入框的 state 被保留下来了。
 
-**在很多应用里这可能就是想要的行为，但在这个聊天应用里不是的！** 你不希望用户因为一次偶然的点击而把他们已经输入的信息发送给一个错误的人。要修复这个问题，只需给组件添加一个 `key` ：
+**在很多应用里这可能会是大家所需要的特性，但在这个聊天应用里并不是！** 你不应该让用户因为一次偶然的点击而把他们已经输入的信息发送给一个错误的人。要修复这个问题，只需给组件添加一个 `key` ：
 
 ```js
 <Chat key={to.id} contact={to} />
 ```
 
-这样确保了当你选择一个不同的收件人时， `Chat` 组件以及它在树中的任何状态都将从头开始重新创建。 React 还将重新创建 DOM 元素，而不是复用它们。
+这样确保了当你选择一个不同的收件人时， `Chat` 组件——包括其下方树中的任何 state——都将从头开始重新创建。 React 还将重新创建 DOM 元素，而不是复用它们。
 
 现在切换收件人都将清除文本字段：
 
@@ -1131,23 +1132,23 @@ textarea {
 
 </Sandpack>
 
-<DeepDive title="Preserving state for removed components">
+<DeepDive title="为被移除的组件保留 state">
 
-在真正的聊天应用中，当用户再次选择前一个收件人时，你可能希望恢复输入的状态。对于不可见的组件，有几种方法可以让其状态保持“存活”：
+在真正的聊天应用中，你可能会想在用户再次选择前一个收件人时恢复输入 state。对于一个不可见的组件，有几种方法可以让它的 state “活下去”：
 
-- 你可以渲染 _所有_ 的聊天而不只是当前这一个，但是用 CSS 隐藏其他的。这些聊天不会从树中移除，所以它们的内部状态会被保留下来。这种方法对于简单 UI 非常有效。但如果隐藏的树节点很大且包含了大量的 DOM 节点，那么性能会变得很差。
-- 你可以进行 [状态提升](/learn/sharing-state-between-components) 并在父组件中保存每个收件人的草稿消息。这样即使子组件被移除了也无所谓，因为保留重要信息的是父组件。这是最常见的方法。
-- 除了 React 的状态，你也可以使用其他数据源。例如，即使用户不小心关闭页面后你也希望草稿消息持久化。要实现这一点，你可以让 `Chat` 组件从 [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 读取数据进行初始化，并把草稿保存到 localStorage 。
+- 与其只渲染现在这一个聊天，你可以把 _所有_ 聊天都渲染出来，但用 CSS 把其他聊天隐藏起来。这些聊天就不会从树中被移除了，所以它们的内部 state 会被保留下来。这种解决方法对于简单 UI 非常有效。但如果要隐藏的树形结构很大且包含了大量的 DOM 节点，那么性能就会变得很差。
+- 你可以进行 [状态提升](/learn/sharing-state-between-components) 并在父组件中保存每个收件人的草稿消息。这样即使子组件被移除了也无所谓，因为保留重要信息的是父组件。这是最常见的解决方法。
+- 除了 React 的 state，你也可以使用其他数据源。例如，也许你希望即使用户不小心关闭页面也可以保存一份信息草稿。要实现这一点，你可以让 `Chat` 组件通过读取 [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 对其 state 进行初始化，并把草稿保存在那里。
 
-无论采取哪种策略，与 Alice 的聊天在概念上都不同于与 Bob 的聊天，因此根据当前收件人为 `<Chat>` 树指定一个 `key` 是有意义的。
+无论采取哪种策略，_与 Alice_ 的聊天在概念上都不同于 _与 Bob_ 的聊天，因此根据当前收件人为 `<Chat>` 树指定一个 `key` 是合理的。
 
 </DeepDive>
 
 <Recap>
 
 - 只要在相同位置渲染的是相同组件， React 就会保留状态。
-- 状态不是保留在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。
-- 你可以通过指定一个不同的 key 让一个子树重置它的状态。
+- state 不会被保存在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。
+- 你可以通过为一个子树指定一个不同的 key 来重置它的 state。
 - 不要嵌套组件的定义，否则将意外地重置状态。
 
 </Recap>
@@ -1156,9 +1157,9 @@ textarea {
 
 <Challenges>
 
-### 修复丢失的输入文本 {/*fix-disappearing-input-text*/}
+### 修复丢失的输入框文本 {/*fix-disappearing-input-text*/}
 
-这个例子在你按了按钮后会展示一条消息，但同时也会意外地重置输入文本。为什么会发生这种情况？修复它，使按下按钮不再重置输入的文本。
+这个例子在你按下按钮时会展示一条消息，但同时也会意外地重置输入框。为什么会发生这种情况？修复它，使按下按钮不再导致输入框文本重置。
 
 <Sandpack>
 
@@ -1170,7 +1171,7 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>提示：你最喜欢哪个城市？</i></p>
+        <p><i>提示：你最喜欢的城市？</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
@@ -1207,9 +1208,9 @@ textarea { display: block; margin: 10px 0; }
 
 <Solution>
 
-`Form` 被渲染在了不同的位置是问题所在。在 `if` 分支里， `Form` 是 `<div>` 的第二个子元素，但在 `else` 分支里它是第一个子元素。所以在相同位置的组件类型发生了变化。第一个位置在保存 `p` 和 `Form` 之间变化，而第二个位置在保存 `Form` 和 `button` 之间变化。每当组件类型发生变化时， React 都会重置状态。
+问题在于 `Form` 被渲染在了不同的位置。在 `if` 分支里，`Form` 是 `<div>` 的第二个子组件，但在 `else` 分支里它是第一个子组件。所以相同位置的组件类型发生了变化。第一个位置时而包含一个 `p`，时而包含一个 `Form`；而第二个位置时而包含一个 `Form`，时而包含一个 `button`。每当组件类型发生变化时， React 都会重置 state。
 
-最简单的解决方案是统一分支的写法，这样 `Form` 总是在相同位置渲染：
+最简单的解决方案是将各个分支合并，这样 `Form` 就总会在相同位置渲染：
 
 <Sandpack>
 
@@ -1221,7 +1222,7 @@ export default function App() {
   return (
     <div>
       {showHint &&
-        <p><i>提示：你最喜欢哪个城市？</i></p>
+        <p><i>提示：你最喜欢的城市？</i></p>
       }
       <Form />
       {showHint ? (
@@ -1255,7 +1256,7 @@ textarea { display: block; margin: 10px 0; }
 </Sandpack>
 
 
-还有个技巧，你可以将 `null` 添加到 `else` 分支的 `<Form />` 前，以匹配 `if` 的分支结构：
+其实，你还可以在 `else` 分支的 `<Form />` 之前加个 `null`，以匹配 `if` 分支的结构：
 
 <Sandpack>
 
@@ -1267,7 +1268,7 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>提示：你最喜欢哪个城市？</i></p>
+        <p><i>提示：你最喜欢的城市？</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
@@ -1303,19 +1304,19 @@ textarea { display: block; margin: 10px 0; }
 
 </Sandpack>
 
-这样 `Form` 总是第二个子元素，所以它保持在相同位置并保留了它的状态。但是这种方法不那么明显，并且会引入其他人删除这个 `null` 的风险。
+这样 `Form` 就会始终是第二个子组件，所以它就会保持在相同位置并保留它的 state。但是这种方法特别不明显，并会引入一个风险因素——其他人可能会删除那个 `null`。
 
 </Solution>
 
 ### 交换两个表单字段 {/*swap-two-form-fields*/}
 
-这个表单可以让你输入姓氏和名字。它还有一个复选框控制哪个字段放在前面。勾选复选框时，“姓氏”字段将出现在“名字”字段之前。
+这个表单可以让你输入姓氏和名字。它还有一个复选框控制哪个字段放在前面。当你勾选复选框时，“姓氏”字段将出现在“名字”字段之前。
 
-它差不多可以正常工作，但有一个 bug 。如果你填写了“名字”输入框并勾选复选框，文本将保留在第一个输入(现在变成了“姓氏”)。修复它，当你反转顺序时输入文本 *也* 会跟着移动。
+它几乎可以正常使用，但有一个 bug。如果你填写了“名字”输入框并勾选复选框，文本将保留在第一个输入框(也就是现在的“姓氏”)。修复它，使得输入框文本在你调换顺序时 *也* 会跟着移动。
 
 <Hint>
 
-对于这两个字段来说，只利用它们在父节点中的位置不足以实现功能。有没有办法让 React 知道如何在重新渲染之间匹配状态？
+似乎对于这两个字段来说，只知道它们在父组件中的位置并不足以实现功能。有没有办法告诉 React 如何匹配多次重新渲染中的 state？
 
 </Hint>
 
@@ -1333,7 +1334,7 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      反转顺序
+      调换顺序
     </label>
   );
   if (reverse) {
@@ -1379,7 +1380,7 @@ label { display: block; margin: 10px 0; }
 
 <Solution>
 
-为 `if` 和 `else` 分支中的两个 `<Field>` 组件都指定一个 `key` 。这告诉 React 如何“匹配” `<Field>` 的正确状态，即使它们在父节点中的顺序发生了变化：
+为 `if` 和 `else` 分支中的两个 `<Field>` 组件都指定一个 `key`。这样可以告诉 React 如何为两个 `<Field>` “匹配”正确的状态——即使它们在父组件中的顺序会发生变化：
 
 <Sandpack>
 
@@ -1395,7 +1396,7 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      反转顺序
+      调换顺序
     </label>
   );
   if (reverse) {
@@ -1443,9 +1444,9 @@ label { display: block; margin: 10px 0; }
 
 ### 重置详情表单 {/*reset-a-detail-form*/}
 
-这是一个可编辑的联系人列表。你您可以编辑所选联系人的详细信息，然后点击“保存”进行更新或点击“重置”来撤消你的修改。
+这是一个可编辑的联系人列表。你可以编辑所选联系人的详细信息，然后点击“保存”进行更新或点击“重置”来撤消你的修改。
 
-当你选中另一个联系人（比如， Alice），状态会更新，但表单会一直显示前一个联系人的详细信息。修复它，使选定的联系人改变时，表单获得重置时。
+当你选中另一个联系人（比如 Alice），状态就会更新，但表单会一直显示之前那个联系人的详细信息。修复它，使表单在所选联系人改变时重置。
 
 <Sandpack>
 
@@ -1750,9 +1751,9 @@ button {
 
 </Solution>
 
-### 清除加载中的图片 {/*clear-an-image-while-its-loading*/}
+### 清除正在加载的图片 {/*clear-an-image-while-its-loading*/}
 
-当点击“下一张”时，浏览器开始加载下一张图片。但因为它显示在相同的 `<img>` 标签中，默认情况下在下一张图片加载完成前你都会看到上一张图片。如果文案与图片一一对应很重要，那么这可能不是我们想要的。调整它使得你点击“下一张”时上一张图片立即被清除。
+当你点击“下一张”时，浏览器会开始加载下一张图片。但因为它是在相同的 `<img>` 标签中显示的，所以默认情况下，你在下一张图片加载完成前都会看到上一张图片。如果文本必须始终与图片一一对应，那么这种特性可能并不是我们想要的。调整它使得上一张图片在你点击“下一张”时立即被清除。
 
 <Hint>
 
@@ -1784,7 +1785,7 @@ export default function Gallery() {
         下一张
       </button>
       <h3>
-        第 {index + 1} 张图片 / {images.length}
+        {images.length} 张图片中的第 {index + 1} 张
       </h3>
       <img src={image.src} />
       <p>
@@ -1826,7 +1827,7 @@ img { width: 150px; height: 150px; }
 
 <Solution>
 
-你可以为 `<img>` 提供一个 `key` 。当 `key` 更改时，React 将从头开始重新创建 `<img>` DOM 节点。这样会导致在每张图片加载时一个短暂的闪白，所以你不会希望应用里的每张图片都这样子。但是如果你想确保图片与文本始终匹配，那这么做是有意义的。
+你可以为 `<img>` 提供一个 `key`。当 `key` 更改时，React 将从头开始重新创建 `<img>` DOM 节点。这样会导致在每张图片加载时出现一个短暂的闪白，所以你不应该对你应用里的每张图片都这样做。但是如果你想确保图片与文本始终匹配，那这么做就是合理的。
 
 <Sandpack>
 
@@ -1852,7 +1853,7 @@ export default function Gallery() {
         下一张
       </button>
       <h3>
-        第 {index + 1} 张图片 / {images.length}
+        {images.length} 张图片中的第 {index + 1} 张
       </h3>
       <img key={image.src} src={image.src} />
       <p>
@@ -1894,11 +1895,11 @@ img { width: 150px; height: 150px; }
 
 </Solution>
 
-### 修复列表中错位的状态 {/*fix-misplaced-state-in-the-list*/}
+### 修复列表中错位的 state {/*fix-misplaced-state-in-the-list*/}
 
-在这个列表中每个 `Contact` 都有个状态表示是否按下了“显示邮箱”。点击 Alice 的“显示邮箱”按钮，然后勾选“以相反的顺序显示”复选框。你会注意到现在展开的是 _Taylor_ 的邮箱，而已经被移到底部的 Alice 的邮箱已经被收起了。
+在这个列表中每个 `Contact` 都有个 state 表示它的“显示邮箱”按钮是否已经按过了。点击 Alice 的“显示邮箱”按钮，然后勾选“以相反的顺序显示”复选框。你会注意到现在展开的是 _Taylor 的_ 邮箱，而 Alice 的邮箱已经被移到底部并被收起了。
 
-修复它使得不管选中的顺序如何，表示展开的状态都与各个联系人相关联。
+修复它，使得不管选中的顺序如何，`expanded` state 都与各个联系人相关联。
 
 <Sandpack>
 
@@ -1988,16 +1989,16 @@ button {
 
 <Solution>
 
-这个例子的问题是使用了 index 作为 `key`：
+问题在于这个例子使用了 index 作为 `key`：
 
 ```js
 {displayedContacts.map((contact, i) =>
   <li key={i}>
 ```
 
-然而我们希望状态与 _每个特定的联系人_ 相关联。
+然而你应该让 state 与 _每个特定的联系人_ 相关联。
 
-使用联系人的 ID 作为 `key` 来修复这个问题：
+使用联系人的 ID 作为 `key` 就会修复这个问题：
 
 <Sandpack>
 
@@ -2085,7 +2086,7 @@ button {
 
 </Sandpack>
 
-状态与树的位置相关联。 `key` 允许你指定一个具名的位置，而不再依赖于顺序。
+state 与树中的位置相关联。 `key` 让你可以指定一个特定的位置，而不依赖于顺序。
 
 </Solution>
 

From 7272e42b9d54c0f27d47068d3355c5ee3ae7e217 Mon Sep 17 00:00:00 2001
From: Yoga Lin <lsyoga@foxmail.com>
Date: Mon, 27 Dec 2021 16:45:34 +0800
Subject: [PATCH 5/9] docs(cn): apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hao Jiang ᛋ <22409868+Neo42@users.noreply.github.com>
---
 beta/src/pages/learn/preserving-and-resetting-state.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index dc1e5b004c..8570894583 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -924,7 +924,7 @@ h1 {
 
 指定一个 `key` 能够让 React 将 `key` 本身而非它们在父组件中的顺序作为位置的一部分。这就是为什么尽管你用 JSX 将组件渲染在相同位置，但在 React 看来它们是两个不同的计数器。因此它们永远都不会共享 state。每当一个计数器出现在屏幕上时，它的 state 会被创建出来。每当它被移除时，它的 state 就会被销毁。在它们之间切换会一次又一次地使它们的 state 重置。
 
-<Illustration src="/images/docs/illustrations/i_keys-in-trees.png" alt="React distinguishes between components with different keys, even if they are of the same type." />
+<Illustration src="/images/docs/illustrations/i_keys-in-trees.png" alt="React 会区分 key 不同的组件，即使组件属于同一类型。" />
 
 > 请记住 key 不是全局唯一的。它们只能指定 *父组件内部* 的顺序。
 
@@ -1149,7 +1149,8 @@ textarea {
 - 只要在相同位置渲染的是相同组件， React 就会保留状态。
 - state 不会被保存在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。
 - 你可以通过为一个子树指定一个不同的 key 来重置它的 state。
-- 不要嵌套组件的定义，否则将意外地重置状态。
+- 不要嵌套组件的定义，否则你会意外地导致 state 被重置。
+
 
 </Recap>
 
@@ -1757,7 +1758,7 @@ button {
 
 <Hint>
 
-有没有办法让 React 重新创建而不是复用 DOM ？
+有没有办法让 React 重新创建 DOM 而不是复用它？
 
 </Hint>
 

From 9d851aadc92ecfeb304406898c2c6a7e53998d20 Mon Sep 17 00:00:00 2001
From: Yoga Lin <lsyoga@foxmail.com>
Date: Mon, 3 Jan 2022 10:42:31 +0800
Subject: [PATCH 6/9] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hao Jiang ᛋ <22409868+Neo42@users.noreply.github.com>
---
 beta/src/pages/learn/preserving-and-resetting-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index 8570894583..d4628399b6 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -1037,7 +1037,7 @@ textarea {
 
 这样确保了当你选择一个不同的收件人时， `Chat` 组件——包括其下方树中的任何 state——都将从头开始重新创建。 React 还将重新创建 DOM 元素，而不是复用它们。
 
-现在切换收件人都将清除文本字段：
+现在切换收件人就总会清除文本字段了：
 
 <Sandpack>
 

From 1e9e95cf372ebd106eabe723c28b6333d31badc2 Mon Sep 17 00:00:00 2001
From: Yoga Lin <lsyoga@foxmail.com>
Date: Mon, 3 Jan 2022 10:45:47 +0800
Subject: [PATCH 7/9] docs(cn): Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/preserving-and-resetting-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index d4628399b6..9819aad91c 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -13,7 +13,7 @@ translators:
 
 <YouWillLearn>
 
-* React 怎样“看待”组件结构
+* React 如何“处理”组件结构
 * React 何时选择保留或重置 state
 * 如何强制 React 重置组件的 state
 * key 和组件类型如何影响 state 是否被保留

From ad099fb64f84c5f98853f311309b7a0e537fc1c2 Mon Sep 17 00:00:00 2001
From: Yoga Lin <lsyoga@foxmail.com>
Date: Tue, 4 Jan 2022 17:14:57 +0800
Subject: [PATCH 8/9] docs(cn): Update
 beta/src/pages/learn/preserving-and-resetting-state.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hao Jiang ᛋ <22409868+Neo42@users.noreply.github.com>
---
 beta/src/pages/learn/preserving-and-resetting-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index 9819aad91c..c0afcd9319 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -2,7 +2,7 @@
 title: 对 state 进行保留和重置
 translators:
   - Neo42
-  - YogaLin
+  - Neo42
 ---
 
 <Intro>

From 34f7ba5fc13b46075ccb7a104d0dae6d8a9fd534 Mon Sep 17 00:00:00 2001
From: Yoga Lin <lsyoga@foxmail.com>
Date: Tue, 4 Jan 2022 17:17:18 +0800
Subject: [PATCH 9/9] docs(cn): Update
 beta/src/pages/learn/preserving-and-resetting-state.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hao Jiang ᛋ <22409868+Neo42@users.noreply.github.com>
---
 beta/src/pages/learn/preserving-and-resetting-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index c0afcd9319..ba09700e13 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -1,7 +1,7 @@
 ---
 title: 对 state 进行保留和重置
 translators:
-  - Neo42
+  - YogaLin
   - Neo42
 ---