amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update 02-displaying-data.ru-RU

Browse Source 
Многие предложения перестроены, добавлены запятые
This commit is contained in:
Andrey Safronov
2016-05-02 18:43:26 +04:00
parent 03985d5635
commit c4392e5f56
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/02-displaying-data.ru-RU.md
View File

@@ -1,12 +1,12 @@
---
id: displaying-data
title: Ввывод данных
title: Отображение данных
permalink: displaying-data.html
prev: why-react.html
next: jsx-in-depth.html
---
Самое основное что ты можешь сделать с помомщью интерфейса — это показать данные. React делает вывод данных простым и меняет интерфейс сразу, как только данные изменятся.
Главная задача интерфейса — это отображать данные. React делает это легко и обновляет интерфейс сразу, как только изменятся данные.
## Начало
@@ -33,7 +33,7 @@ next: jsx-in-depth.html
</html>
```
Далее мы сфокусируемся на JavaScript коде и вставим его в наш шаблон. Замените комментарий выше на следующий JSX-код:
Добавим в этот шаблон немного JavaScript. Замените комментарий на следующий JSX-код:
```javascript
var HelloWorld = React.createClass({
@@ -57,27 +57,27 @@ setInterval(function() {
## Реактивные обновления
Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Заметьте что в интерефейсе React меняет только время — всё что вы вводите не пропадает и не меняется, хотя вы даже не написали ни строчки кода для такого его поведения. React отлично понимает что ему надо делать и делает это правильно.
Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые пол-секунды обновляется время, остальные же части страницы остаются без изменений. Вот так, не написав ни строчки кода, наша страница уже обладает своим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости.
Дело в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать**
Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать**
Введенные в компонент данные называются `props` — сокращенно от "properties". Они передаются как атрибуты в JSX коде. Вы можете считать их неизменяемыми внутри компонента, но **никогда не пишите `this.props`**.
Передаваемые в компонент данные называются `props` — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Можно считать `props` неизменяемыми внутри компонента, но **никогда сами не меняйте их значения**.
## Компоненты как функции
Компоненты React чрезвычайно просты. Вы можете считать их простыми функциями, которые принимают `props` и `state` (см. ниже) и отрисовывают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.
Компоненты React довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе `props` и `state` (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.
> Замечание:
>
> **Есть одно ограничение**: React компоненты могут отрисовывать только один корневой узел. Если вам надо вернуть сразу несколько узлов - они *должны* быть обернуты в один корневой узел.
> **Есть одно ограничение**: React компоненты умеют возвращать только один узел. Если вам надо вернуть сразу несколько - они *должны* быть обернуты в один корневой узел.
## JSX синтаксис
Мы убеждены что компоненты — самый подходящий способ разделения отвественностей, и более удобный чем "шаблоны" и "логика вывода". Мы считаем, что разметка и код, который её генерирует взаимосвязаны и неотделимы друг от друга. Плюс, логика вывода часто бывает запутанной и использование шаблонизаторов чтобы описать её только затрудняет работу.
Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу.
Мы решили, что самым лучшим вариантом будет — генерировать HTML и деревья компонентов прямо из JS кода. Так что вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.
Мы решили, что лучшим вариантом будет генерировать HTML и деревья компонентов прямо из JS кода. Так вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.
Так, чтобы упростить создание узлов дерева в React, мы ввели простой **опциональный** HTML-подобный синтаксис.
А чтобы упростить создание узлов дерева, мы ввели **опциональный** HTML-подобный синтаксис.
**JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML**. Для генерации ссылки в React вы напишете на чистом JavaScript:
@@ -87,9 +87,9 @@ setInterval(function() {
`<a href="https://facebook.github.io/react/">Hello!</a>`
Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис, но у каждого свои привычки в работе, поэтому **JSX необязателен при работе с React.**
Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис. Но у каждого свои привычки в работе, поэтому стоит сказать, что **JSX необязателен при работе с React.**
JSX очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](/react/docs/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https://babeljs.io/repl/).
JSX сам по себе очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](/react/docs/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https://babeljs.io/repl/).
JSX похож на HTML, но не повторяет его. Посмотрите [подводные камни JSX](/react/docs/jsx-gotchas.html) чтобы понять их ключевые различия.
@@ -97,7 +97,7 @@ JSX похож на HTML, но не повторяет его. Посмотри
## React без использования JSX
JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов.
JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов.
```javascript
var child1 = React.createElement('li', null, 'First Text Content');
@@ -106,7 +106,7 @@ var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));
```
Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать элементы из ваших собственных компонентов.
Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать React-элементы из ваших собственных компонентов.
```javascript
var Factory = React.createFactory(ComponentClass);
@@ -115,7 +115,7 @@ var root = Factory({ custom: 'prop' });
ReactDOM.render(root, document.getElementById('example'));
```
В React уже есть встроенные фабрики для базовых HTML тегов:
А для базовых HTML тегов в React уже есть встроенные фабрики:
```javascript
var root = React.DOM.ul({ className: 'my-list' },