You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: beta/src/pages/learn/render-and-commit.md
+56-53
Original file line number
Diff line number
Diff line change
@@ -1,44 +1,46 @@
1
1
---
2
-
title: Render and Commit
2
+
title: 渲染和提交
3
+
translators:
4
+
- oceanlvr
3
5
---
4
6
5
7
<Intro>
6
8
7
-
Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
*The steps involved in displaying a component on screen
16
-
*Why rendering does not always produce a DOM update
15
+
*在 React 中渲染的含义是什么
16
+
*为什么以及什么时候 React 会渲染一个组件
17
+
*在屏幕上显示组件所涉及的步骤
18
+
*为什么渲染不总是伴随着 DOM 更新
17
19
18
20
</YouWillLearn>
19
21
20
-
Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
1.**Triggering**a render (delivering the guest's order to the kitchen)
23
-
2.**Rendering**the component (getting the order from the kitchen)
24
-
3.**Committing**to the DOM (placing the order on the table)
24
+
1.渲染 **触发中**(传递客户的订单到厨房)
25
+
2.组件 **渲染中**(从厨房取得完成的订单)
26
+
3.修改 **提交中**(将订单放在桌子上)
25
27
26
28
<IllustrationBlocksequential>
27
-
<Illustrationcaption="Trigger"alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen."src="/images/docs/illustrations/i_render-and-commit1.png" />
28
-
<Illustrationcaption="Render"alt="The Card Chef gives React a fresh Card component."src="/images/docs/illustrations/i_render-and-commit2.png" />
29
-
<Illustrationcaption="Commit"alt="React delivers the Card to the user at their table."src="/images/docs/illustrations/i_render-and-commit3.png" />
29
+
<Illustrationcaption="触发"alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen."src="/images/docs/illustrations/i_render-and-commit1.png" />
30
+
<Illustrationcaption="渲染"alt="The Card Chef gives React a fresh Card component."src="/images/docs/illustrations/i_render-and-commit2.png" />
31
+
<Illustrationcaption="提交"alt="React delivers the Card to the user at their table."src="/images/docs/illustrations/i_render-and-commit3.png" />
30
32
</IllustrationBlock>
31
33
32
-
## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
34
+
## 步骤 1: 触发一次渲染 {/*step-1-trigger-a-render*/}
33
35
34
-
There are two reasons for a component to render:
36
+
有两种原因会导致组件的渲染:
35
37
36
-
1.It's the component's **initial render.**
37
-
2.The component's **state has been updated.**
38
+
1.组件的 **初始化渲染。**
39
+
2.组件的 **状态发生了改变。**
38
40
39
-
### Initial render {/*initial-render*/}
41
+
### 初始化渲染 {/*initial-render*/}
40
42
41
-
When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling `ReactDOM.render`with your root component and the target DOM node:
43
+
当应用启动时，会触发初始渲染。框架和沙箱有时会隐藏这部分代码，但这是通过使用根组件和目标 DOM 节点调用 `ReactDOM.render`来达成的：
42
44
43
45
<Sandpack>
44
46
@@ -65,36 +67,36 @@ export default function Image() {
65
67
66
68
</Sandpack>
67
69
68
-
Try commenting out the `ReactDOM.render` call and see the component disappear!
70
+
试着注释掉 `ReactDOM.render`，然后您将会看到组件消失。
69
71
70
-
### Re-renders when state updates {/*re-renders-when-state-updates*/}
Once the component has been initially rendered, you can trigger further renders by updating its state with [`setState`](reference/setstate). Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
<Illustrationcaption="State update..."alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!"src="/images/docs/illustrations/i_rerender1.png" />
76
-
<Illustrationcaption="...triggers..."alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card."src="/images/docs/illustrations/i_rerender2.png" />
77
-
<Illustrationcaption="...render!"alt="The Card Chef gives React the pink Card."src="/images/docs/illustrations/i_rerender3.png" />
77
+
<Illustrationcaption="状态更新..."alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!"src="/images/docs/illustrations/i_rerender1.png" />
78
+
<Illustrationcaption="...触发..."alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card."src="/images/docs/illustrations/i_rerender2.png" />
79
+
<Illustrationcaption="...渲染!"alt="The Card Chef gives React the pink Card."src="/images/docs/illustrations/i_rerender3.png" />
78
80
</IllustrationBlock>
79
81
80
-
## Step 2: React renders your components {/*step-2-react-renders-your-components*/}
***On initial render,** React will call the root component.
85
-
***For subsequent renders,** React will call the function component whose state update triggered the render.
86
+
***当第一次渲染,** React 会调用根组件
87
+
***对于后续的渲染,** React 将调用其状态更新触发了渲染的函数组件。
86
88
87
-
This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
***During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` tags.
132
-
***During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
133
+
***在初次渲染中，** React 将会为`<section>`，`<h1>` 和三个 `<img>` 标签 [创建 DOM 节点](https://developer.mozilla.org/docs/Web/API/Document/createElement)。
Rendering must always be a [pure calculation](/learn/keeping-components-pure):
137
140
138
-
***Same inputs, same output.**Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
139
-
***Mind its own business.**It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.)
Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode," React calls each component's function twice, which can help surface mistakes caused by impure functions.
The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](/learn/performance)section. **Don't optimize prematurely!**
## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
154
+
## 步骤 3: React 提交更改到 DOM 上 {/*step-3-react-commits-changes-to-the-dom*/}
152
155
153
-
After rendering (calling) your components, React will modify the DOM.
156
+
在（调用）渲染你的组件之后，React 将会修改 DOM。
154
157
155
-
***For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
156
-
***For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
158
+
***对于初次渲染，** React 会使用 [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API 以将其创建的所有 DOM 节点并放在屏幕上。
159
+
***对于重渲染，** React 将应用最少的必要操作（在渲染时计算！），以使 DOM 与最新的渲染输出匹配。
157
160
158
-
**React only changes the DOM nodes if there's a difference between renders.**For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the `<input>`, updating its `value`, but the text doesn't disappear when the component re-renders:
161
+
**React 仅在渲染之间存在差异时更改 DOM 节点。**例如，有一个组件，它每秒使用从父组件传递下来的不同属性重新渲染。注意，您如果添加一些文本到 `<input>` 标签，更新它的 `value`，但是文本不会在组件重渲染时消失：
159
162
160
163
<Sandpack>
161
164
@@ -195,21 +198,21 @@ export default function App() {
195
198
196
199
</Sandpack>
197
200
198
-
This works because during this last step, React only updates the content of `<h1>`with the new `time`. It sees that the `<input>`appears in the JSX in the same place as last time, so React doesn't touch the `<input>`—or its`value`!
After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion in the rest of these docs.
0 commit comments