Skip to content

08.useEffect及useLayoutEffect源码实现

js
export function useEffect(effectFunction, deps = []) {
  const currentIndex = hookIndex;
  const [destroyFunction, preDeps] = states[hookIndex] || [null, null];
  if(!states[hookIndex] || deps.some((item, index) => item !== preDeps[index])){
    setTimeout(() => {
      destroyFunction && destroyFunction();
      states[currentIndex] = [effectFunction(), deps];
    })
  };
  hookIndex++;
}

export function useLayoutEffect(effectFunction, deps = []) {
  const currentIndex = hookIndex;
  const [destroyFunction, preDeps] = states[hookIndex] || [null, null];
  if(!states[hookIndex] || deps.some((item, index) => item !== preDeps[index])){
    queueMicrotask(() => {
      destroyFunction && destroyFunction();
      states[currentIndex] = [effectFunction(), deps];
    })
  };
  hookIndex++;
}

基于 VitePress 构建