Translation of the "Render and Commit" #534
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
There was a problem hiding this comment.
Дякую за PR
Спробуй виправити помилки і перечитати правила пунктуація, а також Translation файл. Більшість коментарів щодо вживання і правил відносяться не тільки до цього місця, а до всієї статті.
Рекомендую після змін (через один-два дні) прочитати тільки українську версію статті на локалхості, ніби читаєш чужу документацію, щоб відчути, чи все зрозуміло, чи легко читається, чи не схоже на машинний переклад.
| @@ -0,0 +1,9 @@ | |||
| { | |||
There was a problem hiding this comment.
this file should not be committed
|
|
||
| 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*/} |
There was a problem hiding this comment.
this should be at 197 line
| 3. **Committing** to the DOM (placing the order on the table) | ||
| 1. **Запуск** рендеру (доставка замовлення гостя на кухню) | ||
| 2. **Рендеринг** компонента (підготовка замовлення на кухні) | ||
| 3. **Фіксація** у DOM (розміщення замовлення на столі) | ||
|
|
||
| <IllustrationBlock sequential> | ||
| <Illustration caption="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" /> |
There was a problem hiding this comment.
Here and everywhere: all 'alt' and 'caption' texts should be translated
|
|
||
| In the following example, React will call `Gallery()` and `Image()` several times: | ||
| У наступному прикладі React викличе `Gallery()` і `Image()` кілька разів: | ||
|
|
||
| <Sandpack> | ||
|
|
There was a problem hiding this comment.
h1 and img alt texts below should be translated as well.
currently I'm translating an article just before this one, and to be consistent it's better to use the following translation:
'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals
=>
'Рід квіткові' ('Floralis Genérica') — Едуардо Каталано (Eduardo Catalano): велетенська металева скульптура квітки зі світловідбивними пелюстками
| --- | ||
|
|
||
| <Intro> | ||
|
|
||
| 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. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку. |
There was a problem hiding this comment.
| Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку. | |
| Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння етапів цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку. |
Я думаю, тут краще 'етапів' або 'стадій' замість 'кроків'. Cпробуй перечитати тільки українську версію і відчути, що краще, без англійської.
|
|
||
| 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 викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями. |
There was a problem hiding this comment.
Line 84 in 3188fed
2. strict mode треба перекласти https://uk.legacy.reactjs.org/docs/strict-mode.html (але в дужках після перекладу можеш залишити оригінал, щоб читачу було зрозуміліше)
|
|
||
| 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). **Не оптимізуйте передчасно!** |
There was a problem hiding this comment.
типова поведінка - https://onlinecorrector.com.ua/uk/%D1%82%D0%B8%D0%BF%D0%BE%D0%B2%D0%B8%D0%B9-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D0%B8%D0%B9-%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%B8%D0%B9/ (за замовчуванням - це калька, до речі)
|
|
||
| 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 відповідним останньому результату рендерингу. |
There was a problem hiding this comment.
-
кома перед щоб
-
зробити відповідним ріже вухо, треба подумати
There was a problem hiding this comment.
зробити відповідним - оновити відповідно (до)
| @@ -193,21 +193,22 @@ export default function App() { | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| 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`! | |||
| ## Epilogue: Browser paint {/*epilogue-browser-paint*/} | |||
| Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` з новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`! | |||
There was a problem hiding this comment.
| Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` з новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`! | |
| Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`! |
This pull request includes a translation of the "Render and Commit" feature.