Skip to content

Commit

Permalink
fix conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
awxiaoxian2020 committed Oct 25, 2023
1 parent 4b583ee commit a056817
Show file tree
Hide file tree
Showing 4 changed files with 5 additions and 25 deletions.
16 changes: 4 additions & 12 deletions src/content/learn/describing-the-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -533,29 +533,21 @@ React 使用树形关系建模以展示组件和模块之间的关系。

React 渲染树是组件之间父子关系的表示。

<<<<<<< HEAD
<Diagram name="generic_render_tree" height={250} width={500} alt="一个树状图,有五个节点,每个节点代表一个组件。树状图的顶部有一个名为 Root Component 的根节点,它有两个向下延伸的箭头,分别标有 renders。两个箭头指向标有 Component A 和 Component C 的节点。Component A 有一条 renders 箭头指向标有 Component B 的节点。Component C 有一条 renders 箭头指向标有 Component D 的节点。">示例的 React 渲染树</Diagram>
=======
<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'.">
<Diagram name="generic_render_tree" height={250} width={500} alt="一个树状图,有五个节点,每个节点代表一个组件。树状图的顶部有一个名为 Root Component 的根节点,它有两个向下延伸的箭头,分别标有 renders。两个箭头指向标有 Component A 和 Component C 的节点。Component A 有一条 renders 箭头指向标有 Component B 的节点。Component C 有一条 renders 箭头指向标有 Component D 的节点。">

An example React render tree.
示例的 React 渲染树

</Diagram>
>>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3

位于树顶部、靠近根组件的组件被视为顶层组件。没有子组件的组件被称为叶子组件。对组件的这种分类对于理解数据流和渲染性能非常有用。

对 JavaScript 模块之间的关系进行建模是了解应用程序的另一种有用方式。我们将其称为模块依赖树。

<<<<<<< HEAD
<Diagram name="generic_dependency_tree" height={250} width={500} alt="一个树状图,有五个节点。每个节点代表一个 JavaScript 模块。最顶部的节点标有 RootModule.js。它有三条箭头指向节点:ModuleA.js、ModuleB.js 和 ModuleC.js。每个箭头标有 imports。ModuleC.js 节点有一条 imports 箭头指向标有 ModuleD.js的节点。">示例的模块依赖树</Diagram>
=======
<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'.">
<Diagram name="generic_dependency_tree" height={250} width={500} alt="一个树状图,有五个节点。每个节点代表一个 JavaScript 模块。最顶部的节点标有 RootModule.js。它有三条箭头指向节点:ModuleA.js、ModuleB.js 和 ModuleC.js。每个箭头标有 imports。ModuleC.js 节点有一条 imports 箭头指向标有 ModuleD.js的节点。">

An example module dependency tree.
示例的模块依赖树

</Diagram>
>>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3

构建工具经常使用依赖树来捆绑客户端下载和渲染所需的所有 JavaScript 代码。对于 React 应用程序,打包大小会导致用户体验退化。了解模块依赖树有助于调试此类问题。

Expand Down
4 changes: 0 additions & 4 deletions src/content/learn/understanding-your-ui-as-a-tree.md
Original file line number Diff line number Diff line change
Expand Up @@ -252,11 +252,7 @@ export default [

在这个示例中,根据 `inspiration.type` 的值可能会渲染 `<FancyText>``<Color>`。每次渲染过程的渲染树可能都不同。

<<<<<<< HEAD
尽管渲染树可能在不同的渲染过程中有所不同,但通常这些树有助于识别 React 应用程序中的顶级和叶子组件。顶级组件是离根组件最近的组件,它们影响其下所有组件的渲染性能,通常包含最多复杂性。叶子组件位于树的底部,没有子组件,通常会频繁重新渲染。
=======
Although render trees may differ across render passes, 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.
>>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3

识别这些组件类别有助于理解应用程序的数据流和性能。

Expand Down
6 changes: 1 addition & 5 deletions src/content/reference/react/experimental_taintUniqueValue.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,8 @@ experimental_taintUniqueValue(

#### 注意 {/*caveats*/}

<<<<<<< HEAD
- 从受标记的值派生新值可能会破坏标记保护。通过将受标记的值大写、将受标记的字符串值连接成较大的字符串、将受标记的值转换为 base64、对受标记的值进行子字符串操作以及其他类似的转换来创建的新值,除非明确调用 `taintUniqueValue` 标记这些新创建的值,否则它们不会受到标记。
=======
* Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values.
* 从受标记的值派生新值可能会破坏标记保护。通过将受标记的值大写、将受标记的字符串值连接成较大的字符串、将受标记的值转换为 base64、对受标记的值进行子字符串操作以及其他类似的转换来创建的新值,除非明确调用 `taintUniqueValue` 标记这些新创建的值,否则它们不会受到标记。
* Do not use `taintUniqueValue` to protect low-entropy values such as PIN codes or phone numbers. If any value in a request is controlled by an attacker, they could infer which value is tainted by enumerating all possible values of the secret.
>>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3

---

Expand Down
4 changes: 0 additions & 4 deletions src/content/reference/react/useTransition.md
Original file line number Diff line number Diff line change
Expand Up @@ -1502,9 +1502,6 @@ main {
---
<<<<<<< HEAD
## 疑难解答 {/*troubleshooting*/}
=======
### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
<Canary>
Expand Down Expand Up @@ -1600,7 +1597,6 @@ root.render(
---
## Troubleshooting {/*troubleshooting*/}
>>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3
### 在 transition 中无法更新输入框内容 {/*updating-an-input-in-a-transition-doesnt-work*/}
Expand Down

0 comments on commit a056817

Please sign in to comment.