javascript - React 函数式组件与经典组件

Question

查看docs关于功能组件与经典组件，如果您想创建一个允许您访问 this 的实例或者您想要生命周期方法，那么您似乎只需要经典组件。这是否意味着功能组件只能内部有渲染？如果它需要处理点击，它必须通过直接链接到其 props 的标记上的 onClick 监听器，并且没有办法通过 handleClick 函数吗？

const Type = ({onTypeClick, name}) => {
  <li
    onClick={onTypeClick.bind(null, name)}
  >
    {name}
  </li>
}

VS

const Type = React.createClass({
  handleClick (e) {
    e.preventDefault()
    this.props.onTypeClick(this.props.name)
  },
  render() {
    return (
      <li onClick={handleClick}>
        {this.props.name}
      </li>
    )
  }
})

Answer 1

无状态组件返回渲染函数的结果，但它只是一个函数，因此它可以访问闭包中的内容。

const handleClick = (e, props) => {
  e.preventDefault()
  props.onTypeClick(props.name)
}

const Type = props => {
  // don't forget to return!
  return (
    <li onClick={event => handleClick(event, props)}>
      {props.name}
    </li>
  )
}