Hooks 原理与自定义 Hook

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

function Form() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [email, setEmail] = useState("");
  // ...
}

// ——— 迷你 React 运行时 ———
const hookStates: unknown[] = [];
let cursor = 0;
let renderFn: () => void = function () {};
 
function useStateMini<T>(initial: T): [T, (next: T) => void] {
  const index = cursor;
  cursor++;
 
  if (!(index in hookStates)) {
    hookStates[index] = initial; // 只有首次渲染用得上初始值
  }
 
  function setState(next: T): void {
    hookStates[index] = next;
    renderFn(); // 触发重新渲染
  }
 
  return [hookStates[index] as T, setState];
}
 
function mount(component: () => void): () => void {
  renderFn = function () {
    cursor = 0; // 关键：每次渲染前把游标归零
    component();
  };
  renderFn();
  return renderFn;
}
 
// ——— 用它写一个组件 ———
let showEmail = true;
 
function Form(): void {
  const nameSlot = useStateMini("Ada");
  const ageSlot = useStateMini(36);
 
  // 危险写法：条件调用 Hook
  let emailValue = "(未渲染)";
  if (showEmail) {
    const emailSlot = useStateMini("ada@example.com");
    emailValue = emailSlot[0];
  }
 
  console.log(
    "render -> name=" + nameSlot[0] + " age=" + ageSlot[0] + " email=" + emailValue
  );
  console.log("        槽位内容: " + JSON.stringify(hookStates));
}
 
console.log("第 1 次渲染（三个 Hook 都调用）");
const rerender = mount(Form);
 
console.log("第 2 次渲染（条件为 false，只调用了两个 Hook）");
showEmail = false;
rerender();
 
console.log("第 3 次渲染（条件恢复，Hook 数量又变回三个）");
showEmail = true;
rerender();
 
console.log("三次渲染 name 都对，因为它永远是第 0 个");
console.log("一旦某个条件 Hook 之后还有别的 Hook，错位就会发生");

渲染 1（条件为真）：
  useState("Ada")     → 槽位 0
  useState("email")   → 槽位 1
  useState(36)        → 槽位 2
 
渲染 2（条件为假）：
  useState("Ada")     → 槽位 0   ✓
  useState(36)        → 槽位 1   ✗ 拿到的是 "email" 的值！

// 循环中调用（次数可能变化）
for (const item of items) {
  const [x] = useState(item);   // 禁止
}
 
// 提前 return 之后调用
if (!user) return null;
const [name] = useState("");     // 禁止：某些渲染走不到这里
 
// 嵌套函数中调用
function handleClick() {
  const [x] = useState(0);       // 禁止：调用时机不在渲染期
}

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((v) => !v), []);
  return [on, toggle] as const;
}
 
// 使用
function Panel() {
  const [open, toggleOpen] = useToggle();
  return <button onClick={toggleOpen}>{open ? "收起" : "展开"}</button>;
}

function A() {
  const [open, toggle] = useToggle();   // 一份独立的 state
}
 
function B() {
  const [open, toggle] = useToggle();   // 另一份完全独立的 state
}

function useDebounced<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);
 
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
 
  return debounced;
}
 
// 使用：输入停止 300ms 后才触发搜索
const query = useDebounced(input, 300);
useEffect(() => {
  if (query) search(query);
}, [query]);

function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    try {
      const raw = localStorage.getItem(key);
      return raw ? (JSON.parse(raw) as T) : initial;
    } catch {
      return initial;
    }
  });
 
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
 
  return [value, setValue] as const;
}

function useWindowSize() {
  const [size, setSize] = useState(() => ({
    w: window.innerWidth,
    h: window.innerHeight,
  }));
 
  useEffect(() => {
    function onResize() {
      setSize({ w: window.innerWidth, h: window.innerHeight });
    }
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
 
  return size;
}

function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T | undefined>(undefined);
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

function useSearchResults(rawInput: string) {
  const query = useDebounced(rawInput, 300);       // 复用防抖
  const [data, setData] = useState<Item[]>([]);
  const [loading, setLoading] = useState(false);
 
  useEffect(() => {
    if (!query) {
      setData([]);
      return;
    }
 
    let ignore = false;
    setLoading(true);
 
    search(query)
      .then((res) => {
        if (!ignore) setData(res);
      })
      .finally(() => {
        if (!ignore) setLoading(false);
      });
 
    return () => {
      ignore = true;
    };
  }, [query]);
 
  return { data, loading, isEmpty: !loading && query !== "" && data.length === 0 };
}

const Enhanced = withRouter(withTheme(withAuth(MyComponent)));

<Mouse render={(pos) => <Theme render={(t) => <Auth render={(u) => ...} />} />} />

const router = useRouter();
const theme = useTheme();
const user = useAuth();