Transcript
React.js
Антон Артамонов
Мы хотим делать надежно1. Легко поддерживать
2. Легко развивать
3. Легко тестировать
4. Просто вникнуть
2
Надежно = предсказуемо
Веб до Ajax: 90-е• Страница генерируется каждый раз с нуля
• Внешний вид страницы определяется БД
• Результирующая страница не зависит от других запросов
• Информация на странице быстро устаревает
• Когда данные на странице устаревают, мы просто выбрасываем ее и
обновляем с сервера
4
Все было просто, пока не насталполный AJAX!
Single Page Application• Все запросы к серверу в рамках одной страницы
• Страница полностью генерируется в браузере клиента
• Состояние страницы определяется БД, текущим DOM-деревом и
внутренним состоянием фронтенда
• Мы постоянно изменяем состояние системы без запросов на сервер
• Результирующая страница зависит от всех запросов, событий
пользователя и тонны логики на клиенте
• Очень много состояния и событий на фронтенде
6
Мутации состояния с течением времени —корни всех бед
7
Amelia ушла оффлайн
Bryan ушел оффлайн
Steve теперь в сети
Bryan теперь в сети
Desmond отсутствует
Desmond теперь с мобильного
?
Мы должны делать все возможное, чтобы сократить концептуальную
пропасть между статической программой и динамическим процессом,
чтобы сделать соответствие между программой и процессом
настолько очевидным, насколько это возможно.
Эдсгер В. Дейкстра
“
15
А так?[
{name: 'Bryan', client: 'web', idle: false},
{name: 'Desmond', client: 'mobile', idle: true},
{name: 'Steve', client: 'online', idle: false}
]
01.
02.
03.
04.
05.
16
Реактивноепрограммирование
Реактивное программированиеa := 1
b := 2
c := a + b
a := 3
print c
01.
02.
03.
04.
05.
18
Пример• Bruen LLC 48.24%
• Reinger, Rolfson and Kilback 25.56%
• Bernier LLC 39.39%
19
Проблема №1: Javascript нереактивный
Проблема №2: Мы не можем простовыбросить DOM
React.jsБиблиотека для создания пользовательских интерфейсов. Рендерит UI
и отвечает за события. Создала команда Facebook и Instagram.
V в MVC.
Не накладывает ограничений на стек технологий и методы получения
данных.
23
Виртуальный DOM• Если что-то могло измениться, перерисовываем все компоненты в
виртуальный DOM
• Находим минимальный набор различий между текущей и виртуальной
версией DOM
• Изменяем в реальном DOM только то, что действительно изменилось
24
Да ладно, это же будет оченьмедленно!
Таким образом, React очень быстр изкоробки на большинстве задач
Но что делать, если этого недостаточно?1. Как ускорить Data Binding?
• Не использовать Data Binding.
• Переделывать приложение.
2. Как ускорить Virtual DOM?
• Кэширование!
• Добавляется уже к готовому приложению.
27
Кэширование в React:shouldComponentUpdate()var Foo = React.createClass({
shouldComponentUpdate: function (newProps, newState) {
return this.props.label != newProps.label;
}
...
}
01.
02.
03.
04.
05.
06.
28
Кэширование в React: PureRenderMixinvar Foo = React.createClass({
mixins: [PureRenderMixin]
...
}
01.
02.
03.
04.
29
React компонент —строительный блок UI, который включает в себя все связаные вещи, но
слабо связан с другими компонентами. Обладает полным
функционалом JS, а не урезанным, как в шаблонизаторах.
30
Почему React смешивает логику иразметку?
• У ViewModel и шаблона одна задача: вывести UI.
• Из-за этого они очень сильно связаны.
• Шаблоны не изолированы. Нет контрактов.
• Переиспользуемые компоненты.
• Unit-тестирование компонентов.
• Нет сложных абстракций.
31
JSX
Чистый JSvar HelloMessage = React.createClass({displayName: "HelloMessage",
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
}
});
React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);
01.
02.
03.
04.
05.
06.
07.
33
JSXvar HelloMessage = React.createClass({displayName: "HelloMessage",
render: function() {
return <div>Hello {this.props.name}</div> ;
}
});
React.render( <HelloMessage name="John" /> , mountNode);
01.
02.
03.
04.
05.
06.
07.
34
Трансляция JSX в JS в браузере<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
Рекомендуется использовать только во время разработки
01.
02.
03.
04.
35
Трансляция JSX в JS на сервере• Npm пакет react-tools
• Browserify с модулем reactify
• Webpack с лоадером jsx-loader
• и др.
36
Как избежать спагетти кода?Просто не пишите спагетти код.
1. Делить компоненты как можно мельче.
2. Компонент выполняет только одну задачу.
3. Данные передаются сверху вниз.
4. ???
5. PROFIT!
37
Строение компонента1. render()
2. getInitialState()
3. getDefaultProps()
4. propTypes
5. mixins
6. statics
7. displayName
38
Цикл жизни компонента1. Mounting: componentWillMount()
2. Mounting: componentDidMount()
3. Updating: componentWillReceiveProps()
4. Updating: shouldComponentUpdate()
5. Updating: componentWillUpdate()
6. Updating: componentDidUpdate()
7. Unmounting: componentWillUnmount()
39
Refs и findDOMNode()handleClick: function() {
React.findDOMNode(this.refs.myTextInput).focus();
},
<input type="text" ref="myTextInput" />
<input type="button" onClick={this.handleClick}/>
01.
02.
03.
01.
02.
40
Кто использует?• Khan Academy
• Netflix
• Yahoo
• Airbnb
• Sony
• Atlassian
• BBC
• и др.
41
Ключевые моменты• Компоненты, а не шаблоны.
• Перерендериваем DOM, а не производим мутации.
• Виртуальный DOM быстрый и простой.
42
просто != привычно
top related