O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

React Performance

234 visualizações

Publicada em

Is syntactic sugar so sweet?

Publicada em: Software
  • Seja o primeiro a comentar

React Performance

  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

×