useEffect

useEffect Hook

用于在函数组件中处理副作用。常见的副作用：
ajax请求
计时器
其他异步操作
更改真实DOM
本地存储
useEffect,该函数接受一个函数作为参数，接受的函数就是需要进行副作用操作的函数，第二个参数是依赖

useEffect Hook 可以看做是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

1- useEffect(回调函数)

这个回调函数会在初次加载完成和更新完成之后触发，相当于就是类组件的 componentDidMount和componentDidUpdate的合体

2- useEffect(回调函数,[])

这个回调函数会在初次加载完成触发，相当于就是类组件的 componentDidMount

3- useEffect(回调函数,[依赖])

只有依赖发生改变的时候才会执行回调函数

副作用是随着组件加载而发生的，那么组件卸载时，可能需要清理这些副作用。
useEffect()的回调函数中允许返回一个函数，在组件卸载时，执行该返回函数，清理副作用。如果不需要清理副作用，useEffect()就不用返回任何值。

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

上面例子中，useEffect在组件加载时执行回调函数订阅了一个事件，并且返回一个清理函数，在组件卸载时执行return返回的函数取消订阅。

function Child() {
  let [count, setCount] = useState(100);
  useEffect(() => {
    console.log('儿子mounted')
    let timer = setInterval(() => {
      setCount(++count)
    }, 1000);
    return function () {
      // 这个返回的回调函数 能执行多少次是根据上边的回调函数的执行次数决定的
      console.log("儿子销毁")
      clearInterval(timer)
    }
  }, [])