React HOOK中useEffect的使用

useEffect（副作用函数）是一个Effect Hook，给函数组件增加了操作副作用(在 React 组件中进行数据获取、订阅或者手动修改 DOM等)的能力。它跟class组件中的 componentDidMount、componentDidUpdate和componentWillUnmount具有相同的用途，只不过被合并成了一个 API，默认情况下，React 会在每次渲染后调用副作用函数 ，包括第一次渲染的时候，还有useEffect内的依赖（例如state）发生变化，它都会被重新调用。

上面实例每次重新渲染都要执行一遍useEffect，如果你在useEffect中使用了useState则会导致无限循环，这样显然是影响性能的。为了处理这个问题，我们可以给useEffect传第二个参数。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（即第一个参数）。

useEffect(()=>{
    const num = count + 1;
    setCount(num);
},flag);

当我们第二个参数传一个空数组[]时，相当于只在首次渲染的时候执行。

useEffect(()=>{
    const num = count + 1;
    setCount(num);
},[]);

通常，组件卸载时需要清除effect创建的诸如订阅或计时器ID等资源。要实现这一点，useEffect函数需返回一个清除函数（class组件中的componentWillUnmount）：

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除订阅
    subscription.unsubscribe();
  };
});

React-use是一个很好用的React Hooks库，其中关于似React HOOK中useEffect的生命周期有

• usEffectOnce - 一个只运行一次的修改的useffect挂钩。
• useEvent - 订阅事件。
• useLifecycles - 调用mount和unmount回调。
• useMountedState and useUnmountPromise - 如果已挂载组件，则跟踪。
• usePromise - 仅在安装组件时解析promise。
• useLogger - 在组件经历生命周期时登录控制台。
• useMount - 调用mount回调。
• useUmount - 调用unmount回调。
• useUpdateEffect -  仅对更新运行效果。
• useIsomorphicLayoutEffect - 在服务器端呈现时不显示警告的useLayoutEffect。
• useDeepCompareEffect、useShallowCompareEffect和useCustomCompareEffect - 根据对其依赖项的深入比较运行一个效果