From 39cd75b1a4e248efb74d7200691a59a5d190bceb Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 04:39:33 +0300 Subject: [PATCH 01/32] Update render-and-commit.md --- src/content/learn/render-and-commit.md | 93 +++++++++++++------------- 1 file changed, 47 insertions(+), 46 deletions(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 84bf904cd..81e1ea245 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -1,27 +1,28 @@ --- -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 — это официант, который выполняет запросы клиентов и приносит им их заказы. Этот процесс запроса и подачи пользовательского интерфейса состоит из трех этапов: -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 +30,16 @@ Imagine that your components are cooks in the kitchen, assembling tasty dishes f -## Step 1: Trigger a render {/*step-1-trigger-a-render*/} +## Step 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 +64,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`](/reference/react/useState#setstate) Обновление стейта компонента автоматически ставит его в очередь на рендер. (Вы можете представить это как посетителя ресторана, который после первого заказа заказывает чай, десерт и всевозможные вещи, в зависимости от состояния жажды или голода). @@ -75,16 +76,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*/} +## Step 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 +125,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): +Рендеринг должен всегда быть [pure calculation](/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. +В противном случае вы можете столкнуться с непонятными ошибками и непредсказуемым поведением по мере роста сложности вашей кодовой базы. При разработке в "строгом режиме" 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*/} +## Step 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/ru/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, только если есть разница между рендерами.** Например, вот компонент, который рендерится с разными пропсами, передаваемыми от родителя каждую секунду. Обратите внимание, как вы можете добавить некоторый текст в ``, обновляя его `значение`, но текст не исчезает при повторном рендеринге компонента: @@ -193,21 +194,21 @@ 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`! +Это работает, потому что в предыдущий раз, React обновил значение `

` с новым `time`. Он видит, что `` появляется в том же месте JSX, поэтому React не трогает ``— или его `value`! ## Epilogue: Browser paint {/*epilogue-browser-paint*/} -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. +После того как рендеринг завершен и 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 ccba4e07cb92e4f311a09b07c1e8b7933e628651 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 04:44:14 +0300 Subject: [PATCH 02/32] Update render-and-commit.md --- src/content/learn/render-and-commit.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 81e1ea245..4c7e069da 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -6,7 +6,6 @@ title: Рендер и фиксация Прежде чем ваши компоненты будут отображены на экране, они должны быть отрисованы React. Понимание этапов этого процесса поможет вам продумать, как выполняется ваш код, и объяснить его поведение - From 3e824825415e1fdd0a7f2aa32c3bee4efd93aa8e Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 04:56:41 +0300 Subject: [PATCH 03/32] 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 4c7e069da..41204c643 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -10,10 +10,10 @@ title: Рендер и фиксация -* Что означает рендеринг в React -* Когда и почему React рендерит компонент +* Что означает рендеринг в React. +* Когда и почему React рендерит компонент. * Шаги, связанные с рендерингом компонента на экране. -* Почему рендеринг не всегда приводит к обновлению DOM +* Почему рендеринг не всегда приводит к обновлению DOM. From 3b73bf1993eabd2788f00b94bfffb165b1796343 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:14:18 +0300 Subject: [PATCH 04/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 41204c643..9f362ffbd 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 e175dc7b93bac1e6be0641c35c548067d987e0b9 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:14:29 +0300 Subject: [PATCH 05/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 9f362ffbd..155fa607d 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -12,7 +12,7 @@ title: Рендер и фиксация * Что означает рендеринг в React. * Когда и почему React рендерит компонент. -* Шаги, связанные с рендерингом компонента на экране. +* Этапы отображения компонента на экране. * Почему рендеринг не всегда приводит к обновлению DOM. From 2b6af95e0e079fcc7674f36b7bfc900c9f018179 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:14:36 +0300 Subject: [PATCH 06/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 155fa607d..c8af62871 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -17,7 +17,7 @@ title: Рендер и фиксация -Представьте, что ваши компоненты — это повара на кухне, собирающие вкусные блюда из ингредиентов. В этом сценарии React — это официант, который выполняет запросы клиентов и приносит им их заказы. Этот процесс запроса и подачи пользовательского интерфейса состоит из трех этапов: +Представьте, что ваши компоненты — это повара на кухне, которые составляют вкусные блюда из ингредиентов. Тогда React — это официант, который передает запросы клиентов, а затем подает им их блюда. Этот процесс запроса и подачи пользовательского интерфейса состоит из трех этапов: 1. **Триггер** рендеринга (доставка заказа гостя на кухню) 2. **Рендеринг** компонента (подготовка заказа на кухне) From a061128f2de5043476aca365386dcea4d2e6e6c8 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:14:45 +0300 Subject: [PATCH 07/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 c8af62871..55ae63e83 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -19,7 +19,7 @@ title: Рендер и фиксация Представьте, что ваши компоненты — это повара на кухне, которые составляют вкусные блюда из ингредиентов. Тогда React — это официант, который передает запросы клиентов, а затем подает им их блюда. Этот процесс запроса и подачи пользовательского интерфейса состоит из трех этапов: -1. **Триггер** рендеринга (доставка заказа гостя на кухню) +1. **Триггер** рендеринга (передача заказа гостя на кухню) 2. **Рендеринг** компонента (подготовка заказа на кухне) 3. **Фиксация** в DOM (размещение заказа на столе) From e6331381ef7ac764b8dee4f031f5c6a63b48c9b8 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:14:52 +0300 Subject: [PATCH 08/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 55ae63e83..8eb58b161 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -31,7 +31,7 @@ title: Рендер и фиксация ## Step 1: Триггер рендера {/*step-1-trigger-a-render*/} -Есть две причины для рендера компонента: +Рендер компонента происходит по двум причинам: 1. Это **первоначальный рендеринг компонента.** 2. Компонент (или один из его дочерних') **стейт был обновлён.** From 5ad7dc224ac1c3d888a6664d1e8e40a9eae9d614 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:14:58 +0300 Subject: [PATCH 09/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 8eb58b161..ce346c31e 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -34,7 +34,7 @@ title: Рендер и фиксация Рендер компонента происходит по двум причинам: 1. Это **первоначальный рендеринг компонента.** -2. Компонент (или один из его дочерних') **стейт был обновлён.** +2. Его **стейт** (или стейт его родителя) **был обновлён.** ### Начальный рендер {/*initial-render*/} From 708e60aebc81b5cf1eda2a789aa9ed47ab3a4551 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:15:13 +0300 Subject: [PATCH 10/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 ce346c31e..f8addf497 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -21,7 +21,7 @@ title: Рендер и фиксация 1. **Триггер** рендеринга (передача заказа гостя на кухню) 2. **Рендеринг** компонента (подготовка заказа на кухне) -3. **Фиксация** в DOM (размещение заказа на столе) +3. **Фиксация** в DOM (подача блюда на стол) From e3b3584375e6eda21256fac2ae4850988e0d35c7 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:15:37 +0300 Subject: [PATCH 11/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 f8addf497..b43ac5907 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -33,7 +33,7 @@ title: Рендер и фиксация Рендер компонента происходит по двум причинам: -1. Это **первоначальный рендеринг компонента.** +1. Это его **первоначальный рендеринг.** 2. Его **стейт** (или стейт его родителя) **был обновлён.** ### Начальный рендер {/*initial-render*/} From c31ad6da263f45c5068348a5f2571d8b55c485da Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:15:56 +0300 Subject: [PATCH 12/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 b43ac5907..b85e4949d 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -20,7 +20,7 @@ title: Рендер и фиксация Представьте, что ваши компоненты — это повара на кухне, которые составляют вкусные блюда из ингредиентов. Тогда React — это официант, который передает запросы клиентов, а затем подает им их блюда. Этот процесс запроса и подачи пользовательского интерфейса состоит из трех этапов: 1. **Триггер** рендеринга (передача заказа гостя на кухню) -2. **Рендеринг** компонента (подготовка заказа на кухне) +2. **Рендеринг** компонента (приготовление заказа на кухне) 3. **Фиксация** в DOM (подача блюда на стол) From 006a1c619b3db2fbde62df5646083df70944513d Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:17:17 +0300 Subject: [PATCH 13/32] Update render-and-commit.md --- 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 b85e4949d..dc44fa9a8 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -33,7 +33,7 @@ title: Рендер и фиксация Рендер компонента происходит по двум причинам: -1. Это его **первоначальный рендеринг.** +1. Это его **начальный рендеринг.** 2. Его **стейт** (или стейт его родителя) **был обновлён.** ### Начальный рендер {/*initial-render*/} From 7413d7645612a7da2e8d16316832c17d36707dfb Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Mon, 22 May 2023 07:19:30 +0300 Subject: [PATCH 14/32] Update src/content/learn/render-and-commit.md Co-authored-by: Anton Ahatov --- 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 dc44fa9a8..897948bcb 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -131,7 +131,7 @@ img { margin: 0 10px 10px 0; } Рендеринг должен всегда быть [pure calculation](/learn/keeping-components-pure): -* **Одинаковые входные данные, одинаковые выходящие.** При одинаковых входящих данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, то он не должен получить салат с луком!) +* **Одни и те же входные данные, один и тот же результат.** При одинаковых входящих данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, то он не должен получить салат с луком!) * **Своими делами заниматься.** Не изменять объекты или переменные, существовавшие до рендеринга. (Один заказ не должен изменять чей-либо другой заказ). В противном случае вы можете столкнуться с непонятными ошибками и непредсказуемым поведением по мере роста сложности вашей кодовой базы. При разработке в "строгом режиме" React вызывает функцию каждого компонента дважды, что может помочь выявить ошибки, вызванные нечистыми функциями. From f2153808a94dd8dc9220935d36cd8003624c1fb9 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Mon, 22 May 2023 07:19:44 +0300 Subject: [PATCH 15/32] Update src/content/learn/render-and-commit.md Co-authored-by: Anton Ahatov --- 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 897948bcb..cdf935d7b 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -129,7 +129,7 @@ img { margin: 0 10px 10px 0; } -Рендеринг должен всегда быть [pure calculation](/learn/keeping-components-pure): +Рендеринг всегда должен быть [чистым вычислением.](/learn/keeping-components-pure): * **Одни и те же входные данные, один и тот же результат.** При одинаковых входящих данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, то он не должен получить салат с луком!) * **Своими делами заниматься.** Не изменять объекты или переменные, существовавшие до рендеринга. (Один заказ не должен изменять чей-либо другой заказ). From e4e703050989845f824c1c8663f3297b0fe99960 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Mon, 22 May 2023 07:21:05 +0300 Subject: [PATCH 16/32] Update src/content/learn/render-and-commit.md Co-authored-by: Anton Ahatov --- 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 cdf935d7b..033cdde78 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -153,7 +153,7 @@ img { margin: 0 10px 10px 0; } * **На начальном рендере,** React использует [`appendChild()`](https://developer.mozilla.org/ru/docs/Web/API/Node/appendChild) DOM API, чтобы вставить все DOM ноды, которые он создал на экране. * **Для ре-рендеров,** React будет применять минимально необходимые операции (вычисляемые во время рендеринга!), чтобы DOM соответствовал последнему выводу рендеринга. -** React изменяет узлы DOM, только если есть разница между рендерами.** Например, вот компонент, который рендерится с разными пропсами, передаваемыми от родителя каждую секунду. Обратите внимание, как вы можете добавить некоторый текст в ``, обновляя его `значение`, но текст не исчезает при повторном рендеринге компонента: +**React изменяет узлы DOM только если есть разница между рендерами.** Например, вот компонент, который рендерится с разными пропсами, передаваемыми от родителя каждую секунду. Обратите внимание, как вы можете добавить некоторый текст в ``, обновляя его `значение`, но текст не исчезает при повторном рендеринге компонента: From 7524338369d0b16cab05a631221061f6976752d3 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Mon, 22 May 2023 07:21:36 +0300 Subject: [PATCH 17/32] Update src/content/learn/render-and-commit.md Co-authored-by: Anton Ahatov --- 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 033cdde78..643250c7b 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -196,7 +196,7 @@ export default function App() { Это работает, потому что в предыдущий раз, React обновил значение `

` с новым `time`. Он видит, что `` появляется в том же месте JSX, поэтому React не трогает ``— или его `value`! ## Epilogue: Browser paint {/*epilogue-browser-paint*/} -После того как рендеринг завершен и React обновил DOM, браузер перерисовывает экран. Хотя этот процесс известен как "браузерный рендеринг", мы будем называть его "рисованием", чтобы избежать путаницы в документации. +После того как рендеринг завершен и React обновил DOM, браузер перерисовывает экран. Хотя этот процесс известен как «браузерный рендеринг», мы будем называть его «рисованием», чтобы избежать путаницы в документации. From 857ddca8ff7c376e370f47f6666b8570b41811b1 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Mon, 22 May 2023 07:22:03 +0300 Subject: [PATCH 18/32] Update src/content/learn/render-and-commit.md Co-authored-by: Anton Ahatov --- 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 643250c7b..1d8b09250 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -77,7 +77,7 @@ export default function Image() { ## Step 2: React рендерит ваш компонент {/*step-2-react-renders-your-components*/} -После запуска рендера React вызывает ваши компоненты, чтобы определить, что отобразить на экране. **"Рендеринг" — это обращение React к вашим компонентам*. +После запуска рендера React вызывает ваши компоненты, чтобы определить, что отобразить на экране. **«Рендеринг» — это обращение React к вашим компонентам*. * **На начальном рендере,** React вызовет корневой компонент. * **Для последующих рендерингов** React будет вызывать функцию компонента, обновление стейта которого вызвало рендеринг. From a5084bd7ce504aa624b8ec56a3b99c78aea33b44 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Mon, 22 May 2023 07:22:21 +0300 Subject: [PATCH 19/32] Update src/content/learn/render-and-commit.md Co-authored-by: Anton Ahatov --- 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 1d8b09250..9ddf4f2af 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -193,7 +193,7 @@ export default function App() { -Это работает, потому что в предыдущий раз, React обновил значение `

` с новым `time`. Он видит, что `` появляется в том же месте JSX, поэтому React не трогает ``— или его `value`! +Это работает, потому что в предыдущий раз React обновил значение `

` с новым `time`. Он видит, что `` появляется в том же месте JSX, поэтому React не трогает ``— или его `value`! ## Epilogue: Browser paint {/*epilogue-browser-paint*/} После того как рендеринг завершен и React обновил DOM, браузер перерисовывает экран. Хотя этот процесс известен как «браузерный рендеринг», мы будем называть его «рисованием», чтобы избежать путаницы в документации. From 6b72d5efef59315ea1f437da52b4e9136f28f5d4 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Mon, 22 May 2023 07:23:09 +0300 Subject: [PATCH 20/32] Update src/content/learn/render-and-commit.md Co-authored-by: Anton Ahatov --- 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 9ddf4f2af..c5cf92fc5 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -132,7 +132,7 @@ img { margin: 0 10px 10px 0; } Рендеринг всегда должен быть [чистым вычислением.](/learn/keeping-components-pure): * **Одни и те же входные данные, один и тот же результат.** При одинаковых входящих данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, то он не должен получить салат с луком!) -* **Своими делами заниматься.** Не изменять объекты или переменные, существовавшие до рендеринга. (Один заказ не должен изменять чей-либо другой заказ). +* **Занимается только своей задачей.** Не изменять объекты или переменные, существовавшие до рендеринга. (Один заказ не должен изменять чей-либо другой заказ). В противном случае вы можете столкнуться с непонятными ошибками и непредсказуемым поведением по мере роста сложности вашей кодовой базы. При разработке в "строгом режиме" React вызывает функцию каждого компонента дважды, что может помочь выявить ошибки, вызванные нечистыми функциями. From 7388007fa8ec1eaf632a8faf174404df95c410fc Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Mon, 22 May 2023 07:25:07 +0300 Subject: [PATCH 21/32] Update render-and-commit.md --- 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 c5cf92fc5..a6261aa0e 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -132,7 +132,7 @@ img { margin: 0 10px 10px 0; } Рендеринг всегда должен быть [чистым вычислением.](/learn/keeping-components-pure): * **Одни и те же входные данные, один и тот же результат.** При одинаковых входящих данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, то он не должен получить салат с луком!) -* **Занимается только своей задачей.** Не изменять объекты или переменные, существовавшие до рендеринга. (Один заказ не должен изменять чей-либо другой заказ). +* **Занимается только своей задачей.** Не изменять объекты или переменные, существовавшие до рендеринга. (Один заказ не должен влиять на другой заказ). В противном случае вы можете столкнуться с непонятными ошибками и непредсказуемым поведением по мере роста сложности вашей кодовой базы. При разработке в "строгом режиме" React вызывает функцию каждого компонента дважды, что может помочь выявить ошибки, вызванные нечистыми функциями. From 891a4467af9409526bc56e16d443d1483d01a45a Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 00:48:00 +0300 Subject: [PATCH 22/32] Update src/content/learn/render-and-commit.md --- 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 a6261aa0e..661cf0b98 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -80,7 +80,7 @@ export default function Image() { После запуска рендера React вызывает ваши компоненты, чтобы определить, что отобразить на экране. **«Рендеринг» — это обращение React к вашим компонентам*. * **На начальном рендере,** React вызовет корневой компонент. -* **Для последующих рендерингов** React будет вызывать функцию компонента, обновление стейта которого вызвало рендеринг. +* **Для последующих ре-рендеров** React вызовет функцию компонента, где обновился стейт и выполнит его ре-рендер. Этот процесс рекурсивен: если обновленный компонент возвращает какой-то другой компонент, React будет рендерить _этот_ компонент следующим, и если этот компонент тоже что-то возвращает, он будет рендерить _этот_ компонент следующим, и так далее. Этот процесс будет продолжаться до тех пор, пока не останется вложенных компонентов и React не будет точно знать, что должно быть отображено на экране. From 50a1849b0c25422179e5abeaaed46ff22983451a Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 00:48:11 +0300 Subject: [PATCH 23/32] Update src/content/learn/render-and-commit.md --- 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 661cf0b98..0eab2c8c1 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -146,7 +146,7 @@ img { margin: 0 10px 10px 0; } -## Step 3: React фиксирует изменения в DOM {/*step-3-react-commits-changes-to-the-dom*/} +## Часть 3: React фиксирует изменения в DOM {/*step-3-react-commits-changes-to-the-dom*/} После рендеринга (вызова) ваших компонентов React модифицирует DOM. From 13ff5d8623e0f2a7b665d209fb4b54cb25f2aae3 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 00:48:21 +0300 Subject: [PATCH 24/32] Update src/content/learn/render-and-commit.md --- 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 0eab2c8c1..6efab0cd4 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -194,7 +194,7 @@ export default function App() { Это работает, потому что в предыдущий раз React обновил значение `

` с новым `time`. Он видит, что `` появляется в том же месте JSX, поэтому React не трогает ``— или его `value`! -## Epilogue: Browser paint {/*epilogue-browser-paint*/} +## Заключительная часть: Браузерная отрисовка {/*epilogue-browser-paint*/} После того как рендеринг завершен и React обновил DOM, браузер перерисовывает экран. Хотя этот процесс известен как «браузерный рендеринг», мы будем называть его «рисованием», чтобы избежать путаницы в документации. From cf0261927eaa4d712a19f7a64a7b0d62459c5859 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 00:48:30 +0300 Subject: [PATCH 25/32] Update src/content/learn/render-and-commit.md --- 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 6efab0cd4..99734da36 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -75,7 +75,7 @@ export default function Image() { -## Step 2: React рендерит ваш компонент {/*step-2-react-renders-your-components*/} +## Часть 2: React рендерит ваш компонент {/*step-2-react-renders-your-components*/} После запуска рендера React вызывает ваши компоненты, чтобы определить, что отобразить на экране. **«Рендеринг» — это обращение React к вашим компонентам*. From e0440eb08438500b87cffc56b8e93f90f6037fec Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 00:48:44 +0300 Subject: [PATCH 26/32] Update src/content/learn/render-and-commit.md --- 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 99734da36..b890af3b3 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -29,7 +29,7 @@ title: Рендер и фиксация -## Step 1: Триггер рендера {/*step-1-trigger-a-render*/} +## Часть 1: Триггер рендера {/*step-1-trigger-a-render*/} Рендер компонента происходит по двум причинам: From c492d95aec5e3a92d8702a47b17cbb0f68433505 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 00:49:21 +0300 Subject: [PATCH 27/32] Update src/content/learn/render-and-commit.md Co-authored-by: Fedya Petrakov --- 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 b890af3b3..0c1e39c33 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -38,7 +38,7 @@ title: Рендер и фиксация ### Начальный рендер {/*initial-render*/} -Когда ваше приложение запускается, вам необходимо вызвать начальный рендеринг. Фреймворки и песочницы иногда скрывают этот код, но он выполняется вызовом функции [`createRoot`](/reference/react-dom/client/createRoot) с целевым узлом DOM, а затем вызывая его метод `render` вашим компонентом: +Когда ваше приложение запускается, вам необходимо запустить начальный рендеринг. Фреймворки и песочницы иногда скрывают этот код, но это делается вызовом функции [`createRoot`](/reference/react-dom/client/createRoot) с целевым DOM-узлом, а затем вызовом его метода `render` c вашим компонентом: From fcdc18a4684770d6613e81bff8da8f157b807594 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 00:50:28 +0300 Subject: [PATCH 28/32] Update src/content/learn/render-and-commit.md --- 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 0c1e39c33..667682927 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -67,7 +67,7 @@ export default function Image() { ### Ре-рендер, когда стейт обновляется {/*re-renders-when-state-updates*/} -После того как компонент был первоначально отрендерен, вы можете инициировать последующие рендеры, обновляя его состояние с помощью функции [`set`](/reference/react/useState#setstate) Обновление стейта компонента автоматически ставит его в очередь на рендер. (Вы можете представить это как посетителя ресторана, который после первого заказа заказывает чай, десерт и всевозможные вещи, в зависимости от состояния жажды или голода). +После того как компонент был первоначально отрендерен, вы можете инициировать последующие рендеры, обновляя его состояние с помощью функции [`set`](/reference/react/useState#setstate) Обновление состояние компонента автоматически ставит его в очередь на рендер. (Вы можете представить это как посетитель ресторана, который после первого заказа заказывает чай, десерт и всевозможные вещи, в зависимости от состояния жажды или голода). From 432458e3fc80377f36bf70a2ce311b253d11f877 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 00:50:36 +0300 Subject: [PATCH 29/32] Update src/content/learn/render-and-commit.md --- 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 667682927..76230316e 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -34,7 +34,7 @@ title: Рендер и фиксация Рендер компонента происходит по двум причинам: 1. Это его **начальный рендеринг.** -2. Его **стейт** (или стейт его родителя) **был обновлён.** +2. Его **состояние** (или состояние его родителя) **был обновлён.** ### Начальный рендер {/*initial-render*/} From e7da57f3cfa77e97c3c0d594ef0d8dd38acebfe6 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 00:50:49 +0300 Subject: [PATCH 30/32] Update src/content/learn/render-and-commit.md --- 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 76230316e..d99b3d61b 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -65,7 +65,7 @@ export default function Image() { Попробуйте закомментировать вызов `root.render()` и увидите, как компонент исчезнет! -### Ре-рендер, когда стейт обновляется {/*re-renders-when-state-updates*/} +### Ре-рендер, когда состояние обновляется {/*re-renders-when-state-updates*/} После того как компонент был первоначально отрендерен, вы можете инициировать последующие рендеры, обновляя его состояние с помощью функции [`set`](/reference/react/useState#setstate) Обновление состояние компонента автоматически ставит его в очередь на рендер. (Вы можете представить это как посетитель ресторана, который после первого заказа заказывает чай, десерт и всевозможные вещи, в зависимости от состояния жажды или голода). From 965a271720dc97da39d479809bff3cfee3cae728 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 10:21:20 +0300 Subject: [PATCH 31/32] Update src/content/learn/render-and-commit.md --- 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 d99b3d61b..0c55a5580 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -206,7 +206,7 @@ export default function App() { 1. Триггер 2. Рендеринг 3. Фиксация -* Вы можете использовать режим Strict Mode для поиска ошибок в ваших компонентах. +* Вы можете использовать режим Строгий режим для поиска ошибок в ваших компонентах. * React не трогает DOM, если результат рендеринга такой же, как и в прошлый раз. From 4ea73aff4cc2f4b008f0b28e255dfb4acbb40948 Mon Sep 17 00:00:00 2001 From: qq <79323963+rainyEra@users.noreply.github.com> Date: Tue, 23 May 2023 11:05:48 +0300 Subject: [PATCH 32/32] Update src/content/learn/render-and-commit.md Co-authored-by: Nick Tishkevich --- 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 0c55a5580..cb5ae5c75 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -206,7 +206,7 @@ export default function App() { 1. Триггер 2. Рендеринг 3. Фиксация -* Вы можете использовать режим Строгий режим для поиска ошибок в ваших компонентах. +* Вы можете использовать строгий режим для поиска ошибок в ваших компонентах. * React не трогает DOM, если результат рендеринга такой же, как и в прошлый раз.