Saber2pr's Blog

useEffect

Effect Hook

这是一个 pure 操作，将副作用包裹在了 Monad 里（可以理解为外面又包了一层函数），react 调度机制会在一轮渲染之后执行这些副作用操作，保证了副作用与函数组件主体的充分隔离。

Effect 类型

type Effect = () => Effect | void;

这是一个利用函数特性实现的 Monad。首先是个映射到自身类型的自函子，然后可以 return 可以 >>=，即自函子范畴上的幺半群。

useEffect 实现

export function useEffect(effect: Effect, deps?: any[]) {
  if (deps) {
    // 如果deps存在，使用memorize优化
    useMemo(() => currentFiber.effects.push(effect), deps);
  } else {
    currentFiber.effects.push(effect);
  }
}

这里将 Moand 放到了一个 List 中，在纯函数组件执行完之后(进入 commitWork 阶段)，依次执行。