Hooks 之前，函数组件是「无状态」的纯展示组件，要状态必须写 class。Hooks（16.8+）把状态管理、副作用、上下文订阅等能力以函数形式开放：useState 存状态、useEffect 处理副作用、useRef 持有可变引用、useMemo/useCallback 做性能优化、useContext 读跨层上下文。
两条铁律必须背熟：① 只能在函数组件的最顶层调用（不能在循环/条件/嵌套函数里）——React 依靠调用顺序来对应每个 hook 的状态槽位；② 只能在函数组件或自定义 Hook 里调用。自定义 Hook（useXxx）是复用逻辑的手段：把状态相关逻辑打包，组件间共享。
const { useState, useEffect, useRef } = React;
function Demo() {
const [count, setCount] = useState(0); // 状态
const inputRef = useRef(null); // 持有引用（不触发重渲染）
useEffect(() => {
document.title = '点击 ' + count + ' 次'; // 副作用
}, [count]);
if (count < 0) {
// useState(0); // ✗ 铁律：条件里调 hook，count 变化会错乱
}
return <input ref={inputRef} onClick={() => setCount(count + 1)} />;
}
// 自定义 Hook：逻辑复用单元
function useLocalStorage(key, init) {
const [v, setV] = useState(localStorage.getItem(key) ?? init);
useEffect(() => localStorage.setItem(key, v), [v]);
return [v, setV];
}