React Perf Tool - Combine component

by wuct

HTML

<script src="https://unpkg.com/eventemitter2/lib/eventemitter2.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

<div id="root"></div>

Babel + JSX

class Dark extends React.Component {
  render() {
    return <div>dark</div>
  }
}

class Light extends React.Component {
  render() {
    return <div>light</div>
  }
}

class Content extends React.Component {
  render() {
    return <div>{this.props.theme}</div>
  }
}

class App extends React.Component {
  state = { theme: 'light' }
  
  render() {
    return (
      <div>
        <Content theme={this.state.theme} />
      </div>
    )
  }
}

const rootEle = document.getElementById('root')



React.addons.Perf.start()

const app = ReactDOM.render(<App />, rootEle)

app.setState({ theme: 'dark' })
React.addons.Perf.stop()
React.addons.Perf.printOperations()