Доклад "React under the hood"

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

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

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

😊