diff --git a/content/docs/implementation-notes.md b/content/docs/implementation-notes.md index b345f7d5d..d9a72aca8 100644 --- a/content/docs/implementation-notes.md +++ b/content/docs/implementation-notes.md @@ -1,6 +1,6 @@ --- id: implementation-notes -title: Implementation Notes +title: Детали реализации layout: contributing permalink: docs/implementation-notes.html prev: codebase-overview.html @@ -9,93 +9,93 @@ redirect_from: - "contributing/implementation-notes.html" --- -This section is a collection of implementation notes for the [stack reconciler](/docs/codebase-overview.html#stack-reconciler). +В этой главе собраны примеры из реализации [согласователя Stack](/docs/codebase-overview.html#stack-reconciler). -It is very technical and assumes a strong understanding of React public API as well as how it's divided into core, renderers, and the reconciler. If you're not very familiar with the React codebase, read [the codebase overview](/docs/codebase-overview.html) first. +Они очень специфичны и требуют хорошего знания React API, а также ядра, рендереров и согласователя. Если вы не очень хорошо знакомы с архитектурой React, тогда изучите главу [Архитектура кодовой базы](/docs/codebase-overview.html), а затем вернитесь к этой. -It also assumes an understanding of the [differences between React components, their instances, and elements](/blog/2015/12/18/react-components-elements-and-instances.html). +Также предполагается, что вы понимаете [разницу между компонентами, их экземплярами и элементами в React](/blog/2015/12/18/react-components-elements-and-instances.html). -The stack reconciler was used in React 15 and earlier. It is located at [src/renderers/shared/stack/reconciler](https://github.com/facebook/react/tree/15-stable/src/renderers/shared/stack/reconciler). +Согласователь Stack использовался в React 15 и более ранних версиях. Его код находится в каталоге [src/renderers/shared/stack/reconciler](https://github.com/facebook/react/tree/15-stable/src/renderers/shared/stack/reconciler). -### Video: Building React from Scratch {#video-building-react-from-scratch} +### Видео: сборка React с нуля {#video-building-react-from-scratch} -[Paul O'Shannessy](https://twitter.com/zpao) gave a talk about [building React from scratch](https://www.youtube.com/watch?v=_MAD4Oly9yg) that largely inspired this document. +[Paul O'Shannessy](https://twitter.com/zpao) рассказал в своём докладе [как собрать React с нуля](https://www.youtube.com/watch?v=_MAD4Oly9yg), используя материал из этой главы. -Both this document and his talk are simplifications of the real codebase so you might get a better understanding by getting familiar with both of them. +В его докладе и этой главе описаны упрощённые реализации, поэтому, ознакомившись с ними, вы сможете лучше понять, как работает реальная реализация. -### Overview {#overview} +### Введение {#overview} -The reconciler itself doesn't have a public API. [Renderers](/docs/codebase-overview.html#renderers) like React DOM and React Native use it to efficiently update the user interface according to the React components written by the user. +Согласователь не имеет открытого API. [Рендереры](/docs/codebase-overview.html#renderers), такие как React DOM и React Native, используются, чтобы эффективно обновлять пользовательские UI-компоненты. -### Mounting as a Recursive Process {#mounting-as-a-recursive-process} +### Монтирование как рекурсивный процесс {#mounting-as-a-recursive-process} -Let's consider the first time you mount a component: +Давайте рассмотрим, как компонент монтируется в первый раз. ```js ReactDOM.render(, rootEl); ``` -React DOM will pass `` along to the reconciler. Remember that `` is a React element, that is, a description of *what* to render. You can think about it as a plain object: +React DOM передаст `` в согласователь. Запомните, что `` -- это React-элемент, т.е. описание того, что нужно отрендерить. Вы можете представлять его как просто объект. ```js console.log(); // { type: App, props: {} } ``` -The reconciler will check if `App` is a class or a function. +Согласователь будет проверять, чем является `App`: классом или функцией. -If `App` is a function, the reconciler will call `App(props)` to get the rendered element. +Если `App` -- функция, согласователь вызовет `App(props)`, чтобы получить элемент, который нужно отрендерить. -If `App` is a class, the reconciler will instantiate an `App` with `new App(props)`, call the `componentWillMount()` lifecycle method, and then will call the `render()` method to get the rendered element. +Если `App` -- класс, согласователь создаст экземпляр `App` с помощью `new App(props)`, вызовет метод жизненного цикла `componentWillMount()`, а затем вызовет `render()`, чтобы получить элемент, который нужно отрендерить. -Either way, the reconciler will learn the element `App` "rendered to". +В любом случае, согласователь изучит элемент `App`, чтобы узнать, что нужно отрендерить. -This process is recursive. `App` may render to a ``, `Greeting` may render to a `