二次封装useEffect hook,实现页面加载时不触发

首先对useEffect进行二次封装

import { useEffect, useRef } from 'react';

type Callback = () => void;

function useEffectWithInitialEffect(
    callback: Callback,
    deps: React.DependencyList,
    shouldRunOnInitialRender: boolean = false
): void {
    const isInitialMount = useRef(true);

    useEffect(() => {
        if (isInitialMount.current) {
            if (shouldRunOnInitialRender) {
                callback();
            }
            isInitialMount.current = false; // 设置为 false，表示不再是初次加载
        } else {
            callback(); // 在依赖变化时调用
        }
    }, deps); // 依赖数组
}

export default useEffectWithInitialEffect;

使用封装好的hook。使用也很简单，和useEffect用法一模一样，只是多了一个可选参数，传入true就代表页面加载时触发这个函数(也就是和useEffect一模一样了)。这个参数可以不传，不传则默认为false，即实现页面加载时不触发

import React, { useState } from 'react';
import useEffectWithInitialEffect from './hooks/useEffectWithInitialEffect';

const MyComponent = () => {
    const [count, setCount] = useState(0);

    // 当组件初次加载时调用，且在 count 变化时也会调用
    useEffectWithInitialEffect(() => {
        console.log('Effect is running:', count);
    }, [count],"可选参数"); // 设置为 true，使其在初次加载时运行,默认为false

    

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    );
};

export default MyComponent;

使用也