docs(en): merging all conflicts

reactjs · Oct 19, 2023 · 57e90b5 · 57e90b5
2 parents ab1c455 + 9af01e2
commit 57e90b5
Show file tree

Hide file tree

Showing 14 changed files with 359 additions and 0 deletions.
diff --git a/public/images/docs/diagrams/conditional_render_tree.dark.png b/public/images/docs/diagrams/conditional_render_tree.dark.png
diff --git a/public/images/docs/diagrams/conditional_render_tree.png b/public/images/docs/diagrams/conditional_render_tree.png
diff --git a/public/images/docs/diagrams/generic_dependency_tree.dark.png b/public/images/docs/diagrams/generic_dependency_tree.dark.png
diff --git a/public/images/docs/diagrams/generic_dependency_tree.png b/public/images/docs/diagrams/generic_dependency_tree.png
diff --git a/public/images/docs/diagrams/generic_render_tree.dark.png b/public/images/docs/diagrams/generic_render_tree.dark.png
diff --git a/public/images/docs/diagrams/generic_render_tree.png b/public/images/docs/diagrams/generic_render_tree.png
diff --git a/public/images/docs/diagrams/module_dependency_tree.dark.png b/public/images/docs/diagrams/module_dependency_tree.dark.png
diff --git a/public/images/docs/diagrams/module_dependency_tree.png b/public/images/docs/diagrams/module_dependency_tree.png
diff --git a/public/images/docs/diagrams/render_tree.dark.png b/public/images/docs/diagrams/render_tree.dark.png
diff --git a/public/images/docs/diagrams/render_tree.png b/public/images/docs/diagrams/render_tree.png
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
@@ -15,6 +15,7 @@ React 是一个用于构建用户界面（UI）的 JavaScript 库，用户界面
 
 <YouWillLearn isChapter={true}>
 
+<<<<<<< HEAD
 * [如何创建你的第一个组件](/learn/your-first-component)
 * [在什么时候以及如何创建多文件组件](/learn/importing-and-exporting-components)
 * [如何使用 JSX 为 JavaScript 添加标签](/learn/writing-markup-with-jsx)
@@ -23,6 +24,17 @@ React 是一个用于构建用户界面（UI）的 JavaScript 库，用户界面
 * [如何有条件地渲染组件](/learn/conditional-rendering)
 * [如何在同一时间渲染多个组件](/learn/rendering-lists)
 * [如何通过保持组件的纯粹性来避免令人困惑的错误](/learn/keeping-components-pure)
+=======
+* [How to write your first React component](/learn/your-first-component)
+* [When and how to create multi-component files](/learn/importing-and-exporting-components)
+* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
+* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
+* [How to configure components with props](/learn/passing-props-to-a-component)
+* [How to conditionally render components](/learn/conditional-rendering)
+* [How to render multiple components at a time](/learn/rendering-lists)
+* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
+* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
+>>>>>>> 9af01e2bb2c6517c3ca14b551cdfa42424370a6e
 
 </YouWillLearn>
 
@@ -526,7 +538,34 @@ export default function TeaSet() {
 
 </LearnMore>
 
+<<<<<<< HEAD
 ## 下节预告 {/*whats-next*/}
+=======
+## Your UI as a tree {/*your-ui-as-a-tree*/}
+
+React uses trees to model the relationships between components and modules. 
+
+A React render tree is a representation of the parent and child relationship between components. 
+
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">An example React render tree.</Diagram>
+
+Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+
+Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">An example module dependency tree.</Diagram>
+
+A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+
+<LearnMore path="/learn/understanding-your-ui-as-a-tree">
+
+Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+
+</LearnMore>
+
+
+## What's next? {/*whats-next*/}
+>>>>>>> 9af01e2bb2c6517c3ca14b551cdfa42424370a6e
 
 请访问 [你的第一个组件](/learn/your-first-component) 这个章节并开始阅读！
 

diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
@@ -14,6 +14,7 @@ translators:
 
 <YouWillLearn>
 
+<<<<<<< HEAD
 * React 如何“处理”组件结构
 * React 何时选择保留或重置 state
 * 如何强制 React 重置组件的 state
@@ -40,7 +41,19 @@ React 会根据组件创建了一棵 UI 树，React DOM 用它来渲染 DOM
 ## 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
 
+</YouWillLearn>
+
+## 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 标签，但将它渲染在了两个不同的位置：
 
@@ -194,7 +207,11 @@ 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
 
 <Sandpack>