React useEffectOnce钩子
当条件为真时,最多运行一次回调函数。
- 使用
useRef()
钩子创建一个变量hasRunOnce
,用于跟踪效果的执行状态。 - 使用
useEffect()
仅在when
条件发生变化时运行。 - 检查
when
是否为true
且效果尚未执行。如果两者都为true
,则运行callback
并将hasRunOnce
设置为true
。
const useEffectOnce = (callback, when) => {
const hasRunOnce = React.useRef(false);
React.useEffect(() => {
if (when && !hasRunOnce.current) {
callback();
hasRunOnce.current = true;
}
}, [when]);
};
const App = () => {
const [clicked, setClicked] = React.useState(false);
useEffectOnce(() => {
console.log('mounted');
}, clicked);
return <button onClick={() => setClicked(true)}>点击我</button>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<App />
);