Submit Search
Upload
«Оптимизируем React, не усложняя архитектуру», Вопиловский Константин, MoscowJS 21
•
0 likes
•
943 views
MoscowJS
Follow
«Оптимизируем React, не усложняя архитектуру», Вопиловский Константин, MoscowJS 21
Read less
Read more
Software
Report
Share
Report
Share
1 of 24
Download now
Download to read offline
Recommended
"Web Audio Api", Анатолий Найда, MoscowJS 27
"Web Audio Api", Анатолий Найда, MoscowJS 27
MoscowJS
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
MoscowJS
Виктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public API
MoscowJS
Favicon на стероидах
Favicon на стероидах
MoscowJS
E2E-тестирование мобильных приложений
E2E-тестирование мобильных приложений
MoscowJS
Reliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkey
MoscowJS
Basis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA Framework
MoscowJS
Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31
MoscowJS
Recommended
"Web Audio Api", Анатолий Найда, MoscowJS 27
"Web Audio Api", Анатолий Найда, MoscowJS 27
MoscowJS
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
MoscowJS
Виктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public API
MoscowJS
Favicon на стероидах
Favicon на стероидах
MoscowJS
E2E-тестирование мобильных приложений
E2E-тестирование мобильных приложений
MoscowJS
Reliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkey
MoscowJS
Basis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA Framework
MoscowJS
Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31
MoscowJS
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
MoscowJS
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
MoscowJS
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
MoscowJS
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
MoscowJS
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
MoscowJS
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
MoscowJS
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
MoscowJS
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
MoscowJS
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
MoscowJS
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
MoscowJS
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
MoscowJS
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
MoscowJS
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27
MoscowJS
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
MoscowJS
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
MoscowJS
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
MoscowJS
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
MoscowJS
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
MoscowJS
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
MoscowJS
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
MoscowJS
More Related Content
More from MoscowJS
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
MoscowJS
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
MoscowJS
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
MoscowJS
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
MoscowJS
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
MoscowJS
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
MoscowJS
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
MoscowJS
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
MoscowJS
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
MoscowJS
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
MoscowJS
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
MoscowJS
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
MoscowJS
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27
MoscowJS
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
MoscowJS
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
MoscowJS
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
MoscowJS
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
MoscowJS
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
MoscowJS
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
MoscowJS
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
MoscowJS
More from MoscowJS
(20)
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
«Оптимизируем React, не усложняя архитектуру», Вопиловский Константин, MoscowJS 21
1.
Оптимизация React.JS Вопиловский Константин KamaGames
Studio http://goo.gl/wjQwTn
2.
Зачем ? 2
3.
Виртуальный DOM ? 12162
HTML элементов за - 400ms 3
4.
Что ? 1. Создание
элементов 2. Изменение элементов 4
5.
5 Что ? 1. Создание
элементов 2. Изменение элементов
6.
6 Что ? 1. Создание
элементов 2. Изменение элементов
7.
7 Что ? 1. Создание
элементов 2. Изменение элементов
8.
8
9.
shouldComponentUpdate 9
10.
10 true false
11.
11
12.
? 12 true false
13.
? 13 true false
14.
? 14 true false Что делать ?
15.
15 for(var i in
this.refs) { this.refs[i].setState({}) } true false
16.
16 true false for(var i in
this.refs) { this.refs[i].setState({}) }
17.
17 var externalDataMexin =
{ //getExternalData: null, // function(nextProps, nextState) {return []}; //objectIsExternalData: false, _isChangeStateForExData: false, _externalData: [], componentDidMount: function () { var setState = this.setState; var self = this; this.setState = function(state, end) { if (self.isMounted()) { self._isChangeStateForExData = true; setState.call(self, state, end); }; }; if (this.getExternalData) { this._externalData = this.getExternalData(this.props, this.state); }; }, shouldComponentUpdate: function(nextProps, nextState) { var nextData = this.getExternalData ? this.getExternalData(nextProps, nextState) : null; var exData = this._externalData; var props = this.props; if (this._isChangeStateForExData) { this._isChangeStateForExData = false; if (nextData) { this._externalData = nextData; }; return true; }; for(var i in nextProps) { var nextProp = nextProps[i]; var prop = props[i]; if (nextProp === prop) { continue; }; if (this.objectIsExternalData && typeof nextProp === 'object' && typeof prop === 'object' && (!nextProp === !prop) ) { continue; }; if (nextData) { Закрепим результат https://github.com/vflash/externalDataMixin
18.
18
19.
19 1. state 2. props 3.
прочее
20.
20 1. state 2. props 3.
прочее this.setState = function(state, end) { this._isChangeStateForExData = true; setState.call(self, state, end); }; shouldComponentUpdate: function(nextProps, { ……… if (this._isChangeStateForExData) { this._isChangeStateForExData = false; return true; } ……. }
21.
21 1. state 2. props 3.
прочее shouldComponentUpdate: function(nextProps, { ……… for(var i in nextProps) { if (nextProps[i] === this.props[i]) { continue; }; return true; }; ……. }
22.
22 1. state 2. props 3.
прочее getExternalData: function(nextProps, nextState return [ nextProps.post.author.name, nextProps.post.text, nextProps.post.img ] }; shouldComponentUpdate: function(nextProps, n ……… var nextData = this.getExternalData(nextProp var exData = this._externalData; for (var j = nextData.length; j--;) { if (exData[j] !== nextData[j]) { this._externalData = nextData; return true; }; };
23.
23 1. state 2. props -
ещё 3. прочее new MyElement({ data: {name:”bla bla ba”, xxx: 777}, onChange: function() { } }) shouldComponentUpdate: function(nextProps, n ……… for (var i in nextProps) { ……… if (this.objectIsExternalData && (typeof nextProp === typeof prop) ) { continue; }; ……. }
24.
Вопросы Вопиловский Константин KamaGames Studio https://github.com/vflash/externalDataMixin за
- 3ms
Download now