一、说说 useEffect，什么是副作用？第二个参数为 [ ] 是什么意思？

1.什么是 useEffect ?

React 官方文档解释：Effect Hook 可以让你在函数组件中执行 副作用 操作

2.什么是副作用？

副作用 ( side effect ): 数据获取，数据订阅，以及手动更改 React 组件中的 DOM 都属于副作用。

因为我们渲染出的页面都是静态的，任何在其之后的操作都会对他产生影响，所以称之为副作用。

副作用又分为两种：（1）无需清除的副作用   （2）需要清除的副作用

（1）无需清除的副作用：

有时候，我们只想在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作。因为我们在执行完这些操作之后，就可以忽略他们了。

（2）需要清除的副作用：

之前，我们研究了如何使用不需要清除的副作用，还有一些副作用是需要清除的。例如订阅外部数据源，添加DOM事件。这种情况下，清除工作是非常重要的，可以防止引起内存泄露

在这个例子中，给鼠标的 click 事件添加了一个监听器，

点击鼠标，会在屏幕打印出鼠标当前的位置，并在控制台打印出 inner。但是这里存在一个问题，打印inner的次数并不是线性增加（点一次增加一次），而是点一次，inner被打印了多次。 这是因为我们在每次更新渲染页面的时候都会调用 useEffect 的回调函数，这样就会添加越来越多的 click 事件，而没有清除。

如何清除？

可以发现，对比之前的代码，这里多 return 了一个函数，可以在这个函数中做清除操作

现在点击鼠标之后， inner 被打印的次数就是线性增加，点一次，inner 被打印一次,而不是被打印多次

3.useEffect的第二个参数？（控制 useEffect 的执行）

（1）第一个参数为一个函数：

这个函数的目的就是为了告诉 React 组件需要在渲染后执行哪些操作，这个函数会在DOM更新之后被调用，use Effect 默认在每次渲染之后都会执行。但是也可以手动控制它的执行。

（2）第二个参数（一个数组）：

当数组中的任意一项变化的时候，useEffect会被重新执行 

如果传递一个空数组 [ ]，告诉 useEffect 不依赖于 state、props中的任意值， useEffect 就只会运行一次

如果数组中有值

这里的依赖为 like，只有当 like 变化时，useEffect 才会执行，而当 on 变化时，useEffect 不会执行