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: src/content/learn/render-and-commit.md
+1-18Lines changed: 1 addition & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -69,16 +69,10 @@ export default function Image() {
69
69
Пасля таго як кампанент быў першапачаткова адрэндэраны, вы можаце ініцыяваць наступныя рэндэры, абнаўляючы яго стан з дапамогай функцыі [`set`.](/reference/react/useState#setstate) Абнаўленне стану кампанента аўтаматычна ставіць яго ў чаргу на рэндэр. (Гэта падобна на наведвальніка рэстарана, які пасля першапачатковага заказу, дазаказвае сабе чай, дэсерт і разнастайныя рэчы, у залежнасці ад стану смагі ці голаду.)
70
70
71
71
<IllustrationBlocksequential>
72
-
<<<<<<< HEAD
73
72
<Illustrationcaption="Абнаўленне стану..."alt="React — гэта афіцыянт у рэстаране, які дастаўляе карыстальніцкі інтэрфейс кампанета Card кліенту.Кліент кажа, што хоча ружовы Card, а не чорны!"src="/images/docs/illustrations/i_rerender1.png" />
74
73
<Illustrationcaption="...запускае..."alt="React вяртаецца на кухню кампанентаў і кажа шэфу, што яму патрэбны ружовы Card."src="/images/docs/illustrations/i_rerender2.png" />
75
-
<Illustrationcaption="...рэндэр!"alt="Шэф дае React ружовы Card."src="/images/docs/illustrations/i_rerender3.png" /></IllustrationBlock>
76
-
=======
77
-
<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. The patron expresses they want a pink card, not a black one!"src="/images/docs/illustrations/i_rerender1.png" />
78
-
<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" />
79
-
<Illustrationcaption="...render!"alt="The Card Chef gives React the pink Card."src="/images/docs/illustrations/i_rerender3.png" />
74
+
<Illustrationcaption="...рэндэр!"alt="Шэф дае React ружовы Card."src="/images/docs/illustrations/i_rerender3.png" />
80
75
</IllustrationBlock>
81
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
82
76
83
77
## Этап 2: React рэндэрыць вашы кампаненты {/*step-2-react-renders-your-components*/}
84
78
@@ -89,11 +83,7 @@ export default function Image() {
89
83
90
84
Гэта рэкурсіўны працэс: калі абноўлены кампанент вяртае нейкі іншы кампанент, React адрэндэрыць _гэты_ кампанент наступным, і калі гэты кампанент таксама вяртае што-небудзь, ён адрэндэрыць ужо _гэты_ кампанент наступным, і гэтак далей. Працэс будзе працягвацца датуль, пакуль не застанецца ўкладзеных кампанентаў і React не будзе дакладна ведаць, што павінна быць адлюстравана на экране.
91
85
92
-
<<<<<<< HEAD
93
86
У наступным прыкладзе React выклікае `Gallery()` і `Image()` некалькі разоў:
94
-
=======
95
-
In the following example, React will call `Gallery()` and `Image()` several times:
## Этап 3: React фіксуе змены ў DOM {/*step-3-react-commits-changes-to-the-dom*/}
159
149
160
-
<<<<<<< HEAD
161
150
Пасля рэндэрынгу (выкліку) вашых кампанентаў React змяняе DOM.
162
151
163
152
-**Пры першапачатковым рэндэры** React выкарыстоўвае функцыю DOM API [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), каб вывесці на экран усе створаныя ім DOM-вузлы.
164
153
-**Пры паўторным рэндэры** React прыменіць мінімальна неабходныя аперацыі (якія вылічаюцца падчас рэндэрынгу!), каб DOM адпавядаў апошняму вываду рэндэрынгу.
165
-
=======
166
-
After rendering (calling) your components, React will modify the DOM.
167
-
168
-
***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.
169
-
***For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
170
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
171
154
172
155
**React змяняе DOM-вузлы толькі калі ёсць розніца паміж рэндэрамі.** Напрыклад, вось кампанент, які рэндэрыцца з рознымі пропсамі, якія перадаюцца ад бацькоўскага кампанента кожную секунду. Звярніце ўвагу, што вы можаце дадаць тэкст у `<input>`, абнаўляючы яго `значэнне`, і што пры паўторным рэндэры кампанента тэкст не знікае:
0 commit comments