Effect
useUpdateLayoutEffect
用于更新 Layout Effect Hook
用法
用法与 useLayoutEffect 一致，不同的是，会忽略首次执行，只在依赖更新时执行。
layoutEffectCount: 0
updateLayoutEffectCount: 0
源码
import { useLayoutEffect } from 'react';
import { createUpdateEffect } from '../createUpdateEffect';
export default createUpdateEffect(useLayoutEffect);import { useRef } from 'react';
import type { useEffect, useLayoutEffect } from 'react';
type EffectHookType = typeof useEffect | typeof useLayoutEffect;
export const createUpdateEffect: (hook: EffectHookType) => EffectHookType =
(hook) => (effect, deps) => {
const isMounted = useRef(false);
// for react-refresh
hook(() => {
return () => {
isMounted.current = false;
};
}, []);
hook(() => {
if (!isMounted.current) {
isMounted.current = true;
} else {
return effect();
}
}, deps);
};
export default createUpdateEffect;解读
关于 createUpdateEffect 的解读，可以查看对应文档：useUpdateEffect。
Last updated on