React hooks：useEffect改进useUpdateEffect

前言

我们都知道 React里面有一个钩子 useEffect，他可以在页面首次挂载以及之后依赖项更新的时候，重新执行传入的参数。另外还支持在卸载的时候执行副作用函数里面的return内容

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 在这里执行副作用，比如数据获取、订阅等
    console.log('Component mounted or updated');

    // 返回的函数将在组件卸载或下一次副作用执行前调用
    return () => {
      console.log('Cleanup on unmount or before the next effect runs');
    };
  }, []);  // 依赖数组

  return <div>My Component</div>;
}

那么问题来了。如果在业务中，明确了在组件挂载的时候不需要去执行副作用函数（可能当时值还没有，或者其他原因），那么为了减少计算的次数，减少计算成本，如何实现第一次不渲染，之后根据依赖来执行副作用函数呢？（即，除了初次不渲染，其余和原本的useEffect一样）

思路

我们可以对useEffect进行一个封装，在第一次进去的时候，不执行，之后正常执行。具体看代码

import React,{useEffect,useRef} from 'react'

export const useUpdateEffect = (effect,deps) => {
	const isMounted = useRef(false);
	
	useEffect(()=>{
		if(!isMounted.current){
			isMounted.current = true
		}else{
			return effect();
		}
	},deps);
};

解释

我们用useRef定义了一个变量isMounted，当首次挂载进入的时候，发现isMounted.current为false，那么就不会执行副作用函数，并把isMounted.current变为True；第二次进入的时候，就正常执行副作用了

碎碎念

感觉这个hooks挺不错的，可以在工作中和useEffect灵活切换