React 函数组件（高级）

函数组件

• 纯函数，输入 props，输出 JSX
• 没有实例，没有生命周期，没有 state
• 不能扩展其他方法

例子

// 函数组件
function List(props) {
  const {list} = this.props

  return <ul>
    {list.map((item, index) => {
      return <li key={item.id}>
        <span>{item.title}</span>
      </li>
    })}
  </ul>
}

class 组件

例子

class List extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    // 子组件接收参数
    const {list} = this.props

    return <ul>
      {list.map((item, index) => {
        return <li key={item.id}>
          <span>{item.title}</span>
        </li>
      })}
    </ul>
  }
}