副作用

useEffect() 用来运行会产生副作用的逻辑，并自动追踪依赖。

const count = useRef(0);

useEffect(() => {
  document.title = `Count ${count.value}`;
});

当 count 变化时，effect 会重新执行。

cleanup

effect 可以返回清理函数：

useEffect(() => {
  const id = window.setInterval(tick, 1000);
  return () => window.clearInterval(id);
});

清理函数会在下次重跑前执行，也会在作用域销毁时执行。

调度方式

useEffect(updateImmediately); // 默认 sync
useEffect(updateBeforePatch, { flush: "pre" });
useEffect(readUpdatedDom, { flush: "post" });

useEffect() 是唯一的自动依赖追踪副作用 API。beta.8 删除 watchEffect、watchPostEffect 和 watchSyncEffect，原有调度能力统一通过明确的 flush 选项提供。

和 watch 的区别

useEffect() 适合“读到什么就订阅什么”的副作用。需要明确数据源、新旧值、immediate 或 deep 时，使用 watch()。