React Hooks 自 16.8 版本引入以来，彻底改变了函数组件的开发范式，使状态逻辑复用、副作用管理与性能优化变得更加直观和可组合。在日常开发中，并非所有 Hooks 都同等常用，但掌握其中几个核心 API 已能覆盖绝大多数业务场景。以下结合实际开发经验，梳理最常用且最具价值的 React Hooks 及其典型应用场景。
useState：管理组件内部状态
useState 是最基础的状态 Hook，用于在函数组件中声明可变状态。它返回一个状态变量和一个更新函数，每次调用更新函数都会触发组件重新渲染。
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: '', email: '' });
适用场景：
- 表单输入值管理；
- 控制 UI 状态（如模态框显示/隐藏、选项卡切换）；
- 组件局部数据缓存。
注意点：setState 是异步的，且会替换整个状态对象（非合并），更新对象或数组时需使用展开语法或回调形式确保基于最新状态计算。
useEffect：处理副作用逻辑
useEffect 用于执行副作用操作，如数据获取、订阅、手动 DOM 操作等，相当于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
useEffect(() => {
const timer = setInterval(() => {
// 执行定时任务
}, 1000);
return () => clearInterval(timer); // 清理函数
}, []); // 依赖数组
关键规则：
- 无依赖数组 → 每次渲染后执行；
- 空依赖数组
[]→ 仅在挂载时执行一次； - 指定依赖 → 当依赖变化时执行；
- 返回清理函数 → 在组件卸载或下次 effect 执行前调用。
典型用途：
- 组件挂载时发起 API 请求；
- 监听窗口尺寸变化并更新布局；
- 订阅 WebSocket 或事件总线。
useMemo：缓存计算结果
useMemo 用于缓存昂贵的计算结果，避免在每次渲染时重复执行。
const expensiveValue = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);
使用原则：
- 仅当计算开销较大（如深度遍历、排序、格式化大数据）时使用；
- 依赖项变化才重新计算；
- 不要用于创建对象/函数以“优化子组件”——这通常适得其反，应优先使用
React.memo。
useCallback：缓存函数引用
useCallback 本质上是 useMemo 的特例，用于缓存函数实例，防止因函数引用变化导致子组件不必要的重渲染。
const handleClick = useCallback(() => {
console.log('Clicked');
}, []); // 无依赖，函数永不变化
适用场景：
- 传递给
React.memo包裹的子组件作为 prop； - 作为
useEffect的依赖项，避免无限循环； - 作为事件处理器传递给高频更新的子组件。
useRef：访问 DOM 或持久化可变值
useRef 返回一个可变的 ref 对象，其 .current 属性可保存任意值，且在组件整个生命周期内保持不变。
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus(); // 聚焦输入框
}, []);
两大用途：
- DOM 引用：获取原生 DOM 元素（如聚焦、测量尺寸）；
- 跨渲染持久化数据：存储定时器 ID、上一次 props/state 值等，不触发重渲染。
与 useState 不同，修改 ref.current 不会引发组件更新，适合存储不影响 UI 的中间状态。
useContext：跨组件共享状态
useContext 用于订阅 React Context，避免深层组件间通过 props 逐层传递。
const theme = useContext(ThemeContext);
适用场景：
- 全局配置（如主题、语言、用户信息）；
- 中间件式状态共享（如表单上下文、表格配置）；
- 替代简单的全局状态管理（小型项目）。
注意：Context 更新会导致所有消费该 Context 的组件重渲染，若性能敏感，应将 Context 拆分为多个细粒度上下文，或配合 useMemo 优化提供值。
自定义 Hooks：逻辑抽象与复用
除内置 Hooks 外，自定义 Hooks 是提升代码复用性的关键。通过组合基础 Hooks，可封装通用逻辑，如：
// useLocalStorage.js
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (e) {
return initialValue;
}
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
此类 Hooks 可在多个组件中复用，实现“关注点分离”。
总结：按需选择，避免过度使用
以上 Hooks 构成了 React 函数组件开发的主力工具集。实际项目中：
- 必用：
useState、useEffect； - 高频优化：
useCallback、useMemo（需有性能依据）； - 特定场景：
useRef、useContext； - 进阶复用：自定义 Hooks。
切忌为了“用 Hook”而用 Hook。例如，简单状态无需 useReducer，小规模共享状态不必引入 Redux。合理组合这些工具，才能写出既高效又可维护的 React 代码。
