File tree 1 file changed +5
-4
lines changed
1 file changed +5
-4
lines changed Original file line number Diff line number Diff line change @@ -4,6 +4,7 @@ translators:
4
4
- oceanlvr
5
5
- KimYangOfCat
6
6
- Neo42
7
+ - TinaaaaP
7
8
---
8
9
9
10
<Intro >
@@ -17,11 +18,11 @@ translators:
17
18
* 在 React 中渲染的含义是什么
18
19
* 为什么以及什么时候 React 会渲染一个组件
19
20
* 在屏幕上显示组件所涉及的步骤
20
- * 为什么渲染并不总会导致 DOM 更新
21
+ * 为什么渲染并不一定会导致 DOM 更新
21
22
22
23
</YouWillLearn >
23
24
24
- 想象一下,您的组件是厨房里的厨师,把食材烹制成美味的菜肴。在这种场景下,React 就是一名服务员,他会帮客户们下单并为他们送来所点的菜品。请求和提供 UI 的过程总共包括三个步骤:
25
+ 想象一下,您的组件是厨房里的厨师,把食材烹制成美味的菜肴。在这种场景下,React 就是一名服务员,他会帮客户们下单并为他们送来所点的菜品。这种请求和提供 UI 的过程总共包括三个步骤:
25
26
26
27
1 . ** 触发** 一次渲染(把客人的点单分发到厨房)
27
28
2 . ** 渲染** 组件(从厨房取得所点的菜品)
@@ -76,7 +77,7 @@ export default function Image() {
76
77
一旦组件被初次渲染,您就可以通过使用 [ ` setState ` ] ( reference/setstate ) 更新其状态来触发之后的渲染。更新组件的状态会自动将一次渲染送入队列。(您可以想象这种情况成餐厅客人在第一次下单之后又点了茶、点心和各种东西,具体取决于他们的胃口。)
77
78
78
79
<IllustrationBlock sequential >
79
- <Illustration caption =" 状态更新... " alt =" React 作为餐厅服务员将一份 Card UI 送到用户那里,用户用头部是光标的顾客表示 。顾客说她想要一个粉色的 Card,而不是黑色的。 " src =" /images/docs/illustrations/i_rerender1.png " />
80
+ <Illustration caption =" 状态更新... " alt =" React 作为餐厅服务员将一份 Card UI 送到用户那里,这里的用户以头部为光标的顾客表示 。顾客说她想要一个粉色的 Card,而不是黑色的。 " src =" /images/docs/illustrations/i_rerender1.png " />
80
81
<Illustration caption =" ...触发... " alt =" React 回到组件厨房并告诉 Card 主厨他们需要一个粉色 Card。 " src =" /images/docs/illustrations/i_rerender2.png " />
81
82
<Illustration caption =" ...渲染! " alt =" Card 主厨把粉色 Card 交给 React。 " src =" /images/docs/illustrations/i_rerender3.png " />
82
83
</IllustrationBlock >
@@ -148,7 +149,7 @@ img { margin: 0 10px 10px 0; }
148
149
149
150
<DeepDive title =" 性能优化 " >
150
151
151
- 如果更新的组件在树中的位置非常高,渲染更新后的组件内部所有嵌套组件的默认行为不是性能上的最佳选择 。如果您遇到了性能问题,[ 性能] ( /learn/performance ) 章节描述了几种可选的解决方案 。** 不要过早进行优化!**
152
+ 如果更新的组件在树中的位置非常高,渲染更新后的组件内部所有嵌套组件的默认行为将不会获得最佳性能 。如果您遇到了性能问题,[ 性能] ( /learn/performance ) 章节描述了几种可选的解决方案 。** 不要过早进行优化!**
152
153
153
154
</DeepDive >
154
155
You can’t perform that action at this time.
0 commit comments