react 内置hooks 详细使用场景，使用案例
useState
const [count, setCount] = useState(0);return ;useEffect
场景：
-
组件挂载时执行副作用（如请求数据、事件绑定）
-
依赖变化时触发逻辑
-
卸载清理操作
useEffect(() => { const id = setInterval(() => console.log(\'tick\'), 1000); return () => clearInterval(id); // 清理}, []);useContext
场景：状态逻辑复杂或状态之间有关联的情况。常用于表单或状态机。
多个组件传值，层级复杂的组件之间数据传递，避免因为props造成难以维护的痛点
创建 contextconst ThemeContext = React.createContext(\"light\");使用 Provider 包裹组件树 消费 contextconst theme = useContext(ThemeContext);return 当前主题：{theme};useReducer
适用于状态较复杂或状态之间关联性强的场景
基本语法const [state, dispatch] = useReducer(reducer, initialState);示例一：计数器const reducer = (state, action) => { switch (action.type) { case \'increment\': return state + 1; case \'decrement\': return state - 1; default: return state; }};const [count, dispatch] = useReducer(reducer, 0);useReducer + useContext 配合使用（全局状态管理）
const AppContext = createContext(null);const initialState = { user: null };function reducer(state, action) { switch (action.type) { case \'login\': return { ...state, user: action.payload }; case \'logout\': return { ...state, user: null }; default: return state; }}function AppProvider({ children }) { const [state, dispatch] = useReducer(reducer, initialState); return ( <AppContext.Provider value={{ state, dispatch }}> {children} );}function useApp() { return useContext(AppContext);}useCallback
场景：
-
父组件传递函数给子组件
-
避免组件重复渲染
const handleClick = useCallback(() => doSomething(id), [id]);useMemo
场景：
-
缓存计算结果
-
避免重复渲染时昂贵计算
const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]);useRef
场景：
-
访问 DOM 元素
-
保存可变值不触发重渲染（如定时器ID
const inputRef = useRef(null);useEffect(() => inputRef.current?.focus(), []);useImperativeHandle
场景：暴露子组件的内部方法给父组件（配合 forwardRef 使用）
useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus()}));useLayoutEffect
场景：
- 在 DOM 渲染之前同步执行副作用（如测量 DOM）
useLayoutEffect(() => { const height = ref.current.offsetHeight; // 设置样式}, []);与 useEffect 类似，但在 DOM 渲染前 执行，可能阻塞绘制。
useDebugValue
useDebugValue(state ? \"Online\" : \"Offline\");react18 相关hooks
useTransition
场景：将更新标记为“过渡”，提升响应性（如搜索输入）
const [isPending, startTransition] = useTransition();startTransition(() => setSearchQuery(value));useDeferredValue
场景：延迟某个值的更新，防止因频繁输入导致 UI 卡顿
const deferredQuery = useDeferredValue(query);useId
场景：在客户端和服务端生成一致的唯一 ID（用于可访问性）
const id = useId();useSyncExternalStore
场景：订阅外部 store（如 Redux、MobX、Zustand）
const state = useSyncExternalStore(subscribe, getSnapshot);useInsertionEffect
场景：比 useLayoutEffect 更早执行，用于样式注入等场景（如 CSS-in-JS）
useInsertionEffect(() => { // 注入样式}, []);
