并发特性

// React 17：下面会渲染两次
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
}, 0);

// 模拟 React 18 的自动批处理调度器
type Update = () => void;
 
let pending: Update[] = [];
let scheduled = false;
 
function flush(): void {
  scheduled = false;
  const batch = pending;
  pending = [];
  // 一次性执行所有更新（对应一次重渲染）
  batch.forEach(function (u) { u(); });
}
 
function setState(mutator: Update): void {
  pending.push(mutator);
  if (!scheduled) {
    scheduled = true;
    // React 18 用调度器在「一个 tick」后刷新，而不是立刻
    queueMicrotask(flush);
  }
}
 
let count = 0;
let flag = false;
let renders = 0;
 
function render(): void {
  renders++;
  console.log("render #" + renders + " -> count=" + count + ", flag=" + flag);
}
 
// 同一个 tick 里的多次 setState 会被合并
setState(function () { count = 1; });
setState(function () { flag = true; });
setState(function () { count = 2; });
 
// 微任务结束后才真正渲染（仅一次）
queueMicrotask(function () {
  render();
  console.log("批处理效果：3 次 setState 只触发 " + renders + " 次渲染");
});

import { useState, useTransition } from "react";
 
function Search() {
  const [query, setQuery] = useState("");
  const [list, setList] = useState<Item[]>([]);
  const [isPending, startTransition] = useTransition();
 
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    setQuery(e.target.value);            // 紧急：输入框立刻跟着打字
    startTransition(() => {
      setList(filterHugeList(e.target.value)); // 过渡：可被中断、不卡输入
    });
  }
 
  return (
    <>
      <input value={query} onChange={onChange} />
      {isPending ? <Spinner /> : <List items={list} />}
    </>
  );
}

const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);   // 落后于 query 的副本
 
// 用 deferredQuery 做昂贵计算，query 保持实时
const results = useMemo(() => filterHugeList(deferredQuery), [deferredQuery]);