Доклад "React under the hood"
-
Upload
kateryna-porshnieva -
Category
Technology
-
view
302 -
download
8
Transcript of Доклад "React under the hood"
![Page 1: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/1.jpg)
ReactJS under the hoodПоршнева Катерина
2016
![Page 2: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/2.jpg)
![Page 3: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/3.jpg)
React re-renders the whole app on any data (state) change
![Page 4: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/4.jpg)
DOM is slow, JavaScript is fast.
![Page 5: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/5.jpg)
DOM is slow, JavaScript is fast.
![Page 6: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/6.jpg)
Виртуальный DOM
![Page 7: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/7.jpg)
Легковесная копия реального DOM в виде JavaScript объектов
Виртуальный DOM
![Page 8: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/8.jpg)
<Nav color="blue"> <Profile> Katya </Profile> </Nav
React.createElement( Nav, {color:"blue"}, React.createElement( Profile, null, "Katya" ) );
до после
JSX
![Page 9: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/9.jpg)
При каждом изменении
React строит новое виртуальное DOM-дерево
Сравнивает с предыдущим
Рассчитывает минимальное количество изменений DOM-дерева и добавляет их в очередь
Применяет все изменения к реальному DOM-дереву
![Page 10: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/10.jpg)
• Эффективные алгоритмы сравнения
• Группировка операций чтения/записи при работе с DOM
• Эффективное обновление только под-деревьев
• Эффективная работа со списками элементов
![Page 11: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/11.jpg)
Сравнение DOM-деревьев
![Page 12: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/12.jpg)
![Page 13: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/13.jpg)
![Page 14: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/14.jpg)
Списки
![Page 15: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/15.jpg)
Списки
![Page 16: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/16.jpg)
Списки
![Page 17: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/17.jpg)
Списки
а
а
b
b
с
сd
keys
![Page 18: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/18.jpg)
var blog = articles.map(function(article) { return ( <div key={article.id}> <h1>{article.title}</h1> <p>{article.text}</p> </div> ); })
![Page 19: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/19.jpg)
Batching
![Page 20: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/20.jpg)
setState()
![Page 21: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/21.jpg)
![Page 22: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/22.jpg)
![Page 23: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/23.jpg)
shouldComponentUpdate(nextProps, nextState) { return this.props.name !== nextProps.name; }
![Page 24: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/24.jpg)
shouldComponentUpdate() === false
![Page 25: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/25.jpg)
События
![Page 26: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/26.jpg)
onClick
onClick
onClick
onClick
onClick
onClick
onClick
onClick
onClick
Делегирование событий
![Page 27: Доклад "React under the hood"](https://reader033.fdocuments.us/reader033/viewer/2022042510/587a15fc1a28abb4238b5357/html5/thumbnails/27.jpg)
Спасибо за внимание!
😊