«Оптимизируем 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