From 088dd696f47409b3883aae3711739da0f164610c Mon Sep 17 00:00:00 2001 From: kpripper <1580509@gmail.com> Date: Sun, 21 Apr 2024 12:18:11 +0300 Subject: [PATCH 01/11] Translation of the "Render and Commit" --- .vscode/settings.json | 9 +++ src/content/learn/render-and-commit.md | 95 +++++++++++++------------- 2 files changed, 57 insertions(+), 47 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..c1a2353a7 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,9 @@ +{ + "cSpell.language": "en,uk,en-US", + "cSpell.words": [ + "відрендереними", + "коміт", + "Рендер", + "рендерить" + ] +} \ No newline at end of file diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 3f0593599..286782687 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -1,27 +1,27 @@ --- -title: Render and Commit +title: Рендер і фіксація --- -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. +Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку. -* What rendering means in React -* When and why React renders a component -* The steps involved in displaying a component on screen -* Why rendering does not always produce a DOM update +* Що таке рендеринг в React +* Коли і чому React рендерить компонент +* Кроки виведення компоненту на екран +* Чому рендеринг не завжди призводить до оновлення DOM -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: +Уявіть, що ваші компоненти - це кухарі на кухні, які збирають смачні страви з інгредієнтів. У цьому сценарії React - це офіціант, який приймає запити від клієнтів і приносить їм замовлення. Цей процес запиту та обслуговування UI складається з трьох кроків: -1. **Triggering** a render (delivering the guest's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Запуск** рендеру (доставка замовлення гостя на кухню) +2. **Рендеринг** компонента (підготовка замовлення на кухні) +3. **Фіксація** у DOM (розміщення замовлення на столі) @@ -29,16 +29,16 @@ Imagine that your components are cooks in the kitchen, assembling tasty dishes f -## Step 1: Trigger a render {/*step-1-trigger-a-render*/} +## Крок 1: Запуск рендерингу {/*step-1-trigger-a-render*/} -There are two reasons for a component to render: +Існує дві причини для рендерингу компонента: -1. It's the component's **initial render.** -2. The component's (or one of its ancestors') **state has been updated.** +1. Це **початковий рендер** компонента. +2. **Було оновлено стан** компонента (або одного з його предків). -### Initial render {/*initial-render*/} +### Початковий {/*initial-render*/} -When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](/reference/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component: +Під час запуску програми вам потрібно запустити початковий рендеринг. Фреймворки та пісочниці іноді приховують цей код, але це робиться шляхом виклику [`createRoot`](/reference/react-dom/client/createRoot) з цільового DOM-вузла, і потім викликом його методу `render` з вашим компонентом: @@ -63,11 +63,11 @@ export default function Image() { -Try commenting out the `root.render()` call and see the component disappear! +Спробуйте закоментувати виклик `root.render()` і побачите, що компонент зникне! -### Re-renders when state updates {/*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 the [`set` function.](/reference/react/useState#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.) +Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою функції[`set` function.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично ставить рендеринг у чергу. (Ви можете уявити це як відвідувача ресторану, який після першого замовлення замовляє чай, десерт та інші речі, залежно від стану спраги чи голоду). @@ -75,16 +75,16 @@ Once the component has been initially rendered, you can trigger further renders -## Step 2: React renders your components {/*step-2-react-renders-your-components*/} +## Крок 2: React рендерить ваші компоненти {/*step-2-react-renders-your-components*/} -After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.** +Після того, як ви запускаєте рендер, React викликає ваші компоненти, щоб з'ясувати, що виводити на екраню **"Рендеринг" - це виклик React'ом ваших компонентів.** -* **On initial render,** React will call the root component. -* **For subsequent renders,** React will call the function component whose state update triggered the render. +* **При початковому рендерингу,** React викличе кореневий компонент. +* **Для наступних рендерів,** React буде викликати компонент функції, оновлення стану якого викликало рендер. -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. +Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _цей_ компонент наступним і так далі. Процес продовжуватиметься доти, доки не залишиться більше вкладених компонентів і React точно знатиме, що саме має бути відображено на екрані. -In the following example, React will call `Gallery()` and `Image()` several times: +У наступному прикладі React викличе `Gallery()` і `Image()` кілька разів: @@ -124,36 +124,36 @@ img { margin: 0 10px 10px 0; } -* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `
`, `

`, and three `` tags. -* **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. +* **Під час початкового рендерингу,** React [створить вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `
`, `

`, і трьох `` тегів. +* **Під час ре-рендерингу,** React вирахує, які властивості цих елементів, якщо такі були, змінилися з моменту попереднього рендерингу. Він нічого не буде робити з цією інформацією до наступного кроку, фази фіксації. -Rendering must always be a [pure calculation](/learn/keeping-components-pure): +Рендеринг завжди має бути [чистим обчисленням](/learn/keeping-components-pure): -* **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!) -* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.) +* **Однакові вхідні дані, однаковий результат.** При однакових вхідних даних компонент завжди має повертати однаковий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!) +* **Займається своїми справами.** Він не повинен змінювати жодних об'єктів або змінних, які існували до рендерингу. (Одне замовлення не повинно змінювати інші замовлення.) -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. +Інакше ви можете зіткнутися із заплутаними багами та непередбачуваною поведінкою зі зростанням складності вашої кодової бази. При розробці у "Strict Mode" React викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями. -#### Optimizing performance {/*optimizing-performance*/} +#### Оптимізація продуктивності {/*optimizing-performance*/} -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](https://reactjs.org/docs/optimizing-performance.html) section. **Don't optimize prematurely!** +Поведінка за замовчуванням, яка полягає у рендерингу усіх компонентів, вкладених у оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо у дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, описаних в розділі [Продуктивність](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!** -## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/} +## Крок 3: React фіксує зміни в DOM {/*step-3-react-commits-changes-to-the-dom*/} -After rendering (calling) your components, React will modify the DOM. +Після рендерингу (виклику) ваших компонентів, React змінюватиме DOM. -* **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. -* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output. +* **Для початкового рендерингу,** React використовуватиме [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API, щоб вивести на екран усі створені ним вузли DOM. +* **Для ре-рендерингів,** React застосовуватиме мінімально необхідні операції (обчислені під час рендерингу!) щоб зробити DOM відповідним останньому результату рендерингу. -**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 ``, updating its `value`, but the text doesn't disappear when the component re-renders: +**React змінює вузли DOM тільки якщо є різниця між рендерами.** Наприклад, ось компонент, який ре-рендериться щосекунди з різними пропсами, переданими від батька. Зверніть увагу, що ви можете додати текст у ``, оновивши його `value`, але текст не зникає, коли компонент ре-рендериться: @@ -193,21 +193,22 @@ export default function App() { -This works because during this last step, React only updates the content of `

` with the new `time`. It sees that the `` appears in the JSX in the same place as last time, so React doesn't touch the ``—or its `value`! -## Epilogue: Browser paint {/*epilogue-browser-paint*/} +Це працює, тому що на останньому кроці React оновлює лише вміст `

` з новим `time`. Він бачить, що `` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `` — або його `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 throughout the docs. +## Епілог: Малювання браузера {/*epilogue-browser-paint*/} + +Після того, як рендеринг завершено і React оновив DOM, браузер перемалює екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації. -* Any screen update in a React app happens in three steps: - 1. Trigger - 2. Render - 3. Commit -* You can use Strict Mode to find mistakes in your components -* React does not touch the DOM if the rendering result is the same as last time +* Будь-яке оновлення екрану у React-застосунку відбувається у три кроки: + 1. Запуск + 2. Рендер + 3. Фіксація +* Ви можете використовувати Strict Mode щоб шукати помилки у ваших компонентах +* React не змінює DOM, якщо результат рендерингу такий самий, як і минулого разу From 4a4c0499583103e5898886603d53de99e9ad9c28 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 19:06:26 +0100 Subject: [PATCH 02/11] Apply suggestions from code review Co-authored-by: Vitalii Perehonchuk --- src/content/learn/render-and-commit.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 286782687..cc067f451 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -4,7 +4,7 @@ title: Рендер і фіксація -Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку. +Перш ніж ваші компоненти відобразяться на екрані, їх повинен підготувати React. Розуміння кроків цього процесу допоможе осмислити те, як виконується код, і пояснити його логіку. From c44a3662555fdaab1031e950e5912a0a22367c27 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 19:06:54 +0100 Subject: [PATCH 03/11] Apply suggestions from code review --- src/content/learn/render-and-commit.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index cc067f451..52a74506c 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -24,7 +24,7 @@ title: Рендер і фіксація 3. **Фіксація** у DOM (розміщення замовлення на столі) - + From a4d151f17d30d9c0b7f9e8ec428eea534eacae00 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 19:07:46 +0100 Subject: [PATCH 04/11] Apply suggestions from code review --- src/content/learn/render-and-commit.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 52a74506c..d3bab8d4e 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -1,5 +1,5 @@ --- -title: Рендер і фіксація +title: Рендер і коміт --- @@ -10,14 +10,14 @@ title: Рендер і фіксація -* Що таке рендеринг в React +* Що таке рендеринг у React * Коли і чому React рендерить компонент * Кроки виведення компоненту на екран * Чому рендеринг не завжди призводить до оновлення DOM -Уявіть, що ваші компоненти - це кухарі на кухні, які збирають смачні страви з інгредієнтів. У цьому сценарії React - це офіціант, який приймає запити від клієнтів і приносить їм замовлення. Цей процес запиту та обслуговування UI складається з трьох кроків: +Уявіть, що ваші компоненти — це кухарі на кухні, які створюють смачні страви з інгредієнтів. У такій історії React — це офіціант, який приймає від клієнтів замовлення та видає їм їжу. Цей процес замовлення та подачі UI складається з трьох кроків: 1. **Запуск** рендеру (доставка замовлення гостя на кухню) 2. **Рендеринг** компонента (підготовка замовлення на кухні) From a50273b8e4cc2d19c0090be552d69ca140cd9bb0 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 19:10:28 +0100 Subject: [PATCH 05/11] Apply suggestions from code review Co-authored-by: Vitalii Perehonchuk --- src/content/learn/render-and-commit.md | 57 +++++++++++++------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index d3bab8d4e..877f0a39d 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -19,14 +19,14 @@ title: Рендер і коміт Уявіть, що ваші компоненти — це кухарі на кухні, які створюють смачні страви з інгредієнтів. У такій історії React — це офіціант, який приймає від клієнтів замовлення та видає їм їжу. Цей процес замовлення та подачі UI складається з трьох кроків: -1. **Запуск** рендеру (доставка замовлення гостя на кухню) +1. **Виклик** рендеру (відправлення замовлення гостя на кухню) 2. **Рендеринг** компонента (підготовка замовлення на кухні) -3. **Фіксація** у DOM (розміщення замовлення на столі) +3. **Коміт** у DOM (розміщення замовлення на столі гостя) - - + + ## Крок 1: Запуск рендерингу {/*step-1-trigger-a-render*/} @@ -36,9 +36,9 @@ title: Рендер і коміт 1. Це **початковий рендер** компонента. 2. **Було оновлено стан** компонента (або одного з його предків). -### Початковий {/*initial-render*/} +### Початковий рендер {/*initial-render*/} -Під час запуску програми вам потрібно запустити початковий рендеринг. Фреймворки та пісочниці іноді приховують цей код, але це робиться шляхом виклику [`createRoot`](/reference/react-dom/client/createRoot) з цільового DOM-вузла, і потім викликом його методу `render` з вашим компонентом: +Під час запуску застосунку необхідно викликати початковий рендер. Фреймворки та пісочниці іноді приховують цей код, але це виконується через виклик [`createRoot`](/reference/react-dom/client/createRoot) із передачею цільового вузла DOM, і потім через виклик методу `render` із вашим компонентом: @@ -63,28 +63,28 @@ export default function Image() { -Спробуйте закоментувати виклик `root.render()` і побачите, що компонент зникне! +Спробуйте закоментувати виклик `root.render()` — і побачите, що компонент зник! -### Повторний рендеринг при оновленні стану {/*re-renders-when-state-updates*/} +### Повторний рендер під час оновлення стану {/*re-renders-when-state-updates*/} -Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою функції[`set` function.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично ставить рендеринг у чергу. (Ви можете уявити це як відвідувача ресторану, який після першого замовлення замовляє чай, десерт та інші речі, залежно від стану спраги чи голоду). +Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою [функції `set`.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично додає рендеринг до черги. (Уявіть відвідувача ресторану, який після першого замовлення замовляє чай, десерт та всяку всячину залежно від стану спраги чи голоду). - - - + + + ## Крок 2: React рендерить ваші компоненти {/*step-2-react-renders-your-components*/} -Після того, як ви запускаєте рендер, React викликає ваші компоненти, щоб з'ясувати, що виводити на екраню **"Рендеринг" - це виклик React'ом ваших компонентів.** +Коли викликано рендер, React викликає ваші компоненти, щоб з'ясувати, що виводити на екран. **"Рендеринг" — це коли React викликає ваші компоненти.** -* **При початковому рендерингу,** React викличе кореневий компонент. -* **Для наступних рендерів,** React буде викликати компонент функції, оновлення стану якого викликало рендер. +* **Під час початкового рендеру** React викличе кореневий компонент. +* **Для наступних рендерів** React викликатиме компонент-функцію, оновлення стану якого власне почало рендер. -Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _цей_ компонент наступним і так далі. Процес продовжуватиметься доти, доки не залишиться більше вкладених компонентів і React точно знатиме, що саме має бути відображено на екрані. +Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _той інший_ компонент наступним, і так далі. Процес триватиме доти, доки не залишиться більше вкладених компонентів, і React точно не знатиме, що саме має бути відображено на екрані. -У наступному прикладі React викличе `Gallery()` і `Image()` кілька разів: +У наступному прикладі React викличе `Gallery()` й `Image()` кілька разів: @@ -124,17 +124,17 @@ img { margin: 0 10px 10px 0; } -* **Під час початкового рендерингу,** React [створить вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `
`, `

`, і трьох `` тегів. -* **Під час ре-рендерингу,** React вирахує, які властивості цих елементів, якщо такі були, змінилися з моменту попереднього рендерингу. Він нічого не буде робити з цією інформацією до наступного кроку, фази фіксації. +* **Під час початкового рендеру** React [створює вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `
`, `

` і трьох тегів ``. +* **Під час повторного рендеру* React вираховує, які властивості елементів змінилися після попереднього рендеру та чи змінилися взагалі. Він нічого не робить з цією інформацією до наступного кроку, фази коміту. Рендеринг завжди має бути [чистим обчисленням](/learn/keeping-components-pure): -* **Однакові вхідні дані, однаковий результат.** При однакових вхідних даних компонент завжди має повертати однаковий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!) -* **Займається своїми справами.** Він не повинен змінювати жодних об'єктів або змінних, які існували до рендерингу. (Одне замовлення не повинно змінювати інші замовлення.) +* **Однакові вихідні дані дають однаковий результат.** Для однакових вихідних даних компонент завжди повинен повертати однаковий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!) +* **Кожен робить свою роботу.** Рендер не повинен змінювати жодних об'єктів або змінних, які існували до нього. (Одне замовлення не повинно змінювати інші замовлення.) -Інакше ви можете зіткнутися із заплутаними багами та непередбачуваною поведінкою зі зростанням складності вашої кодової бази. При розробці у "Strict Mode" React викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями. +Інакше ви можете зіткнутися із заплутаними помилками та непередбачуваною поведінкою зі зростанням складності кодової бази. Під час розробки у суворому режимі ("Strict Mode") React викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями. @@ -142,18 +142,18 @@ img { margin: 0 10px 10px 0; } #### Оптимізація продуктивності {/*optimizing-performance*/} -Поведінка за замовчуванням, яка полягає у рендерингу усіх компонентів, вкладених у оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо у дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, описаних в розділі [Продуктивність](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!** +Стандартна поведінка, яка полягає у рендерингу всіх компонентів, вкладених в оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо в дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, описаних в розділі ["Продуктивність"](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!** ## Крок 3: React фіксує зміни в DOM {/*step-3-react-commits-changes-to-the-dom*/} -Після рендерингу (виклику) ваших компонентів, React змінюватиме DOM. +Після рендерингу (виклику) ваших компонентів React вносить зміни в DOM. -* **Для початкового рендерингу,** React використовуватиме [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API, щоб вивести на екран усі створені ним вузли DOM. -* **Для ре-рендерингів,** React застосовуватиме мінімально необхідні операції (обчислені під час рендерингу!) щоб зробити DOM відповідним останньому результату рендерингу. +* **Для початкового рендерингу** React використовує API DOM [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), щоб вивести на екран усі новостворені вузли DOM. +* **Для повторних рендерів** React застосовує мінімально необхідні операції (обчислені під час рендерингу!), щоб оновити DOM відповідно до результату найсвіжішого рендерингу. -**React змінює вузли DOM тільки якщо є різниця між рендерами.** Наприклад, ось компонент, який ре-рендериться щосекунди з різними пропсами, переданими від батька. Зверніть увагу, що ви можете додати текст у ``, оновивши його `value`, але текст не зникає, коли компонент ре-рендериться: +**React змінює вузли DOM тільки якщо є різниця між рендерами.** Наприклад, ось компонент, який повторно рендериться щосекунди з різними властивостями, що передаються від батьківського компонента. Зверніть увагу, що можна додати текст у ``, оновивши його `value`, але текст не зникає, коли компонент рендериться наново: @@ -193,8 +193,7 @@ export default function App() { -Це працює, тому що на останньому кроці React оновлює лише вміст `

` з новим `time`. Він бачить, що `` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `` — або його `value`! - +Це працює, тому що на останньому кроці React оновлює лише вміст `

` новим `time`. Він бачить, що `` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `` — або його `value`! ## Епілог: Малювання браузера {/*epilogue-browser-paint*/} Після того, як рендеринг завершено і React оновив DOM, браузер перемалює екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації. From 71726706e8080694ca16dfbde01220039b8f5532 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 19:11:02 +0100 Subject: [PATCH 06/11] Apply suggestions from code review Co-authored-by: Vitalii Perehonchuk --- src/content/learn/render-and-commit.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 877f0a39d..b2350302a 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -196,17 +196,17 @@ export default function App() { Це працює, тому що на останньому кроці React оновлює лише вміст `

` новим `time`. Він бачить, що `` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `` — або його `value`! ## Епілог: Малювання браузера {/*epilogue-browser-paint*/} -Після того, як рендеринг завершено і React оновив DOM, браузер перемалює екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації. +Коли рендеринг завершено і React оновив DOM, браузер перемальовує екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації. * Будь-яке оновлення екрану у React-застосунку відбувається у три кроки: - 1. Запуск + 1. Виклик 2. Рендер - 3. Фіксація -* Ви можете використовувати Strict Mode щоб шукати помилки у ваших компонентах + 3. Коміт +* Можна скористатися суворим режимом (Strict Mode), аби віднайти помилки у своїх компонентах * React не змінює DOM, якщо результат рендерингу такий самий, як і минулого разу From d5898e6d516b873699c202ab8c3b64008cb95ae5 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 19:12:39 +0100 Subject: [PATCH 07/11] Delete .vscode/settings.json --- .vscode/settings.json | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index c1a2353a7..000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "cSpell.language": "en,uk,en-US", - "cSpell.words": [ - "відрендереними", - "коміт", - "Рендер", - "рендерить" - ] -} \ No newline at end of file From 8ed95140ac68fbd41f4102ea7a2719c55341c801 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 19:43:24 +0100 Subject: [PATCH 08/11] Update render-and-commit.md --- src/content/learn/render-and-commit.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index b2350302a..80c7c9a19 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -55,7 +55,7 @@ export default function Image() { return ( 'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals ); } @@ -92,7 +92,7 @@ export default function Image() { export default function Gallery() { return (
-

Inspiring Sculptures

+

Скульптури, що надихають

@@ -104,7 +104,7 @@ function Image() { return ( 'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals ); } From 492fa14ffea16926470c79ef813c922370ae276e Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 19:50:39 +0100 Subject: [PATCH 09/11] Update sidebarLearn.json --- src/sidebarLearn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 02806dc0c..5b594f3e4 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -107,7 +107,7 @@ "path": "/learn/state-a-components-memory" }, { - "title": "Render and Commit", + "title": "Рендер і коміт", "path": "/learn/render-and-commit" }, { From b72b251ffda508bb51f8c2d7d768407e3de76add Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 22:31:00 +0100 Subject: [PATCH 10/11] Apply suggestions from code review --- src/content/learn/render-and-commit.md | 62 +++++++++++++------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 80c7c9a19..c4488d549 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -4,7 +4,7 @@ title: Рендер і коміт -Перш ніж ваші компоненти відобразяться на екрані, їх повинен підготувати React. Розуміння кроків цього процесу допоможе осмислити те, як виконується код, і пояснити його логіку. +Перш ніж ваші компоненти відобразяться на екрані, їх повинен відрендерити React. Розуміння кроків цього процесу допоможе осмислити перебіг виконання вашого коду та пояснити його поведінку. @@ -12,24 +12,24 @@ title: Рендер і коміт * Що таке рендеринг у React * Коли і чому React рендерить компонент -* Кроки виведення компоненту на екран +* Кроки відображення компонента на екрані * Чому рендеринг не завжди призводить до оновлення DOM -Уявіть, що ваші компоненти — це кухарі на кухні, які створюють смачні страви з інгредієнтів. У такій історії React — це офіціант, який приймає від клієнтів замовлення та видає їм їжу. Цей процес замовлення та подачі UI складається з трьох кроків: +Уявіть, що ваші компоненти — це кухарі на кухні, які створюють смачні страви з інгредієнтів. У такій історії React — це офіціант, який приймає від клієнтів замовлення та видає їм їжу. Цей процес замовлення та видавання UI складається з трьох кроків: -1. **Виклик** рендеру (відправлення замовлення гостя на кухню) -2. **Рендеринг** компонента (підготовка замовлення на кухні) +1. **Тригер** рендеру (доставлення замовлення гостя на кухню) +2. **Рендеринг** компонента (готування замовлення на кухні) 3. **Коміт** у DOM (розміщення замовлення на столі гостя) - - - + + + -## Крок 1: Запуск рендерингу {/*step-1-trigger-a-render*/} +## Крок 1: Тригер рендеру {/*step-1-trigger-a-render*/} Існує дві причини для рендерингу компонента: @@ -38,7 +38,7 @@ title: Рендер і коміт ### Початковий рендер {/*initial-render*/} -Під час запуску застосунку необхідно викликати початковий рендер. Фреймворки та пісочниці іноді приховують цей код, але це виконується через виклик [`createRoot`](/reference/react-dom/client/createRoot) із передачею цільового вузла DOM, і потім через виклик методу `render` із вашим компонентом: +Під час запуску застосунку необхідно викликати початковий рендер. Фреймворки та пісочниці іноді приховують цей код, але це насправді виклик [`createRoot`](/reference/react-dom/client/createRoot) із передачею цільового вузла DOM і потім виклик методу `render` із вашим компонентом: @@ -63,28 +63,28 @@ export default function Image() { -Спробуйте закоментувати виклик `root.render()` — і побачите, що компонент зник! +Спробуйте зробити `root.render()` коментарем — і побачите, що компонент зник! ### Повторний рендер під час оновлення стану {/*re-renders-when-state-updates*/} -Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою [функції `set`.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично додає рендеринг до черги. (Уявіть відвідувача ресторану, який після першого замовлення замовляє чай, десерт та всяку всячину залежно від стану спраги чи голоду). +Після першого рендеру компонента ви можете збудити (trigger) подальші рендери, оновивши його стан за допомогою [функції `set`.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично додає рендер до черги. (Уявіть відвідувача ресторану, який після першого замовлення замовляє чай, десерт та всяку всячину залежно від стану спраги чи голоду). - - - + + + ## Крок 2: React рендерить ваші компоненти {/*step-2-react-renders-your-components*/} -Коли викликано рендер, React викликає ваші компоненти, щоб з'ясувати, що виводити на екран. **"Рендеринг" — це коли React викликає ваші компоненти.** +Після тригера рендеру React викликає (calls) ваші компоненти, щоб з'ясувати, що виводити на екран. **"Рендеринг" — це коли React викликає ваші компоненти.** * **Під час початкового рендеру** React викличе кореневий компонент. -* **Для наступних рендерів** React викликатиме компонент-функцію, оновлення стану якого власне почало рендер. +* **Для наступних рендерів** React викликатиме функцію компонента, оновлення стану якого власне збудило рендер. -Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _той інший_ компонент наступним, і так далі. Процес триватиме доти, доки не залишиться більше вкладених компонентів, і React точно не знатиме, що саме має бути відображено на екрані. +Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _той інший_ компонент наступним, і так далі. Процес триватиме доти, доки не залишиться вкладених компонентів, і React не знатиме точно, що саме має бути відображено на екрані. -У наступному прикладі React викличе `Gallery()` й `Image()` кілька разів: +У цьому прикладі React викличе `Gallery()` й `Image()` кілька разів: @@ -125,14 +125,14 @@ img { margin: 0 10px 10px 0; } * **Під час початкового рендеру** React [створює вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `
`, `

` і трьох тегів ``. -* **Під час повторного рендеру* React вираховує, які властивості елементів змінилися після попереднього рендеру та чи змінилися взагалі. Він нічого не робить з цією інформацією до наступного кроку, фази коміту. +* **Під час повторного рендеру* React вираховує, які властивості елементів змінилися після попереднього рендеру. Він нічого не робить з цією інформацією до наступного кроку, фази коміту. Рендеринг завжди має бути [чистим обчисленням](/learn/keeping-components-pure): -* **Однакові вихідні дані дають однаковий результат.** Для однакових вихідних даних компонент завжди повинен повертати однаковий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!) -* **Кожен робить свою роботу.** Рендер не повинен змінювати жодних об'єктів або змінних, які існували до нього. (Одне замовлення не повинно змінювати інші замовлення.) +* **Однакові вхідні дані — той самий результат.** З урахуванням однакових вхідних даних чиста функція має завжди повертати той самий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!) +* **Займається лише своєю справою.** Воно не повинно змінювати жодних об'єктів або змінних, які існували до рендеру. (Замовлення одного не повинно змінювати замовлення інших.) Інакше ви можете зіткнутися із заплутаними помилками та непередбачуваною поведінкою зі зростанням складності кодової бази. Під час розробки у суворому режимі ("Strict Mode") React викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями. @@ -142,18 +142,18 @@ img { margin: 0 10px 10px 0; } #### Оптимізація продуктивності {/*optimizing-performance*/} -Стандартна поведінка, яка полягає у рендерингу всіх компонентів, вкладених в оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо в дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, описаних в розділі ["Продуктивність"](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!** +Стандартна поведінка, яка полягає у рендерингу всіх компонентів, вкладених в оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо в дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, що наведені в розділі ["Продуктивність"](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!** -## Крок 3: React фіксує зміни в DOM {/*step-3-react-commits-changes-to-the-dom*/} +## Крок 3: React вносить зміни в DOM {/*step-3-react-commits-changes-to-the-dom*/} -Після рендерингу (виклику) ваших компонентів React вносить зміни в DOM. +Після рендерингу (виклику) ваших компонентів React модифікує DOM. * **Для початкового рендерингу** React використовує API DOM [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), щоб вивести на екран усі новостворені вузли DOM. * **Для повторних рендерів** React застосовує мінімально необхідні операції (обчислені під час рендерингу!), щоб оновити DOM відповідно до результату найсвіжішого рендерингу. -**React змінює вузли DOM тільки якщо є різниця між рендерами.** Наприклад, ось компонент, який повторно рендериться щосекунди з різними властивостями, що передаються від батьківського компонента. Зверніть увагу, що можна додати текст у ``, оновивши його `value`, але текст не зникає, коли компонент рендериться наново: +**React змінює вузли DOM тільки тоді, коли є різниця між рендерами.** Наприклад, ось компонент, який повторно рендериться щосекунди з різними властивостями, що передаються від батьківського компонента. Зверніть увагу, що можна додати текст у ``, оновивши його `value`, але текст не зникає, коли компонент рендериться повторно: @@ -193,20 +193,20 @@ export default function App() { -Це працює, тому що на останньому кроці React оновлює лише вміст `

` новим `time`. Він бачить, що `` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `` — або його `value`! +Це працює, тому що на останньому кроці React оновлює лише вміст `

` новим `time`. Він бачить, що `` з'являється у JSX у тому ж місці, що і минулого разу, тому React не чіпає `` або його `value`! ## Епілог: Малювання браузера {/*epilogue-browser-paint*/} -Коли рендеринг завершено і React оновив DOM, браузер перемальовує екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації. +Коли рендеринг завершено і React оновив DOM, браузер перемальовує екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням" ("painting"), щоб уникнути плутанини в документації. - + * Будь-яке оновлення екрану у React-застосунку відбувається у три кроки: - 1. Виклик + 1. Тригер 2. Рендер 3. Коміт -* Можна скористатися суворим режимом (Strict Mode), аби віднайти помилки у своїх компонентах +* Можна скористатися суворим режимом, аби віднайти помилки у компонентах * React не змінює DOM, якщо результат рендерингу такий самий, як і минулого разу From 17e4b024f8fe60d87708d09a28378eb29ac71863 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Sun, 29 Dec 2024 22:38:01 +0100 Subject: [PATCH 11/11] Apply suggestions from code review --- src/content/learn/render-and-commit.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index c4488d549..7667cc446 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -20,7 +20,7 @@ title: Рендер і коміт Уявіть, що ваші компоненти — це кухарі на кухні, які створюють смачні страви з інгредієнтів. У такій історії React — це офіціант, який приймає від клієнтів замовлення та видає їм їжу. Цей процес замовлення та видавання UI складається з трьох кроків: 1. **Тригер** рендеру (доставлення замовлення гостя на кухню) -2. **Рендеринг** компонента (готування замовлення на кухні) +2. **Рендер** компонента (готування замовлення на кухні) 3. **Коміт** у DOM (розміщення замовлення на столі гостя)