这是我参与「第四届青训营 」笔记创作活动的第8天，这篇文章是对react函数式编程的hook使用讲解

useState

这个hook相信大家都很熟悉，useState是用来保存组件状态的，需要注意的是其保存的状态是在组件外部的，当调用setState方法的时候就会更改组件外的保存的状态的并重新渲染页面。为什么要把状态保存在组件外呢，这是因为组件的每次渲染都会导致useState的重新执行，如果保存在组件外则每次渲染后状态都不会清空。这也就解释了为什么要把hook函数放在顶层执行，就是为了保持执行顺序的不变，这样每次去拿到的状态就不会发生混乱。

useEffect

这个hook函数是一个具有复合功能的函数有以下三个作用

在组件dom挂载后执行一次

在被监听变量改变后执行一次

在组件卸载后执行 返回的回调函数

useEffect接受一个回调函数，一个参数数组。回调函数的执行时机如上的一二两点所说，第三点说的就是会执行回调函数返回的函数。

useEffect的实际作用是很强大的，它是为了解决函数式编程中的副作用的问题而诞生

什么是副作用，简单的来说就是你的函数修改了外部变量所引起的副作用。比如我们想在Title状态改变的时候，将网页的title也赋值为Title，你会怎么做呢？这个时候我们发现Title是一个状态并且它确实是一个外部变量，所以这种情况就是副作用函数。仔细观察我们会发现这个操作是依赖于Title而执行的，所以我们只要让useEffect监听Title的变化并执行相应的操作就行了。

深入掌握useEffect

从上面的例子，不难看出useEffect的作用是什么。那么对我们之后的编程会有什么帮助呢？细心的你或许已经发现了组件的任何状态都只负责一件事，就是通过数据驱动页面的更新。理解这个之后，我们在再来看是不是除了更改组件的状态以外的所有操作都是副作用呢？那么对于副作用我们就可以用useEffect监听状态的改变来执行。也就是我们只专注于状态的变更，对于这以外的操作全部都可以看作副作用

useRef

对于useRef我只有一句话来总结就是useRef保存的变量是不受组件生命周期影响的，对其的更改也不会触发组件的渲染