Skip to content

Commit

Permalink
fix: resolve conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
Yucohny authored Oct 20, 2023
1 parent 235ba5b commit cac4e07
Showing 1 changed file with 2 additions and 35 deletions.
37 changes: 2 additions & 35 deletions src/content/learn/preserving-and-resetting-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,6 @@ translators:

<YouWillLearn>

<<<<<<< HEAD
* React 如何“处理”组件结构
* 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)

React 也使用树形结构来对你创造的 UI 进行管理和建模。React 根据你的 JSX 生成 **UI 树**。React DOM 根据 UI 树去更新浏览器的 DOM 元素。(React Native 则将这些 UI 树转译成移动平台上特有的元素。)

<DiagramGroup>

<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">

React 会根据组件创建了一棵 UI 树,React DOM 用它来渲染 DOM

</Diagram>

</DiagramGroup>

## state 与树中的某个位置相关联 {/*state-is-tied-to-a-position-in-the-tree*/}

当你为一个组件添加 state 时,你可能会觉得 state “活”在组件内部。但实际上,state 被保存在 React 内部。根据组件在 UI 树中的位置,React 将它所持有的每个 state 与正确的组件关联起来。
=======
* 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
Expand All @@ -51,11 +23,10 @@ React 会根据组件创建了一棵 UI 树,React DOM 用它来渲染 DOM
## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}

React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
>>>>>>> 9af01e2bb2c6517c3ca14b551cdfa42424370a6e

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 render tree.

下面只定义了一个 `<Counter />` JSX 标签,但将它渲染在了两个不同的位置:
Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:

<Sandpack>

Expand Down Expand Up @@ -207,11 +178,7 @@ Updating state
</DiagramGroup>


<<<<<<< HEAD
只有当你在相同的位置渲染相同的组件时,React 才会一直保留着组件的 state。想要验证这一点,可以将两个计数器的值递增,取消勾选 “渲染第二个计数器” 复选框,然后再次勾选它:
=======
React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
>>>>>>> 9af01e2bb2c6517c3ca14b551cdfa42424370a6e
只有当在树中相同的位置渲染相同的组件时,React 才会一直保留着组件的 state。想要验证这一点,可以将两个计数器的值递增,取消勾选 “渲染第二个计数器” 复选框,然后再次勾选它:

<Sandpack>

Expand Down

0 comments on commit cac4e07

Please sign in to comment.