React 中常用的 Hook 的总结表格

React 中常用的 Hook 的总结表格，包括每个 Hook 的用途和简单示例：

Hook	用途	示例代码
useState	声明状态变量，管理组件内的状态。	const [count, setCount] = useState(0);
useEffect	执行副作用，如数据获取、订阅或手动 DOM 操作。可以依赖某些状态变化。	useEffect(() => { fetchData(); }, [count]);
useContext	获取上下文（Context）数据，用于组件之间的共享状态。	const value = useContext(MyContext);
useReducer	创建一个可控的状态更新逻辑，通常用于复杂状态管理，类似于 Redux。	const [state, dispatch] = useReducer(reducer, initialState);
useCallback	返回一个记忆化的回调函数，避免子组件重复渲染。	const handleClick = useCallback(() => { /*...*/ }, [dep]);
useMemo	返回一个记忆化的值，用于避免昂贵的计算在每次渲染时都执行。	const memoizedValue = useMemo(() => computeExpensiveValue(), [dep]);
useRef	获取 DOM 元素或保存跨渲染周期的数据。	const inputRef = useRef(null);
useImperativeHandle	暴露自定义的实例方法给父组件，通常结合 forwardRef 使用。	useImperativeHandle(ref, () => ({ customMethod() { ... }}));
useLayoutEffect	类似 useEffect，但在 DOM 更新后立即同步执行。通常用于读取 DOM 布局并同步调整。	useLayoutEffect(() => { /*...*/ }, [dep]);
useDebugValue	用于自定义 React 开发工具中显示的 Hook 标签，便于调试。	useDebugValue(isOnline ? 'Online' : 'Offline');
useTransition	控制并发状态，用于标记某些状态更新为“过渡”状态，提升用户体验。	const [isPending, startTransition] = useTransition();
useDeferredValue	延迟状态更新，通常用于改善较慢状态更新的用户体验。	const deferredValue = useDeferredValue(value);
useId	生成稳定的唯一 ID，便于无冲突的访问元素或用于列表项的 key。	const id = useId();
useSyncExternalStore	订阅外部数据源，确保数据与 UI 同步更新。	const state = useSyncExternalStore(subscribe, getSnapshot);
useInsertionEffect	用于在渲染 DOM 之前同步注入样式，通常用于 CSS-in-JS 库。	useInsertionEffect(() => { /*...*/ });