什么是React Hook？

React Hook简介

Hook是React在16.8以上版本新增的API，此概念一出就引起界内强烈的反响，尤大大也悄咪的整出了vue-hook来跟风一波。

Hook的本质目的很简单，希望我们在不编写类组件的情况下也能使用state来构建组件自身数据，开发者在开发React应用的过程中，编写最多的组件有如下几种：

类组件（可以构建state并接收props）


class App extends React.Component {}

无状态组件（只能接收props，无法构建自身state）


const ListItem = (props) => (<div>{props.content}</div>)

高阶组件（HOC，负责抽离公共逻辑）


const HOC = (Component) => {
  // ...公共逻辑
    return <Component/>
}

这三种组件是构建最多的，我们构建组件的时候也会根据业务需求进行思考，根据组件是否需要自身state来选择类组件或者无状态组件，并将复用的公共逻辑抽离到高阶组件，但是实话说，组件分的越多，对开发者的考验就越多，在开发前进行整体性思考的需求就越必要，而对于大多数人来说，对于类组件来说，更为喜欢编写无状态组件，原因不外乎就是因为：
构造类组件有一定的难度，尤其是生命周期在16.4版本更新后，不仅钩子函数难以掌握（名字都老长了，还新增了static静态方法来充当钩子函数），生命周期学习成本高。

总结一下Hook想要解决的问题：

在组件间复用状态逻辑很难，高阶组件和render props的技术总是属于“我知道，但是我想不起来用”的状态。
复杂组件变得难以理解，在一个类组件中往往存在大量的生命周期函数，每个钩子函数的编写都耗费了心机。
难以理解的class，类组件不仅有额外的学习成本（光处理个this就够麻烦了），而且总是需要编译，再不济也得垫个垫片吧（@babel/polyfill）。

React对于目前存在的这些问题就一句话：“各位走好（各种组件），以后，这里的一切，都交给Hook吧！”
Hook是怎么解决这些问题的呢：

复用逻辑？HOC？统统走开，全部拆成Hook组件，拆拆拆，拆的越多，复用越方便！
生命周期改合并合并，该干掉干掉，就留一个useEffec函数，方便多了吧？
类难写？别写！this整不明白？Hook组件就是个类似于无状态组件的函数，哪来的this！

最最主要的是，Hook是渐进式提出的，意思就是说不会让用户一下子就改写为Hook的开发模式，而是可以慢慢来适应的，而在未来的某个版本才会真正的移除class的写法。

听了这么多，大家是不是对Hook已经充满兴趣了呢？Ok，让我们继续往下走。

初识Hook真容

Hook到底是什么呢，Hook 是一些可以让你在无状态组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

也就是说Hook只是一种“工具”，这种工具可以让我们在无状态组件中使用到state以及生命周期等特性，而在无状态组件中使用来Hook工具后，我们就称这个组件为**“函数组件”（其实我习惯称为Hook组件）。**

那么就来看一个函数组件是怎么变身的吧：

首先我们先来看一个class组件的例子，我们想要实现一个点击按钮就会计数的效果：


import React, { Component } from 'react';

class Example extends Component {
    constructor () {
    super()
    // 想办法先搞一个状态出来
    this.state = { count: 0 }
    // 对方法中this的绑定
    this.setCount = this.setCount.bind(this)
  }
  // 更改状态的方法
  setCount () {
    this.setState((prevState) => ({ count: prevState.count + 1 }))
  }
  render () {
    // 最烦在这里解构赋值
    let { count } = this.state
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={this.setCount}>
          Click me
        </button>
      </div>
    );
  }
}

相信上面的代码大家都能看明白，就不多说了，再看一下Hook实现的函数组件：


import React, { useState } from 'react';

function Example (props) {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

是不是感觉眼前一亮呀，大家可以看到，useState其实就是一个Hook函数，它可以为Example这个普普通通的无状态组件添加一个叫做count的数据，而且还提供了一个setCount的专属方法（一物降一物的感觉）来更改这个count数据。传入的0就是这个count数据的默认值，因为使用的是数组的解构赋值，所以数据和方法的名字可以根据个人喜欢去命名，比如count + updateCount都可以。

大家可以看到，转换为函数组件后不用再操心this的问题，编写方法也简单了很多，把构建状态、设置默认值、构建更改状态的方法都融合到短短的一行代码中，而且也保留了无状态组件使用传入的props的方法，完美！

Ok，初识就到这里，这里只是为给大家展示一下Hook的魅力，因为不喜欢枯燥的讲解API，因为大家完全可以去官网查阅API文档，所以在接下来的内容中，我将利用一个Todolist的例子来进行阐述，而这里也更多的以代码的展示为主，想要学习更多的api的使用以及概念，还是要去查阅问题哟。

记住：文档基本没有废话，所以每句话都应该是知识点，读文档的时候要耐着性子一句一句的看完哟。