组件化优于多层 render

当组件的 jsx 只写在一个 render 方法显得太臃肿时，很可能更适合拆分出一个组件，视情况采用 class component 或 stateless component

// bad
renderItem ({name}) {
  return (
    <li>
        {name}
        {/* ... */}
    </li>
  )
}
render () {
  return (
    <div className="menu">
      <ul>
        {this.props.items.map(item => this.renderItem(item))}
      </ul>
    </div>
  )
}

// good
function Items ({name}) {
  return (
    <li>
        {name}
        {/* ... */}
    </li>
  )
}
render () {
  return (
    <div className="menu">
      <ul>
        {this.props.items.map(item => <Items {...item} />)}
      </ul>
    </div>
  )
}