From a1784f71cbf6a9d982cf7bdb78726912984e6a73 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 03:03:00 +0000 Subject: [PATCH 1/9] docs(cn): translate learn/understanding-your-ui-as-a-tree into Chinese --- .../learn/understanding-your-ui-as-a-tree.md | 110 +++++++++--------- 1 file changed, 57 insertions(+), 53 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 948f857901..bfb48aee57 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -1,41 +1,41 @@ --- -title: Understanding your UI as a Tree +title: 将 UI 视为树 --- -Your React app is taking shape with many components being nested within each other. How does React keep track of your app's component structure? +当 React 应用程序逐渐成形时，许多组件嵌套在彼此之内。那么 React 是如何跟踪应用程序组件结构的？ -React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components to debug future concepts like performance and state management. +React 以及许多其他 UI 库，将 UI 建模为树。将应用程序视为树对于理解组件之间的关系以及调试性能和状态管理等未来概念非常有用。 -* How React "sees" component structures -* What a render tree is and what it is useful for -* What a module dependency tree is and what it is useful for +* React 如何看待组件结构 +* 渲染树是什么以及它有什么用处 +* 模块依赖树是什么以及它有什么用处 -## Your UI as a tree {/*your-ui-as-a-tree*/} +## 将 UI 视为树 {/*your-ui-as-a-tree*/} -Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. +树是项目和 UI 之间的关系模型，通常使用树结构来表示 UI。例如，浏览器使用树结构来建模 HTML（[DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)）与CSS（[CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)）。移动平台也使用树来表示其视图层次结构。 - + -React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM. +React 从组件中创建 UI 树。在这个示例中，UI 树最后会用于渲染 DOM。 -Like browsers and mobile platforms, React also uses tree structures to manage and model the relationship between components in a React app. These trees are useful tools to understand how data flows through a React app and how to optimize rendering and app size. +与浏览器和移动平台一样，React 还使用树结构来管理和建模 React 应用程序中组件之间的关系。这些树是有用的工具，用于理解数据如何在 React 应用程序中流动以及如何优化呈现和应用程序大小。 -## The Render Tree {/*the-render-tree*/} +## 渲染树 {/*the-render-tree*/} -A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component. +组件的一个主要特性是能够由其他组件组合而成。在 [嵌套组件](/learn/your-first-component#nesting-and-organizing-components) 中有父组件和子组件的概念，其中每个父组件本身可能是另一个组件的子组件。 -When we render a React app, we can model this relationship in a tree, known as the render tree. +当渲染 React 应用程序时，可以在一个称为渲染树的树中建模这种关系。 -Here is a React app that renders inspirational quotes. +下面是一个渲染鼓舞人心的引用语的 React 应用程序。 @@ -118,33 +118,33 @@ export default [ - + -React creates a UI tree made of components rendered, known as a render tree. +React 创建了一个由渲染的组件构成的 UI 树，被称为渲染树。 -From the example app, we can construct the above render tree. +通过示例应用程序，可以构建上面的渲染树。 -The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree. +这棵树由节点组成，每个节点代表一个组件。例如，`App`、`FancyText`、`Copyright` 等都是我们树中的节点。 -The root node in a React render tree is the [root component](/learn/importing-and-exporting-components#the-root-component-file) of the app. In this case, the root component is `App` and it is the first component React renders. Each arrow in the tree points from a parent component to a child component. +在 React 渲染树中，根节点是应用程序的 [根组件](/learn/importing-and-exporting-components#the-root-component-file)。在这种情况下，根组件是 `App`，它是 React 渲染的第一个组件。树中的每个箭头从父组件指向子组件。 -#### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/} +#### 那么渲染树中的 HTML 标签在哪里呢？ {/*where-are-the-html-elements-in-the-render-tree*/} -You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks). +也许会注意到在上面的渲染树中，没有提到每个组件渲染的 HTML 标签。这是因为渲染树仅由 React [组件](learn/your-first-component#components-ui-building-blocks) 组成。 -React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). +React 是跨平台的 UI 框架。react.dev 展示了一些渲染到使用 HTML 标签作为 UI 原语的 web 的示例。但是 React 应用程序同样可以渲染到移动设备或桌面平台，这些平台可能使用不同的 UI 原语，如 [UIView](https://developer.apple.com/documentation/uikit/uiview) 或 [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0)。 -These platform UI primitives are not a part of React. React render trees can provide insight to our React app regardless of what platform your app renders to. +这些平台 UI 原语不是 React 的一部分。无论应用程序渲染到哪个平台，React 渲染树都可以为 React 应用程序提供见解。 -A render tree represents a single render pass of a React application. With [conditional rendering](/learn/conditional-rendering), a parent component may render different children depending on the data passed. +渲染树表示 React 应用程序的单个渲染过程。在 [条件渲染](/learn/conditional-rendering) 中，父组件可以根据传递的数据渲染不同的子组件。 -We can update the app to conditionally render either an inspirational quote or color. +我们可以更新应用程序以有条件地渲染励志语录或颜色。 @@ -244,56 +244,60 @@ export default [ ``` - + -With conditional rendering, across different renders, the render tree may render different components. +在条件渲染中，不同的渲染过程中，渲染树可能会渲染不同的组件。 -In this example, depending on what `inspiration.type` is, we may render `` or ``. The render tree may be different for each render pass. +在这个示例中，根据 `inspiration.type` 的值可能会渲染 `` 或 ``。每次渲染过程的渲染树可能都不同。 -Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. +尽管渲染树可能在不同的渲染过程中有所不同，但通常这些树有助于识别 React 应用程序中的顶级和叶子组件。顶级组件是离根组件最近的组件，它们影响其下所有组件的渲染性能，通常包含最多复杂性。叶子组件位于树的底部，没有子组件，通常会频繁重新渲染。 -Identifying these categories of components are useful for understanding data flow and performance of your app. +识别这些组件类别有助于理解应用程序的数据流和性能。 -## The Module Dependency Tree {/*the-module-dependency-tree*/} +## 模块依赖树 {/*the-module-dependency-tree*/} -Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants. +在 React 应用程序中，可以使用树来建模的另一个关系是应用程序的模块依赖关系。当 [拆分组件](/learn/importing-and-exporting-components#exporting-and-importing-a-component) 和逻辑到不同的文件中时，就创建了 [JavaScript 模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)，在这些模块中可以导出组件、函数或常量。 -Each node in a module dependency tree is a module and each branch represents an `import` statement in that module. +模块依赖树中的每个节点都是一个模块，每个分支代表该模块中的 `import` 语句。 -If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short. +以之前的 Inspirations 应用程序为例，可以构建一个模块依赖树，简称依赖树。 - + -The module dependency tree for the Inspirations app. +Inspirations 应用程序的模块依赖树。 -The root node of the tree is the root module, also known as the entrypoint file. It often is the module that contains the root component. +树的根节点是根模块，也称为入口文件。它通常包含根组件的模块。 -Comparing to the render tree of the same app, there are similar structures but some notable differences: + + +树的根节点是根模块，也称为入口文件。通常，它是包含根组件的模块。 + +与同一应用程序的渲染树相比，存在相似的结构，但也有一些显著的差异： -* The nodes that make-up the tree represent modules, not components. -* Non-component modules, like `inspirations.js`, are also represented in this tree. The render tree only encapsulates components. -* `Copyright.js` appears under `App.js` but in the render tree, `Copyright`, the component, appears as a child of `InspirationGenerator`. This is because `InspirationGenerator` accepts JSX as [children props](/learn/passing-props-to-a-component#passing-jsx-as-children), so it renders `Copyright` as a child component but does not import the module. +* 构成树的节点代表模块，而不是组件。 +* 非组件模块，如 `inspirations.js`，在这个树中也有所体现。渲染树仅封装组件。 +* `Copyright.js` 出现在 `App.js` 下，但在渲染树中，`Copyright` 作为 `InspirationGenerator` 的子组件出现。这是因为 `InspirationGenerator` 接受 JSX 作为 [children props](/learn/passing-props-to-a-component#passing-jsx-as-children)，因此它将 `Copyright` 作为子组件渲染，但不导入该模块。 -Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a [bundler](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), and bundlers will use the dependency tree to determine what modules should be included. +依赖树对于确定运行 React 应用程序所需的模块非常有用。在为生产环境构建 React 应用程序时，通常会有一个构建步骤，该步骤将捆绑所有必要的 JavaScript 以供客户端使用。负责此操作的工具称为 [bundler（捆绑器）](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem)，并且 bundler 将使用依赖树来确定应包含哪些模块。 -As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run and delays the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues. +随着应用程序的增长，捆绑包大小通常也会增加。大型捆绑包大小对于客户端来说下载和运行成本高昂，并延迟 UI 绘制的时间。了解应用程序的依赖树可能有助于调试这些问题。 -[comment]: <> (perhaps we should also deep dive on conditional imports) +[comment]: <> (也许应该深入介绍条件导入) -* Trees are a common way to represent the relationship between entities. They are often used to model UI. -* Render trees represent the nested relationship between React components across a single render. -* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components. -* Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance. -* Dependency trees represent the module dependencies in a React app. -* Dependency trees are used by build tools to bundle the necessary code to ship an app. -* Dependency trees are useful for debugging large bundle sizes that slow time to paint and expose opportunities for optimizing what code is bundled. +* 树是表示实体之间关系的常见方式，它们经常用于建模 UI。 +* 渲染树表示单次渲染中 React 组件之间的嵌套关系。 +* 使用条件渲染，渲染树可能会在不同的渲染过程中发生变化。使用不同的属性值，组件可能会渲染不同的子组件。 +* 渲染树有助于识别顶级组件和叶子组件。顶级组件会影响其下所有组件的渲染性能，而叶子组件通常会频繁重新渲染。识别它们有助于理解和调试渲染性能问题。 +* 依赖树表示 React 应用程序中的模块依赖关系。 +* 构建工具使用依赖树来捆绑必要的代码以部署应用程序。 +* 依赖树有助于调试大型捆绑包大小，缓慢的渲染速度，以及优化哪些代码应该捆绑的机会。 -[TODO]: <> (Add challenges) \ No newline at end of file +[TODO]: <> (添加 challenge) \ No newline at end of file From 8676cb0dd1426e2a6ef856023105473d1c1e7502 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 11:10:38 +0800 Subject: [PATCH 2/9] docs(cn): review and update --- src/content/learn/understanding-your-ui-as-a-tree.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index bfb48aee57..b0756c84d7 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -272,10 +272,6 @@ Inspirations 应用程序的模块依赖树。 树的根节点是根模块，也称为入口文件。它通常包含根组件的模块。 - - -树的根节点是根模块，也称为入口文件。通常，它是包含根组件的模块。 - 与同一应用程序的渲染树相比，存在相似的结构，但也有一些显著的差异： * 构成树的节点代表模块，而不是组件。 @@ -300,4 +296,4 @@ Inspirations 应用程序的模块依赖树。 -[TODO]: <> (添加 challenge) \ No newline at end of file +[TODO]: <> (添加 challenge) From 2750fc31a83d2bd167edad2706421a01747aa978 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 15:45:23 +0800 Subject: [PATCH 3/9] Update src/content/learn/understanding-your-ui-as-a-tree.md Co-authored-by: Xavi Lee --- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index b0756c84d7..cd4e691030 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -4,7 +4,7 @@ title: 将 UI 视为树 -当 React 应用程序逐渐成形时，许多组件嵌套在彼此之内。那么 React 是如何跟踪应用程序组件结构的？ +当 React 应用程序逐渐成形时，许多组件会出现嵌套。那么 React 是如何跟踪应用程序组件结构的？ React 以及许多其他 UI 库，将 UI 建模为树。将应用程序视为树对于理解组件之间的关系以及调试性能和状态管理等未来概念非常有用。 From 417aa4ba1bc164d4e34e9dff40baad96b776aea6 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 15:45:30 +0800 Subject: [PATCH 4/9] Update src/content/learn/understanding-your-ui-as-a-tree.md Co-authored-by: Xavi Lee --- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index cd4e691030..b9e28495e1 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -6,7 +6,7 @@ title: 将 UI 视为树 当 React 应用程序逐渐成形时，许多组件会出现嵌套。那么 React 是如何跟踪应用程序组件结构的？ -React 以及许多其他 UI 库，将 UI 建模为树。将应用程序视为树对于理解组件之间的关系以及调试性能和状态管理等未来概念非常有用。 +React 以及许多其他 UI 库，将 UI 建模为树。将应用程序视为树对于理解组件之间的关系以及调试性能和状态管理等未来将会遇到的一些概念非常有用。 From 9f930be4c78d77d8befa2ba50edd5db39a62f41d Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 15:45:36 +0800 Subject: [PATCH 5/9] Update src/content/learn/understanding-your-ui-as-a-tree.md Co-authored-by: Xavi Lee --- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index b9e28495e1..ffa87063c2 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -35,7 +35,7 @@ React 从组件中创建 UI 树。在这个示例中，UI 树最后会用于渲 当渲染 React 应用程序时，可以在一个称为渲染树的树中建模这种关系。 -下面是一个渲染鼓舞人心的引用语的 React 应用程序。 +下面的 React 应用程序渲染了一些鼓舞人心的引语。 From 32350c5a2d81c11fb5bf1027db1d30515695af3e Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 15:45:42 +0800 Subject: [PATCH 6/9] Update src/content/learn/understanding-your-ui-as-a-tree.md Co-authored-by: Xavi Lee --- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index ffa87063c2..f94b455fe1 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -120,7 +120,7 @@ export default [ -React 创建了一个由渲染的组件构成的 UI 树，被称为渲染树。 +React 创建的 UI 树是由渲染过的组件构成的，被称为渲染树。 From f99c229b6ee0fb84283a80436919ee3d0cefc971 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 15:45:48 +0800 Subject: [PATCH 7/9] Update src/content/learn/understanding-your-ui-as-a-tree.md Co-authored-by: Xavi Lee --- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index f94b455fe1..36df7939a3 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -296,4 +296,4 @@ Inspirations 应用程序的模块依赖树。 -[TODO]: <> (添加 challenge) +[TODO]: <> (Add challenges) From 5bd3bdbde38941d71ba7e9e9c65ef5095f832168 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 24 Oct 2023 09:05:28 +0800 Subject: [PATCH 8/9] Update src/content/learn/understanding-your-ui-as-a-tree.md Co-authored-by: Xleine --- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index cffcbef5b0..c84ffdd849 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -246,7 +246,7 @@ export default [ -在条件渲染中，不同的渲染过程中，渲染树可能会渲染不同的组件。 +在条件渲染的不同渲染过程中，渲染树可能会渲染不同的组件。 From a8fed0001b61cb2f77ead7dd7efb66740d412fe4 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 24 Oct 2023 09:05:41 +0800 Subject: [PATCH 9/9] Update src/content/learn/understanding-your-ui-as-a-tree.md Co-authored-by: Xleine --- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index c84ffdd849..484f3156df 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -292,7 +292,7 @@ Inspirations 应用程序的模块依赖树。 * 渲染树有助于识别顶级组件和叶子组件。顶级组件会影响其下所有组件的渲染性能，而叶子组件通常会频繁重新渲染。识别它们有助于理解和调试渲染性能问题。 * 依赖树表示 React 应用程序中的模块依赖关系。 * 构建工具使用依赖树来捆绑必要的代码以部署应用程序。 -* 依赖树有助于调试大型捆绑包大小，缓慢的渲染速度，以及优化哪些代码应该捆绑的机会。 +* 依赖树有助于调试大型捆绑包带来的渲染速度过慢的问题，以及发现哪些捆绑代码可以被优化。