Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Оптимизация React.JS
Вопиловский Константин
KamaGames Studio http://goo.gl/wjQwTn
Зачем ?
2
Виртуальный DOM ?
12162 HTML элементов
за - 400ms
3
Что ?
1. Создание элементов
2. Изменение элементов
4
5
Что ?
1. Создание элементов
2. Изменение элементов
6
Что ?
1. Создание элементов
2. Изменение элементов
7
Что ?
1. Создание элементов
2. Изменение элементов
8
shouldComponentUpdate
9
10
true
false
11
?
12
true
false
?
13
true
false
?
14
true
false
Что делать ?
15
for(var i in this.refs) {
this.refs[i].setState({})
}
true
false
16
true
false
for(var i in this.refs) {
this.refs[i].setState({})
}
17
var externalDataMexin = {
//getExternalData: null, // function(nextProps, nextState) {return []};
//objectIsExternalDat...
18
19
1. state
2. props
3. прочее
20
1. state
2. props
3. прочее
this.setState = function(state, end) {
this._isChangeStateForExData = true;
setState.call(s...
21
1. state
2. props
3. прочее
shouldComponentUpdate: function(nextProps,
{
………
for(var i in nextProps) {
if (nextProps[i]...
22
1. state
2. props
3. прочее
getExternalData: function(nextProps, nextState
return [
nextProps.post.author.name,
nextPro...
23
1. state
2. props
- ещё
3. прочее
new MyElement({
data: {name:”bla bla ba”, xxx: 777},
onChange: function() {
}
})
shou...
Вопросы
Вопиловский Константин
KamaGames Studio
https://github.com/vflash/externalDataMixin
за - 3ms
Upcoming SlideShare
Loading in …5
×

«Оптимизируем React, не усложняя архитектуру», Вопиловский Константин, MoscowJS 21

885 views

Published on

«Оптимизируем React, не усложняя архитектуру», Вопиловский Константин, MoscowJS 21

Published in: Software
  • Login to see the comments

  • Be the first to like this

«Оптимизируем React, не усложняя архитектуру», Вопиловский Константин, MoscowJS 21

  1. 1. Оптимизация React.JS Вопиловский Константин KamaGames Studio http://goo.gl/wjQwTn
  2. 2. Зачем ? 2
  3. 3. Виртуальный DOM ? 12162 HTML элементов за - 400ms 3
  4. 4. Что ? 1. Создание элементов 2. Изменение элементов 4
  5. 5. 5 Что ? 1. Создание элементов 2. Изменение элементов
  6. 6. 6 Что ? 1. Создание элементов 2. Изменение элементов
  7. 7. 7 Что ? 1. Создание элементов 2. Изменение элементов
  8. 8. 8
  9. 9. shouldComponentUpdate 9
  10. 10. 10 true false
  11. 11. 11
  12. 12. ? 12 true false
  13. 13. ? 13 true false
  14. 14. ? 14 true false Что делать ?
  15. 15. 15 for(var i in this.refs) { this.refs[i].setState({}) } true false
  16. 16. 16 true false for(var i in this.refs) { this.refs[i].setState({}) }
  17. 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. 18
  19. 19. 19 1. state 2. props 3. прочее
  20. 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. 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. 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. 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. 24. Вопросы Вопиловский Константин KamaGames Studio https://github.com/vflash/externalDataMixin за - 3ms

×