前端工程化实战：React 模块化开发、性能优化和组件化实践

// 引入依赖
const React = require('react')
const ReactDOM = require('react-dom')

// 定义组件
const App = React.createClass({
  render: function() {
    return <div>Hello World!</div>
  }
})

// 渲染组件
ReactDOM.render(
  <App />,
  document.getElementById('app')
)

// 引入依赖
import React from 'react'
import ReactDOM from 'react-dom'

// 定义组件
class App extends React.Component {
  render() {
    return <div>Hello World!</div>
  }
}

// 渲染组件
ReactDOM.render(
  <App />,
  document.getElementById('app')
)

class Count extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.count !== this.props.count
  }

  render() {
    return <div>{this.props.count}</div>
  }
}

class Button extends React.Component {
  render() {
    const { onClick, text } = this.props
    return <button onClick={onClick}>{text}</button>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  increment() {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.increment()} text={`Count: ${this.state.count}`} />
      </div>
    )
  }
}