React的useEffect钩子不加依赖数组、加空依赖数组、加非空依赖数组的区别是什么？

先来背书：三种useEffect的执行时机

• 不加依赖数组：

  useEffect(() => {
      // do something
  });

  在componentDidMount（第一次render渲染执行完成）、componentDidUpdate（props、state等发生变化触发重渲染）时执行

• 加空依赖数组：

  useEffect(() => {
      // do something
  }, []);

  只在componentDidMount时执行

• 加非空依赖数组：

  useEffect(() => {
      // do something
  }, [dep1, dep2, dep3]);

  在componentDidMount、依赖数组中的变量发生变化时执行

好了，如果不想理解为什么，只想背api的看到这里可以关掉文章了：）

----------------------------------------------------我是分割线---------------------------------------------------------

所以这奇奇怪怪的执行时机真的只能靠死记硬背的吗？当然不是。我们来看官方对useEffect的解释是什么：

The Effect Hook l