React HOOK中useEffect的使用

2020-10-1293次阅读React

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 - 根据对其依赖项的深入比较运行一个效果
上一篇: JavaScript滚动到顶部  下一篇: 通过JS来管理样式CSS Modules及React实践  

React HOOK中useEffect的使用相关文章