引言：现在React的API 有两套：类 API和 基于函数的hooks API

任何一个组件都可以使用类或者函数来写，两种写法展现效果完全一样，官方更推荐使用hooks，因为hooks更简洁，代码量更少，而且用起来比较“轻”，而且hooks是函数，更符合React函数式的本质，那么有哪些钩子，我们又该怎么去使用它们呢？

一、相关概念

• 类是对数据和逻辑的封装，组件的状态和操作方法都是封装到一起的，而每次使用都会自动new一个实例对象出来；
• 函数就应该完成一个操作，每次使用都相当于执行一次函数，返回一个结果，如果存在多个操作就要写成多个单独的函数，将数据的状态和操作方法分离，返回html代码，这样，方能被称为纯函数；
• 纯函数：只是进行单纯的数据计算，而不包含其他操作的函数，被称为纯函数
• 副效应：与数据计算无关的操作，例如日志生成、数据存储、改变数据状态等等

二、钩子(hooks)的作用

钩子（hook）就是 React 函数组件的副效应解决方案，用来为函数组件引入副效应。

函数的主体只应该用于返回组件的HTML代码，其他的操作(副效应)都必须要使用钩子引入，而许多常见的副效应操作，react都为其提供的专用的钩子。

• useState():保存数据并提供更新数据的方法
• useRef:创建一个DOM结构或者组件的引用
• ......

!!!当然除了上述那些引入某种特定副效应操作的钩子外，还有一个通用的当然也是最常用的副效应钩子--useEffect()，副效应操作找不到对应的钩子时，就可以使用它

三、useEffect()的用法

useEffect()本身是一个函数，是为了在函数组件中引入与数据计算(返回html代码)无关的副效应操作

• 参数：

  • 第一个参数是一个副效应函数，组件初次加载和后续的重新渲染，该函数都会自动执行；
  • 第二个参数是一个数组，用于指定副效应函数的依赖项，当依赖项发生变化的时候，副效应函数才执行。空数组表示没有任何依赖项，即副效应函数只在组件加载到DOM结构时执行，后面组件重新渲染也不会再执行副效应函数

• 使用场景：副效应操作都可以使用useEffect()引入，一般是没有特定钩子的副效应：

  • 发送网络请求获取数据
  • 发布和订阅
  • 设置定时器等等
  • ！！！根据使用场景决定第二个参数是否为空数组

• 返回值：取决于组件卸载时是否需要清理副效应操作

  • 没有返回值：不需要清理副效应操作的时候
  • 函数：在组件卸载的时候执行该函数，主要用于清理副效应。例如取消发布订阅、关闭定时器等
  • ！！！若返回值是函数，会在组件卸载时和副效应操作再次执行前执行一次，主要用于清理上一次的副效应操作

• ！！！注意点:多个副效应操作应该使用多个hooks，不应该合并在一起