原文：https://dev.to/tylermcginnis/why-react-hooks-51lj....
译者：前端技术小哥

当你要学习一个新事物的时候，你应该做的第一件事就是问自己两个问题

• 1、为什么会存在这个东西?
• 2、这东西能解决什么问题?

如果你从来没有对这两个问题都给出一个令人信服的答案，那么当你深入到具体问题时，你就没有足够的坚实的基础。关于React Hooks，这些问题值得令人思考。当Hooks发布时，React是JavaScript生态系统中最流行、最受欢迎的前端框架。尽管React已经受到高度赞扬，React团队仍然认为有必要构建和发布Hooks。在不同的Medium帖子和博客文章中纷纷讨论了(1)尽管受到高度赞扬和受欢迎，React团队决定花费宝贵的资源构建和发布Hooks是为什么和为了什么以及(2)它的好处。为了更好地理解这两个问题的答案，我们首先需要更深入地了解我们过去是如何编写React应用程序的。

createClass

如果你已经使用React足够久，你就会记的React.createClassAPI。这是我们最初创建React组件的方式。用来描述组件的所有信息都将作为对象传递给createClass。

const ReposGrid = React.createClass({
  getInitialState () {
    return {
      repos: [],
      loading: true
    }
  },
  componentDidMount () {
    this.updateRepos(this.props.id)
  },
  componentDidUpdate (prevProps) {
    if (prevProps.id !== this.props.id) {
      this.updateRepos(this.props.id)
    }
  },
  updateRepos (id) {
    this.setState({ loading: true })

    fetchRepos(id)
      .then((repos) => this.setState({
        repos,
        loading: false
      }))
  },
  render() {
    const { loading, repos } = this.state

    if (loading === true) {
      return <Loading />
    }

    return (
      <ul>
        {repos.map(({ name, handle, stars, url }) => (
          <li key={name}>
            <ul>
              <li><a href={url}>{name}</a></li>
              <li>@{handle}</li>
              <li>{stars} stars</li>
            </ul>
          </li>
        ))}
      </ul>
    )
  }
})

createClass是创建React组件的一种简单而有效的方法。React最初使用createClassAPI的原因是，当时JavaScript没有内置的类系统。当然，这最终改变了。在ES6中, JavaScript引入了class关键字，并使用它以一种本机方式在JavaScript中创建类。这使React处于一个进退两难的地步。要么继续使用createClass，对抗JavaScript的发展，要么按照EcmaScript标准的意愿提交并包含类。历史表明，他们选择了后者。

React.Component

我们认为我们不从事设计类系统的工作。我们只想以任何惯用的JavaScript方法来创建类。-React v0.13.0发布
Reactiv0.13.0引入了React.ComponentAPI，允许您从(现在)本地JavaScript类创建React组件。这是一个巨大的胜利，因为它更好地与ECMAScript标准保持一致。

class ReposGrid extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      repos: [],
      loading: true
    }

    this.updateRepos = this.updateRepos.bind(this)
  }
  componentDidMount () {
    this.updateRepos(this.props.id)
  }
  componentDidUpdate (prevProps) {
    if (prevProps.id !== this.props.id) {
      this.updateRepos(this.props.id)
    }
  }
  updateRepos (id) {
    this.setState({ loading: true })

    fetchRepos(id)
      .then((repos) => this.setState({
        repos,
        loading: false
      }))
  }
  render() {
    if (this.state.loading === true) {
      return <Loading />
    }

    return (
      <ul>
        {this.state.repos.map(({ name, handle, stars, url }) => (
          <li key={name}>
            <ul>
              <li><a href={url}>{name}</a></li>
              <li>@{handle}</li>
              <li>{stars} stars</li>
            </ul>
          </li>
        ))}
      </ul>
    )
  }
}

尽管朝着正确的方向迈出了明确的一步，React.Component并不是没有它的权衡

构造函数

使用类组件，我们可以在constructor方法里将组件的状态初始化为实例(this)上的state属性。但是，根据ECMAScript规范，如果要扩展子类(在这里我们说的是React.Component)，必须先调用super，然后才能使用this。具体来说，在使用React时，我们还须记住将props传递给super。

constructor (props) {
    super(props) //