ReactJS under the hoodПоршнева Катерина
2016
React re-renders the whole app on any data (state) change
DOM is slow, JavaScript is fast.
DOM is slow, JavaScript is fast.
Виртуальный DOM
Легковесная копия реального DOM в виде JavaScript объектов
Виртуальный DOM
<Nav color="blue"> <Profile> Katya </Profile> </Nav
React.createElement( Nav, {color:"blue"}, React.createElement( Profile, null, "Katya" ) );
до после
JSX
При каждом изменении
React строит новое виртуальное DOM-дерево
Сравнивает с предыдущим
Рассчитывает минимальное количество изменений DOM-дерева и добавляет их в очередь
Применяет все изменения к реальному DOM-дереву
• Эффективные алгоритмы сравнения
• Группировка операций чтения/записи при работе с DOM
• Эффективное обновление только под-деревьев
• Эффективная работа со списками элементов
Сравнение DOM-деревьев
Списки
Списки
Списки
Списки
а
а
b
b
с
сd
keys
var blog = articles.map(function(article) { return ( <div key={article.id}> <h1>{article.title}</h1> <p>{article.text}</p> </div> ); })
Batching
setState()
shouldComponentUpdate(nextProps, nextState) { return this.props.name !== nextProps.name; }
shouldComponentUpdate() === false
События
onClick
onClick
onClick
onClick
onClick
onClick
onClick
onClick
onClick
Делегирование событий
Спасибо за внимание!
😊