为什么要有 React Hooks ？

类组件的几个缺点

  1. 大型组件难以拆分；
  2. 业务逻辑分散在组件的各个方法中，导致重复逻辑或关联逻辑；
  3. 组件类引入了复杂的编程模式，比如 render props 和高阶组件；

类组件的代码太“重”了，所以 React 团队希望组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。组件的最佳写法应该是函数，而不是类。

React 就是加强版函数组件，完全不使用“类”，就能写出一个全功能的组件。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码勾进来。

常用钩子函数

1. 状态钩子：useState()

纯函数组件没有状态，通过状态钩子可以使函数组件拥有状态

2. useContext()

3. useReducer()

4. 副作用钩子：useEffect()

副作用钩子用来引入具有副作用的操作，最常见的就是向服务器请求数据。以前放在 componentDidMount 里面的代码，现在放在 useEffect()

useEffect(() => {
    // Async Action
}, [dependencies])

上面用法中，useEffect() 接收俩个参数，第一个参数是异步函数