Skip to content

Commit b11bbaf

Browse files
authored
Update render-and-commit.md
1 parent f94f0c9 commit b11bbaf

File tree

1 file changed

+1
-18
lines changed

1 file changed

+1
-18
lines changed

src/content/learn/render-and-commit.md

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -69,16 +69,10 @@ export default function Image() {
6969
Пасля таго як кампанент быў першапачаткова адрэндэраны, вы можаце ініцыяваць наступныя рэндэры, абнаўляючы яго стан з дапамогай функцыі [`set`.](/reference/react/useState#setstate) Абнаўленне стану кампанента аўтаматычна ставіць яго ў чаргу на рэндэр. (Гэта падобна на наведвальніка рэстарана, які пасля першапачатковага заказу, дазаказвае сабе чай, дэсерт і разнастайныя рэчы, у залежнасці ад стану смагі ці голаду.)
7070

7171
<IllustrationBlock sequential>
72-
<<<<<<< HEAD
7372
<Illustration caption="Абнаўленне стану..." alt="React — гэта афіцыянт у рэстаране, які дастаўляе карыстальніцкі інтэрфейс кампанета Card кліенту.Кліент кажа, што хоча ружовы Card, а не чорны!" src="/images/docs/illustrations/i_rerender1.png" />
7473
<Illustration caption="...запускае..." alt="React вяртаецца на кухню кампанентаў і кажа шэфу, што яму патрэбны ружовы Card." src="/images/docs/illustrations/i_rerender2.png" />
75-
<Illustration caption="...рэндэр!" alt="Шэф дае React ружовы Card." src="/images/docs/illustrations/i_rerender3.png" /></IllustrationBlock>
76-
=======
77-
<Illustration caption="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-
<Illustration caption="...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-
<Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
74+
<Illustration caption="...рэндэр!" alt="Шэф дае React ружовы Card." src="/images/docs/illustrations/i_rerender3.png" />
8075
</IllustrationBlock>
81-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
8276

8377
## Этап 2: React рэндэрыць вашы кампаненты {/*step-2-react-renders-your-components*/}
8478

@@ -89,11 +83,7 @@ export default function Image() {
8983

9084
Гэта рэкурсіўны працэс: калі абноўлены кампанент вяртае нейкі іншы кампанент, React адрэндэрыць _гэты_ кампанент наступным, і калі гэты кампанент таксама вяртае што-небудзь, ён адрэндэрыць ужо _гэты_ кампанент наступным, і гэтак далей. Працэс будзе працягвацца датуль, пакуль не застанецца ўкладзеных кампанентаў і React не будзе дакладна ведаць, што павінна быць адлюстравана на экране.
9185

92-
<<<<<<< HEAD
9386
У наступным прыкладзе React выклікае `Gallery()` і `Image()` некалькі разоў:
94-
=======
95-
In the following example, React will call `Gallery()` and `Image()` several times:
96-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
9787

9888
<Sandpack>
9989

@@ -157,17 +147,10 @@ img { margin: 0 10px 10px 0; }
157147

158148
## Этап 3: React фіксуе змены ў DOM {/*step-3-react-commits-changes-to-the-dom*/}
159149

160-
<<<<<<< HEAD
161150
Пасля рэндэрынгу (выкліку) вашых кампанентаў React змяняе DOM.
162151

163152
- **Пры першапачатковым рэндэры** React выкарыстоўвае функцыю DOM API [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), каб вывесці на экран усе створаныя ім DOM-вузлы.
164153
- **Пры паўторным рэндэры** 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
171154

172155
**React змяняе DOM-вузлы толькі калі ёсць розніца паміж рэндэрамі.** Напрыклад, вось кампанент, які рэндэрыцца з рознымі пропсамі, якія перадаюцца ад бацькоўскага кампанента кожную секунду. Звярніце ўвагу, што вы можаце дадаць тэкст у `<input>`, абнаўляючы яго `значэнне`, і што пры паўторным рэндэры кампанента тэкст не знікае:
173156

0 commit comments

Comments
 (0)