-
Notifications
You must be signed in to change notification settings - Fork 391
Added page translation: basics -> rendering elements #11
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 4 commits
1800ae6
b449557
d6ccdca
30e717c
c54f04a
80c9393
9bd71ae
532aaab
69bca29
6518971
2723ec7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,75 +1,75 @@ | ||||||
--- | ||||||
id: rendering-elements | ||||||
title: Rendering Elements | ||||||
title: Рендеринг элементов | ||||||
permalink: docs/rendering-elements.html | ||||||
redirect_from: | ||||||
- "docs/displaying-data.html" | ||||||
prev: introducing-jsx.html | ||||||
next: components-and-props.html | ||||||
--- | ||||||
|
||||||
Elements are the smallest building blocks of React apps. | ||||||
Элементы — мельчайшие кирпичики React-приложениях. | ||||||
|
||||||
An element describes what you want to see on the screen: | ||||||
Элемент опысывает то, что вы хотите увидеть на экране: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. опечатка: описывает |
||||||
|
||||||
```js | ||||||
const element = <h1>Hello, world</h1>; | ||||||
``` | ||||||
|
||||||
Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. | ||||||
В отличии от DOM-элементов, элементы React — это простые объекты, не отнимающие много ресурсов. React DOM обновляет DOM, чтобы он соотвествовал элементам React. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Может «соответствовал переданным React-элементам». По-моему так чуть понятнее. |
||||||
|
||||||
>**Note:** | ||||||
>**Примечание:** | ||||||
> | ||||||
>One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead. | ||||||
>Элементы можно перепутать с более известной концепцией "компонентов". С компонентами мы ознакомимся в [следующей главе](/docs/components-and-props.html). Элементы — это то, "из чего сделаны" компоненты, и мы рекомендуем вам дочитать эту главу, прежде чем двигаться дальше. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Пожалуйста кавычки-ёлочки здесь (я не уверен, сделает ли их сайт автоматом) |
||||||
|
||||||
## Rendering an Element into the DOM {#rendering-an-element-into-the-dom} | ||||||
## Как отрисовать элемент в DOM {#rendering-an-element-into-the-dom} | ||||||
|
||||||
Let's say there is a `<div>` somewhere in your HTML file: | ||||||
Дапустим, в вашем HTML-файле есть `<div>`: | ||||||
|
||||||
```html | ||||||
<div id="root"></div> | ||||||
``` | ||||||
|
||||||
We call this a "root" DOM node because everything inside it will be managed by React DOM. | ||||||
Мы называем его "корневым" узлом DOM, так как всё, что находится в нём, будет управляться React DOM. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Мне кажется по-русски «мы назовём» лучше тут |
||||||
|
||||||
Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. | ||||||
Обычно в приложения, написанных польностью на React, есть только один единственный корневой элемент. Если вы хотите использовать React в существующем приложении, то вы можете создать столько независимых корневых элементов, сколько посчитаете нужным. | ||||||
|
||||||
To render a React element into a root DOM node, pass both to `ReactDOM.render()`: | ||||||
Чтобы отрисовать React-элемент в корневой узел DOM, вызовите `ReactDOM.render()` с React-элементом и корневым DOM узлом в качестве аргументов: | ||||||
|
||||||
`embed:rendering-elements/render-an-element.js` | ||||||
|
||||||
[](codepen://rendering-elements/render-an-element) | ||||||
|
||||||
It displays "Hello, world" on the page. | ||||||
На странице будет написано "Hello, world". | ||||||
|
||||||
## Updating the Rendered Element {#updating-the-rendered-element} | ||||||
## Обновление отрисованных элементов {#updating-the-rendered-element} | ||||||
|
||||||
React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. | ||||||
Элементы React [иммутабельны](https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82). После создания элемента, нельзя изменить его потомков или аттрибуты. Элемент похож на единичный кадр в фильме: он отразает состояние интерфейса в конкретный момент времени. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. «Единичный» звучит странно, синоним попроще? |
||||||
|
||||||
With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`. | ||||||
Пока что, мы знаем только один способ обновить интерфейс — это создать новый элемент и передать его в `ReactDOM.render()`. | ||||||
|
||||||
Consider this ticking clock example: | ||||||
Рассмотрим пример с часами: | ||||||
|
||||||
`embed:rendering-elements/update-rendered-element.js` | ||||||
|
||||||
[](codepen://rendering-elements/update-rendered-element) | ||||||
|
||||||
It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. | ||||||
В примере выше `ReactDOM.render()` вызывается каждую секунду с помощью колбэка [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. «В этом примере» |
||||||
|
||||||
>**Note:** | ||||||
>**Примечание:** | ||||||
> | ||||||
>In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html). | ||||||
>На практике, большинство React-приложений вызывают `ReactDOM.render()` только один раз. В следующем разделе вы узнаете как создать [компонент с состоянием](/docs/state-and-lifecycle.html). | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Тут теряется логическая связь предложений. Непонятно, при чем тут компонент с состоянием. |
||||||
> | ||||||
>We recommend that you don't skip topics because they build on each other. | ||||||
>Мы рекомендуем не пропускать разделы, поскольку в них используется информация из предыдущих разделов. | ||||||
|
||||||
## React Only Updates What's Necessary {#react-only-updates-whats-necessary} | ||||||
## React обновляет только то, что необходимо {#react-only-updates-whats-necessary} | ||||||
|
||||||
React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. | ||||||
React DOM сравнивает элемент и его потомков с отображаемым на странице и вносит в DOM только те изменения, которые необходимы, чтобы на странице оказался новый элемент. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Можно «с предыдущей версией» или что-то ещё, чтобы избежать некорректного вывода что реакт сравнивает с DOM? |
||||||
|
||||||
You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools: | ||||||
Вы можете убедиться в этом на [последнем примере](codepen://rendering-elements/update-rendered-element) с помощью инструментов разработчика в браузере: | ||||||
|
||||||
 | ||||||
 | ||||||
|
||||||
Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. | ||||||
Несмотря на то, что мы создаем элемент, описывающий все дерево пользовательского интерфейса, каждую секунду React DOM изменяет только текстовый узел, содержимое которого изменилось. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. «Дерево пользовательского интерфейса» очень длинно. Предлагаю UI-дерево. У нас UI будет часто встречаться. |
||||||
|
||||||
In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs. | ||||||
Наш опыт подсказывает, что при реализации изменений в интерфейсе возникает много ошибок. Их можно избежать, если думать о том, как должно выглядеть приложение, а не как внести изменения. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Это непонятно. «Реализация изменений в интерфейсе» это во-первых три существительных, а во-вторых кажется что речь про изменение кода. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Предлагаю:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
приложений