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.

JS Lab2017_Lightning Talks_React Perfomance

81 views

Published on

JS Lab2017, 25 марта, Одесса
Lightning Talks
React Perfomance (Максим Кудла)
Все материалы: http://jslab.in.ua/
Организаторы: http://geekslab.org.ua/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JS Lab2017_Lightning Talks_React Perfomance

  1. 1. React Performance Is syntactic sugar so sweet?
  2. 2. How does React work? 2
  3. 3. How does React work? class Avatar extends Component { render () { return ( <img src="./public/avatar.png" {...this.props} /> ) } } 3
  4. 4. How does React work? class Avatar extends Component { render () { return ( <img src="./public/avatar.png" {...this.props} /> ) } } 3
  5. 5. How does React work? class Avatar extends Component { render () { return ( <img src="./public/avatar.png" {...this.props} /> ) } } 3
  6. 6. How does React work? class Avatar extends Component { render () { return ( <img src="./public/avatar.png" {...this.props} /> ) } } 3
  7. 7. How does React work? var Avatar = function (_Component) { _inherits(Avatar, _Component); function Avatar() { _classCallCheck(this, Avatar); return _possibleConstructorReturn(this, (Avatar.__proto__ || Object.getPrototypeOf(Avatar)).apply(this, arguments)); } _createClass(Avatar, [{ key: "render", value: function render() { return React.createElement( "img", _extends({ src: "./public/avatar.png" }, this.props) ); } }]); 4
  8. 8. React Perf tool 5
  9. 9. React Perf tool 6
  10. 10. React Perf tool class Avatar extends Component { render () { return ( <img src="./public/avatar.png" {...this.props} /> ) } } 7
  11. 11. React Perf tool class Avatar extends Component { render () { return ( <img src="./public/avatar.png" {...this.props} /> ) } } 7
  12. 12. React Perf tool class Avatar extends Component { render () { return ( <img src="./public/avatar.png" {...this.props} /> ) } } 7
  13. 13. React Perf tool class Avatar extends Component { render () { return ( <img src="./public/avatar.png" {...this.props} /> ) } } 7
  14. 14. Styling 8
  15. 15. Styling class Avatar extends PureComponent { render () { return <img src="./public/avatar.png" {...this.props} /> } } 9
  16. 16. Styling class Avatar extends PureComponent { render () { return <img src="./public/avatar.png" {...this.props} /> } } class Styling extends PureComponent { render () { return <Avatar style={{width: '100px'}} /> } } 9
  17. 17. Styling class Avatar extends PureComponent { render () { return <img src="./public/avatar.png" {...this.props} /> } } class Styling extends PureComponent { render () { return <Avatar style={{width: '100px'}} /> } } 9
  18. 18. Styling class Avatar extends PureComponent { render () { return <img src="./public/avatar.png" {...this.props} /> } } 10
  19. 19. Styling class Avatar extends PureComponent { render () { return <img src="./public/avatar.png" {...this.props} /> } } const style = {width: '100px'} class StylingFixed extends PureComponent { render () { return <Avatar style={style} /> } } 10
  20. 20. Styling class Avatar extends PureComponent { render () { return <img src="./public/avatar.png" {...this.props} /> } } const style = {width: '100px'} class StylingFixed extends PureComponent { render () { return <Avatar style={style} /> } } 10
  21. 21. Inline handler 11
  22. 22. Inline handler class Avatar extends PureComponent { render () { return <img src="./public/avatar.png" {...this.props} /> } } 12
  23. 23. Inline handler class Avatar extends PureComponent { render () { return <img src="./public/avatar.png" {...this.props} /> } } class InlineHandler extends PureComponent { render () { return <Avatar onClick={()=>{this.setState({clicked:true})}} /> } } 12
  24. 24. Inline handler class Avatar extends PureComponent { render () { return <img src="./public/avatar.png" {...this.props} /> } } class InlineHandler extends PureComponent { render () { return <Avatar onClick={()=>{this.setState({clicked:true})}} /> } } 12
  25. 25. Inline handler var InlineHandler = function (_PureComponent) { _inherits(InlineHandler, _PureComponent); function InlineHandler() { _classCallCheck(this, InlineHandler); return _possibleConstructorReturn(this, (InlineHandler.__proto__ || Object.getPrototypeOf(InlineHandler)).apply(this, arguments)); } _createClass(InlineHandler, [{ key: "render", value: function render() { var _this2 = this; return React.createElement( "div", null, React.createElement(Avatar, { onClick: function onClick() { _this2.setState({ clicked: true }); } }) ); } }]); return InlineHandler; } 13
  26. 26. Inline handler class InlineHandlerFixed extends PureComponent { constructor (props, context) { super(props, context); this.handleClick = this.handleClick.bind(this) } handleClick () { this.setState({ clicked:true }) } render () { return <Avatar onClick={this.handleClick} /> } } 14
  27. 27. Inline handler class InlineHandlerFixed extends PureComponent { constructor (props, context) { super(props, context); this.handleClick = this.handleClick.bind(this) } handleClick () { this.setState({ clicked:true }) } render () { return <Avatar onClick={this.handleClick} /> } } 14
  28. 28. Composition 15
  29. 29. Composition class Select extends PureComponent { render () { return ( <div> {this.props.children} </div> ) } } class Option extends PureComponent { render () { return ( <span>{this.props.title}</span> ) } } 16
  30. 30. Composition class Composition extends PureComponent { handleUpdate = () => { this.forceUpdate() } render() { return ( <div> <button onClick={this.handleUpdate}>Update</button> <Select> <Option title="Title 1" /> <Option title="Title 2" /> <Option title="Title 3" /> <Option title="Title 4" /> <Option title="Title 5" /> </Select> </div> ); } } 17
  31. 31. Composition class Composition extends PureComponent { handleUpdate = () => { this.forceUpdate() } render() { return ( <div> <button onClick={this.handleUpdate}>Update</button> <Select> <Option title="Title 1" /> <Option title="Title 2" /> <Option title="Title 3" /> <Option title="Title 4" /> <Option title="Title 5" /> </Select> </div> ); } } 17
  32. 32. Composition class WrappedSelect extends PureComponent { static propTypes = { options: PropTypes.array } render () { return ( <Select> { this.props.options.map((option) => ( <Option key={option} title={option} /> )) } </Select> ) } } 18
  33. 33. Composition class CompositionFixed extends PureComponent { constructor (props, context) { super(props, context) this.state = { options: ["Title 1", "Title 2", "Title 3", "Title 4", "Title 5"] } } handleUpdate = () => { this.forceUpdate() } render () { return ( <div> <button onClick={this.handleUpdate}>Update</button> <WrappedSelect options={this.state.options}/> </div> ) } } 19
  34. 34. Composition class CompositionFixed extends PureComponent { constructor (props, context) { super(props, context) this.state = { options: ["Title 1", "Title 2", "Title 3", "Title 4", "Title 5"] } } handleUpdate = () => { this.forceUpdate() } render () { return ( <div> <button onClick={this.handleUpdate}>Update</button> <WrappedSelect options={this.state.options}/> </div> ) } } 19
  35. 35. Conditional Rendering 20
  36. 36. Conditional Rendering class ConditionalRendering extends PureComponent { constructor (props, context) { super(props, context); this.state = { list: range(1,100000) } } handleUpdate = () => { this.forceUpdate() } render () { return ( <div> <button onClick={this.handleUpdate}>Update</button> { this.state.list.map((item) => ( <h1 key={item}>{item}</h1> )) } </div> ) } } 21
  37. 37. Conditional Rendering class ConditionalRendering extends PureComponent { constructor (props, context) { super(props, context); this.state = { list: range(1,100000) } } handleUpdate = () => { this.forceUpdate() } render () { return ( <div> <button onClick={this.handleUpdate}>Update</button> { this.state.list.map((item) => ( <h1 key={item}>{item}</h1> )) } </div> ) } } 21
  38. 38. Conditional Rendering class List extends PureComponent { static propTypes = { list: PropTypes.array } render () { return ( <div> { this.props.list.map((item) => ( <h1 key={item}>{item}</h1> )) } </div> ) } } 22
  39. 39. Conditional Rendering class ConditionalRenderingFixed extends PureComponent { constructor (props, context) { super(props, context); this.state = { list: range(1,100000) } } handleUpdate = () => { this.forceUpdate() } render () { return ( <div> <button onClick={this.handleUpdate}>Update</button> <List list={this.state.list}/> </div> ) } } 23
  40. 40. Conditional Rendering class ConditionalRenderingFixed extends PureComponent { constructor (props, context) { super(props, context); this.state = { list: range(1,100000) } } handleUpdate = () => { this.forceUpdate() } render () { return ( <div> <button onClick={this.handleUpdate}>Update</button> <List list={this.state.list}/> </div> ) } } 23
  41. 41. Const Component 24
  42. 42. Conditional Rendering class ConstComponent extends PureComponent { handleClick = () => { this.forceUpdate() } render() { return ( <div> <button onClick={this.handleClick}>Update</button> <Const value={1} /> <Const value={1} /> <Const value={1} /> ... 10 000 ... </div> ) } } 25
  43. 43. Conditional Rendering class ConstComponent extends PureComponent { handleClick = () => { this.forceUpdate() } render() { return ( <div> <button onClick={this.handleClick}>Update</button> <Const value={1} /> <Const value={1} /> <Const value={1} /> ... 10 000 ... </div> ) } } 25
  44. 44. Conditional Rendering const component = <Const value={1} /> class ConstComponentFixed extends PureComponent { handleClick = () => { this.forceUpdate() } render() { return ( <div> <button onClick={this.handleClick}>Update</button> {component} {component} {component} ... 10 000 ... </div> ) } } 26
  45. 45. Conditional Rendering const component = <Const value={1} /> class ConstComponentFixed extends PureComponent { handleClick = () => { this.forceUpdate() } render() { return ( <div> <button onClick={this.handleClick}>Update</button> {component} {component} {component} ... 10 000 ... </div> ) } } 26
  46. 46. Спасибо за Внимание! @maxkudla 27

×