高阶组件与 render props：历史与现状

import { useEffect, useState, type ComponentType } from "react";

// HOC 注入给被包装组件的额外 props
interface LoadingProps {
  loading: boolean;
  data: unknown;
  reload: () => void;
}

// 泛型 P：保留原组件自己的 props，包装不弄丢它们
// fetchUsers 是项目里已封装好的请求函数（略）
function withLoading<P extends object>(
  Wrapped: ComponentType<P & LoadingProps>
) {
  // 返回的新组件：先干「重复的逻辑」，再把 props 原样转发
  return function WithLoading(props: P) {
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState<unknown>(null);
    const reload = () =>
      fetchUsers().then((d) => { setData(d); setLoading(false); });

    useEffect(() => { reload(); }, []);

    if (loading) return <div>加载中…</div>;  // 逻辑：包装层接管
    return <Wrapped {...props} loading={false} data={data} reload={reload} />;
  };
}

// 使用：一行包装，UserPage 就「多」了取数与加载态
const UserPageWithLoading = withLoading(UserPage);

export default withTheme(
  withAuth(
    withLoading(UserPage)
  )
);

// DevTools 里的组件树，同样一层套一层：
// <WithTheme> → <WithAuth> → <WithLoading> → <UserPage>
// 想看 UserPage 的真实 props？逐层点进去对账

// withUserBrief 和 withUserDetail 都往里注入 user……
const Enhanced = withUserBrief(withUserDetail(UserPage));
// UserPage 拿到的是哪一个？编译器不报错，测试不一定踩到，线上见真章

import { useState, type ReactNode } from "react";

interface MousePos {
  x: number;
  y: number;
}

// children 的类型是函数：接收状态，返回要渲染的 UI
function MouseTracker({
  children,
}: {
  children: (pos: MousePos) => ReactNode;
}) {
  const [pos, setPos] = useState<MousePos>({ x: 0, y: 0 });
  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}  // 渲染时调用你，把状态递出来
    </div>
  );
}

// 使用：状态怎么变成 UI，由你说了算
<MouseTracker>
  {({ x, y }) => <h1>鼠标位置：{x}, {y}</h1>}
</MouseTracker>

import { useEffect, useState } from "react";

function useLoading<T>(fetcher: () => Promise<T>) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<T | null>(null);
  const [tick, setTick] = useState(0);  // reload 的计数器：+1 触发重取

  useEffect(() => {
    let alive = true;  // 防竞态：卸载后不再 setData（第 34 篇细讲）
    setLoading(true);
    fetcher().then((d) => {
      if (alive) { setData(d); setLoading(false); }
    });
    return () => { alive = false; };
    // fetcher 不进依赖：约定由调用方保证稳定（第 11 篇 useCallback）
  }, [tick]);

  return { loading, data, reload: () => setTick((t) => t + 1) };
}

// 使用：不包一层，DevTools 里干干净净（UserList 组件略）
function UserPage() {
  const { loading, data, reload } = useLoading(fetchUsers);
  if (loading) return <div>加载中…</div>;
  return <UserList data={data} onRefresh={reload} />;
}