Successfully reported this slideshow.

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

0

Share

1 of 24
1 of 24

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

0

Share

Download to read offline

Description

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

Transcript

  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

Description

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

Transcript

  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

More Related Content

More from MoscowJS

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×