React 进阶：渲染模型、Hooks 边界与性能优化

function Bad({ items }: { items: string[] }) {
  items.push("render");            // 渲染阶段改 props：纯度被破坏
  return <List items={items} />;
}

function Good({ items }: { items: string[] }) {
  const [extra, setExtra] = useState(false);   // 状态变化是触发渲染的合法方式
  return <List items={extra ? [...items, "extra"] : items} />;
}

function Checkout() {
  const [count, setCount] = useState(0);
  const [total, setTotal] = useState(0);

  async function pay() {
    const res = await fetchOrder();
    setCount(res.count);
    setTotal(res.total);
    // 两次 setState 合并为一次渲染（React 18 的自动批处理）
  }
  return null;
}

// 错误：依赖了 clickHandler，但每次渲染都是新函数，effect 每次都重新订阅
useEffect(() => {
  socket.on("msg", clickHandler);
  return () => socket.off("msg", clickHandler);
}, [clickHandler]);

// 正确之一：把 handler 放进 effect 内部，依赖列表如实声明用到的值
useEffect(() => {
  const handler = (msg: string) => {
    if (msg === lastRef.current) return;   // 需要最新值又不想触发重订阅时用 ref
  }
  socket.on("msg", handler);
  return () => socket.off("msg", handler);
}, []);

useEffect(() => {
  const id = setInterval(() => setStatus(pollApi()), 3000);
  return () => clearInterval(id);   // 没有这行，离开页面后轮询永不停止
}, []);

useEffect(() => {
  const ac = new AbortController();
  fetch(`/api/items?q=${query}`, { signal: ac.signal })
    .then((r) => r.json())
    .then(setData)
    .catch((e) => { if (e.name !== "AbortError") setError(e); });
  return () => ac.abort();   // query 变化时取消上一个请求
}, [query]);

// 反模式：fullName 是派生值，不该是 state
const [fullName, setFullName] = useState("");
useEffect(() => {
  setFullName(`${first} ${last}`);
}, [first, last]);

// 正确：渲染时直接算，或数据昂贵时用 useMemo
const fullName = `${first} ${last}`;

const MemoList = memo(function ItemList({ query, onSelect }: Props) {
  // 大列表渲染
});

function Parent({ rows }: { rows: Row[] }) {
  const query = useSearch();
  // 值得：rows.filter 每次都是新数组，且产物是 memo 子组件的 props
  const filtered = useMemo(
    () => rows.filter((r) => r.name.includes(query)),
    [rows, query]
  );
  // 值得：onSelect 是传给 memo 子组件的稳定引用
  const handleSelect = useCallback((id: string) => logSelect(id), []);
  return <MemoList query={query} rows={filtered} onSelect={handleSelect} />;
}

// 反模式：删除第一项后，原来第二项的输入框状态会"上移"到第一项
{rows.map((row, i) => (
  <Row key={i} value={row.value} />
))}

// 正确：用数据自带的稳定 ID
{rows.map((row) => (
  <Row key={row.id} value={row.value} />
))}

function SearchableTable({ rows }: { rows: Row[] }) {
  const [query, setQuery] = useState("");
  const [deferredQuery, setDeferredQuery] = useDeferredValue(query);   // 非紧急副本
  const filtered = useMemo(
    () => rows.filter((r) => r.name.includes(deferredQuery)),
    [rows, deferredQuery]
  );

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <Table rows={filtered} />   {/* 大列表用过期值先渲染，输入框不卡 */}
    </>
  );
}

class ErrorBoundary extends React.Component<
  { children: React.ReactNode; fallback: React.ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error: Error, info: React.ErrorInfo) {
    reportError(error, info.componentStack);   // 上报，让错误可见
  }
  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

const AdminPanel = React.lazy(() => import("./AdminPanel"));

<Suspense fallback={<Spinner />}>
  <AdminPanel />
</Suspense>