React - это JavaScript библиотека для построения пользовательских интерфейсов с отличной производительностью. В данном докладе я постараюсь рассказать, как работает React изнутри. Вы узнаете, что такое Виртуальный DOM и как он работает, что именно происходит после вызова setState в компоненте, как работает Diff-алгоритм, что такое Batching и как в React построена система событий.

1. ReactJS under the hood
Поршнева Катерина
2016

3. React re-renders the whole app on any data
(state) change

4. DOM is slow, JavaScript is fast.

5. DOM is slow, JavaScript is fast.

6. Виртуальный DOM

7. Легковесная копия реального DOM в
виде JavaScript объектов
Виртуальный DOM

8. <Nav color="blue">
<Profile>
Katya
</Profile>
</Nav
React.createElement(
Nav,
{color:"blue"},
React.createElement(
Profile,
null,
"Katya"
)
);
до после
JSX

9. При каждом изменении
React строит новое виртуальное DOM-дерево
Сравнивает с предыдущим
Рассчитывает минимальное количество изменений
DOM-дерева и добавляет их в очередь
Применяет все изменения к реальному DOM-дереву

10. • Эффективные алгоритмы сравнения
• Группировка операций чтения/записи при
работе с DOM
• Эффективное обновление только под-деревьев
• Эффективная работа со списками элементов

11. Сравнение DOM-деревьев

14. Списки

15. Списки

16. Списки

17. Списки
а
а
b
b
с
сd
keys

18. var blog = articles.map(function(article) {
return (
<div key={article.id}>
<h1>{article.title}</h1>
<p>{article.text}</p>
</div>
);
})

19. Batching

20. setState()

23. shouldComponentUpdate(nextProps, nextState) {
return this.props.name !== nextProps.name;
}

24. shouldComponentUpdate()
=== false

25. События

26. onClick
onClick
onClick
onClick
onClick
onClick
onClick
onClick
onClick
Делегирование событий

27. Спасибо за внимание!
😊