React中useEffect钩子函数中的依赖项说明

React中useEffect这个钩子函数可以说是项目非常常用的了，它类似于Vue中的onMounted生命周期钩子函数，我们用它可以来掌握发送请求获取数据的时机，也可以用它来掌握操作DOM的时机等等，其中它的第二个参数“依赖项”可以说是新手时期较难理解的了，我们这里来详细说说它的用法：

它最常见的有三种状态：

1. 没有依赖项，不写依赖项 （初始 +  组件更新）

2. 传入空数组依赖项 （初始执行一次再也不执行了）

3. 传入特定依赖项 （初始 + 依赖项变化时执行）

一. 没有依赖项

当我们给useEffect函数不写第二个参数“依赖项时”，它会在初始页面的DOM元素一加载完成时就会执行一次这个函数，而后当我们组件每次更新时都会继续执行。

例如：我们声明一个状态变量

在声明一个按钮，给按钮绑定点击事件，每次点击让count + 1：

每次点击修改状态变量后，他都会执行一次：

二. 传入空数组依赖

当我们给第二个参数“依赖性”传入一个空数组时，在整个页面的生命周期中只会执行一次，就是在初始DOM渲染完成时。

这时候我们去修改状态变量count，它也不会再执行了：

三. 传入特定依赖项

这个依赖项很特别，我们可以在数组中传入一个声明好的状态变量去与之绑定：

传入后，除了会在初始DOM渲染完成后执行一次，还会在绑定的状态变量每次发生变化后执行一次，相当于“监视”了这个状态，它一变我就执行：

它与第一种“不传入依赖项”的区别是：传入特定依赖项后，只会监视与之绑定的状态的变化而执行，而不传入依赖项，组件中的每次更新都会执行。