useEffect 与副作用

// 形式一：没有依赖数组 —— 每次渲染后都执行
useEffect(() => {
  console.log("每次渲染都跑");
});
 
// 形式二：空数组 —— 只在挂载后执行一次
useEffect(() => {
  console.log("只在挂载后跑一次");
}, []);
 
// 形式三：有依赖 —— 依赖变化时执行
useEffect(() => {
  document.title = "共 " + count + " 项";
}, [count]);

useEffect(() => {
  const timer = setInterval(() => tick(), 1000);
  return () => clearInterval(timer);
}, []);
 
useEffect(() => {
  const socket = connect(roomId);
  socket.on("message", onMessage);
  return () => socket.close();
}, [roomId]);

// 每次渲染 options 都是新对象 → 依赖永远"变了" → effect 每次都跑
const options = { limit: 10 };
useEffect(() => {
  fetchData(options);
}, [options]);

type Deps = readonly unknown[] | null;
type Cleanup = (() => void) | null;
 
interface EffectSlot {
  deps: Deps;
  cleanup: Cleanup;
}
 
// React 内部为每个组件保存一组 effect 槽位
const slots: EffectSlot[] = [];
let cursor = 0;
 
// 这就是依赖数组的比较规则：长度相同 + 逐位 Object.is
function depsChanged(prev: Deps, next: Deps): boolean {
  if (prev === null || next === null) return true; // 没写依赖数组，每次都跑
  if (prev.length !== next.length) return true;
  for (let i = 0; i < prev.length; i++) {
    if (!Object.is(prev[i], next[i])) return true;
  }
  return false;
}
 
function useEffectMini(name: string, fn: () => Cleanup, deps: Deps): void {
  const index = cursor;
  cursor++;
 
  const slot: EffectSlot | undefined = slots[index];
 
  if (slot === undefined) {
    console.log("  [" + name + "] 首次挂载，执行");
    slots[index] = { deps: deps, cleanup: fn() };
    return;
  }
 
  if (!depsChanged(slot.deps, deps)) {
    console.log("  [" + name + "] 依赖未变，跳过");
    return;
  }
 
  console.log("  [" + name + "] 依赖变了 -> 先清理上一次");
  if (slot.cleanup !== null) slot.cleanup();
  console.log("  [" + name + "] 再执行新的");
  slot.deps = deps;
  slot.cleanup = fn();
}
 
// 模拟一个组件：roomId 变化时重连，config 是每次渲染新建的对象
function renderComponent(roomId: string): void {
  cursor = 0; // 每次渲染前重置游标
 
  useEffectMini(
    "socket",
    function () {
      console.log("      connect(" + roomId + ")");
      return function () {
        console.log("      close(" + roomId + ")");
      };
    },
    [roomId]
  );
 
  // 陷阱示范：对象字面量每次渲染都是新引用
  const config = { limit: 10 };
  useEffectMini(
    "fetch",
    function () {
      console.log("      fetch(limit=" + config.limit + ")");
      return null;
    },
    [config]
  );
}
 
console.log("渲染 1: roomId=A");
renderComponent("A");
console.log("渲染 2: roomId=A （只是父组件重渲染）");
renderComponent("A");
console.log("渲染 3: roomId=B");
renderComponent("B");
 
console.log("组件卸载，执行所有清理");
for (const s of slots) {
  if (s.cleanup !== null) s.cleanup();
}

// 危险：明明用了 userId 却不声明，userId 变化时不会重新请求
useEffect(() => {
  fetchUser(userId).then(setUser);
}, []);  // eslint-disable-next-line ← 不要这样做

function Timer() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);   // 永远是 0 + 1
    }, 1000);
    return () => clearInterval(id);
  }, []);   // 空依赖，effect 只跑一次
 
  return <p>{count}</p>;
}

// 解法一：函数式更新，不再依赖外部的 count（推荐）
useEffect(() => {
  const id = setInterval(() => setCount((c) => c + 1), 1000);
  return () => clearInterval(id);
}, []);
 
// 解法二：把 count 加进依赖（每秒重建定时器，可行但浪费）
useEffect(() => {
  const id = setInterval(() => setCount(count + 1), 1000);
  return () => clearInterval(id);
}, [count]);
 
// 解法三：用 ref 保存最新值（第 7 章会详细讲）
const countRef = useRef(count);
countRef.current = count;

// 有 bug 的版本
useEffect(() => {
  fetchUser(userId).then(setUser);
}, [userId]);

useEffect(() => {
  let ignore = false;
 
  fetchUser(userId).then((data) => {
    if (!ignore) setUser(data);
  });
 
  return () => {
    ignore = true;
  };
}, [userId]);

useEffect(() => {
  const ctrl = new AbortController();
 
  fetch("/api/users/" + userId, { signal: ctrl.signal })
    .then((r) => r.json())
    .then(setUser)
    .catch((e) => {
      if (e.name !== "AbortError") setError(e);
    });
 
  return () => ctrl.abort();
}, [userId]);

// 不好
const [items, setItems] = useState<Item[]>([]);
const [total, setTotal] = useState(0);
 
useEffect(() => {
  setTotal(items.reduce((s, i) => s + i.price, 0));
}, [items]);
 
// 好：渲染时直接算
const total = items.reduce((s, i) => s + i.price, 0);

// 不好
const [submitted, setSubmitted] = useState(false);
useEffect(() => {
  if (submitted) {
    post("/api/order", data);
    setSubmitted(false);
  }
}, [submitted]);
 
// 好
function handleSubmit() {
  post("/api/order", data);
}

// 不好
const [value, setValue] = useState(props.value);
useEffect(() => {
  setValue(props.value);
}, [props.value]);

// 不好：先改 state，再用 effect 通知外面
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
  onToggle(isOpen);
}, [isOpen]);
 
// 好：在事件里一起做
function toggle() {
  const next = !isOpen;
  setIsOpen(next);
  onToggle(next);
}

function useOnlineStatus(): boolean {
  const [online, setOnline] = useState(() => navigator.onLine);
 
  useEffect(() => {
    function up() {
      setOnline(true);
    }
    function down() {
      setOnline(false);
    }
 
    window.addEventListener("online", up);
    window.addEventListener("offline", down);
 
    // 订阅后立刻同步一次，避免订阅前发生的变化被漏掉
    setOnline(navigator.onLine);
 
    return () => {
      window.removeEventListener("online", up);
      window.removeEventListener("offline", down);
    };
  }, []);
 
  return online;
}