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

本文主要是介绍二次封装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，使其在初次加载时运行,默认为falsereturn (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increase</button></div>);
};export default MyComponent;

使用也

这篇关于二次封装useEffect hook,实现页面加载时不触发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---