8.0 KiB
| id | title | permalink | prev | next |
|---|---|---|---|---|
| displaying-data | Отображение данных | displaying-data.html | why-react.html | jsx-in-depth.html |
Главная задача интерфейса — это отображать данные. React делает это легко и обновляет интерфейс сразу, как только изменятся данные.
Начало
Давайте рассмотрим простой пример. Создайте файл hello-react.html со следующим текстом:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Ваш код будет здесь! **
</script>
</body>
</html>
Добавим в этот шаблон немного JavaScript. Замените комментарий на следующий JSX-код:
var HelloWorld = React.createClass({
render: function() {
return (
<p>
Hello, <input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function() {
ReactDOM.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 500);
Реактивные обновления
Откройте hello-react.html в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые пол-секунды обновляется время, остальные же части страницы остаются без изменений. Вот так, не написав ни строчки кода, наша страница уже обладает своим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости.
Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать
Передаваемые в компонент данные называются props — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Можно считать props неизменяемыми внутри компонента, но никогда сами не меняйте их значения.
Компоненты как функции
Компоненты React довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе props и state (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.
Замечание:
Есть одно ограничение: React компоненты умеют возвращать только один узел. Если вам надо вернуть сразу несколько - они должны быть обернуты в один корневой узел.
JSX синтаксис
Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу.
Мы решили, что лучшим вариантом будет генерировать HTML и деревья компонентов прямо из JS кода. Так вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.
А чтобы упростить создание узлов дерева, мы ввели опциональный HTML-подобный синтаксис.
JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML. Для генерации ссылки в React вы напишете на чистом JavaScript:
React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')
С JSX это станет:
<a href="https://facebook.github.io/react/">Hello!</a>
Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис. Но у каждого свои привычки в работе, поэтому стоит сказать, что JSX необязателен при работе с React.
JSX сам по себе очень мал. Чтобы узнать о нем больше, посмотрите на JSX в детелях. Или можете испытать его через Babel REPL.
JSX похож на HTML, но не повторяет его. Посмотрите подводные камни JSX чтобы понять их ключевые различия.
Babel предлагает несколько способов начать работу с JSX, от консольных утилит до интеграций с Ruby on Rails. Выберете тот инструмент, который лучше всего вам подходит.
React без использования JSX
JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию React.createElement, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов.
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));
Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать React-элементы из ваших собственных компонентов.
var Factory = React.createFactory(ComponentClass);
...
var root = Factory({ custom: 'prop' });
ReactDOM.render(root, document.getElementById('example'));
А для базовых HTML тегов в React уже есть встроенные фабрики:
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);