react 内置hooks 详细使用场景，使用案例
useState
场景：组件中管理局部状态，如表单值、开关、计数器等。
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Click {count}</button>;useEffect
场景：
-
组件挂载时执行副作用（如请求数据、事件绑定）
-
依赖变化时触发逻辑
-
卸载清理操作
useEffect(() => {const id = setInterval(() => console.log('tick'), 1000);return () => clearInterval(id); // 清理
}, []);useContext
场景：状态逻辑复杂或状态之间有关联的情况。常用于表单或状态机。
多个组件传值，层级复杂的组件之间数据传递，避免因为props造成难以维护的痛点
创建 context
const ThemeContext = React.createContext("light");
使用 Provider 包裹组件树
<ThemeContext.Provider value="dark"><App />
</ThemeContext.Provider>
消费 context
const theme = useContext(ThemeContext);
return <div className={`theme-${theme}`}>当前主题：{theme}</div>;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);
<button onClick={() => dispatch({ type: 'increment' })}>+</button>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}</AppContext.Provider>);
}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<HTMLInputElement>(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();
<label htmlFor={id}>Name</label>
<input id={id} />useSyncExternalStore
场景：订阅外部 store（如 Redux、MobX、Zustand）
const state = useSyncExternalStore(subscribe, getSnapshot);useInsertionEffect
场景：比 useLayoutEffect 更早执行，用于样式注入等场景（如 CSS-in-JS）
useInsertionEffect(() => {// 注入样式
}, []);