在 React 16.8 版本中Hooks正式登场彻底改变了 React 组件的编写方式 —— 让函数组件也能拥有状态管理、生命周期、副作用处理等能力告别繁琐的类组件代码更简洁、逻辑更易复用。如果你刚接触 React Hooks一定会疑惑Hooks 到底是什么常用 Hooks 有哪些该怎么用这篇博客就用通俗语言 实战案例把 React Hooks 讲得明明白白新手也能直接上手。一、先搞懂什么是 React Hooks1. 核心定义Hooks 是 React 提供的特殊函数专门用于函数组件让你无需编写类组件就能使用 React 的核心特性状态、副作用、上下文、缓存等。简单说Hooks 函数组件的「能力扩展器」让函数组件替代类组件成为主流。2. 为什么要用 Hooks3 大优势告别类组件的繁琐不用写class、constructor、this代码量减少 50%逻辑复用更优雅避免类组件的高阶组件、渲染属性嵌套自定义 Hooks 可抽离公共逻辑代码更易读维护按业务逻辑拆分代码而非按生命周期拆分可读性直线提升。3. Hooks 3 大使用规则必记只能在函数组件 / 自定义 Hooks 中使用只能在组件顶层调用不能在循环、条件、嵌套函数中使用命名必须以use开头如useState、useEffect、自定义useUser。二、React 核心 Hooks 详解高频必用React 内置了 10 Hooks其中5 个是日常开发必用核心我们逐个拆解用法、场景、踩坑点。1. useState状态管理最基础作用为函数组件提供响应式状态类比 Vue 的ref/reactive状态变化自动更新视图。语法jsconst [状态变量, 修改状态的方法] useState(初始值);实战示例jsximport { useState } from react; function Counter() { // 定义状态count初始值0setCount 是修改方法 const [count, setCount] useState(0); return ( div p计数{count}/p {/* 修改状态必须用 set 方法不能直接赋值 */} button onClick{() setCount(count 1)}1/button /div ); }关键知识点初始值可以是基本类型 / 对象 / 数组修改状态必须用set方法直接赋值不会触发视图更新状态更新是异步的不能立即获取最新值。2. useEffect副作用处理最重要作用处理组件的副作用逻辑异步请求、定时器、订阅、DOM 操作替代类组件的生命周期componentDidMount/componentDidUpdate/componentWillUnmount。语法jsuseEffect(回调函数, 依赖数组);依赖数组决定执行时机核心无依赖数组组件首次渲染 每次更新都执行慎用易死循环空数组[]仅首次渲染执行一次等价componentDidMount指定依赖[state/props]依赖变化时执行等价componentDidUpdate回调返回清理函数组件卸载时执行等价componentWillUnmount。实战示例jsximport { useState, useEffect } from react; function User() { const [userId, setUserId] useState(1); const [user, setUser] useState(null); // 1. 首次加载 userId 变化时请求用户数据 useEffect(() { // 异步请求 const fetchUser async () { const res await fetch(https://api.example.com/user/${userId}); const data await res.json(); setUser(data); }; fetchUser(); // 2. 清理函数卸载时取消请求/定时器 return () console.log(组件卸载/依赖更新清理副作用); }, [userId]); // 依赖userId 变化就重新执行 return ( div button onClick{() setUserId(2)}切换用户/button p{user?.name}/p /div ); }踩坑提醒依赖数组必须包含回调中用到的所有外部变量否则会出现数据过时问题不要在useEffect中直接修改依赖状态会造成无限循环。3. useRefDOM 引用 跨渲染周期存值作用两个核心场景获取真实 DOM 元素的引用操作 DOM、获取焦点等存储跨渲染周期不变的值不会触发视图更新。实战示例jsximport { useRef, useEffect } from react; function InputFocus() { // 1. 创建 DOM 引用 const inputRef useRef(null); // 2. 存储不触发更新的变量如定时器ID const timerRef useRef(null); // 首次渲染自动聚焦输入框 useEffect(() { inputRef.current.focus(); // 通过 .current 获取 DOM // 存储定时器 timerRef.current setInterval(() console.log(计时), 1000); // 卸载清理定时器 return () clearInterval(timerRef.current); }, []); return input ref{inputRef} placeholder自动聚焦 /; }关键知识点访问引用值必须用.current修改ref.current不会触发组件重新渲染这是和useState最大区别。4. useContext跨组件传值解决 props 逐级传递作用配合React.createContext实现跨层级组件通信告别繁琐的 props 透传。实战示例jsximport { createContext, useContext, useState } from react; // 1. 创建上下文 const UserContext createContext(); // 父组件提供数据 function Parent() { const [user, setUser] useState({ name: 张三, age: 18 }); return ( UserContext.Provider value{user} Child / /UserContext.Provider ); } // 子组件直接使用数据无需 props 传递 function Child() { // 2. 使用 useContext 获取数据 const user useContext(UserContext); return p用户名{user.name}/p; }使用场景全局主题、用户信息、语言配置等全局共享状态多层级组件传值避免 props 层层嵌套。5. useMemo useCallback性能优化防止无效渲染这两个 Hooks 都是缓存优化核心作用避免组件不必要的重新渲染 / 重复计算。表格Hooks作用缓存对象useMemo缓存计算结果函数返回值useCallback缓存函数本身函数1useMemo缓存昂贵计算jsximport { useMemo, useState } from react; function List() { const [list] useState([1,2,3,4,5]); const [count, setCount] useState(0); // 缓存计算结果list 不变时不会重复计算 const total useMemo(() { console.log(计算总和); return list.reduce((a, b) a b, 0); }, [list]); // 仅 list 变化时重新计算 return ( div p总和{total}/p button onClick{() setCount(count1)}计数{count}/button /div ); }2useCallback缓存函数jsximport { useCallback, useState } from react; function Parent() { const [count, setCount] useState(0); // 缓存函数避免子组件重复渲染 const handleClick useCallback(() { setCount(count 1); }, [count]); return Child onClick{handleClick} /; }使用场景大型列表、复杂计算、频繁渲染的组件配合memo优化子组件渲染性能。三、自定义 Hooks抽离公共逻辑进阶核心作用将组件中的重复逻辑抽离成独立函数实现逻辑复用是 Hooks 最强大的能力。规则命名必须以use开头内部可以使用其他 Hooks可以返回状态、方法供组件使用。实战示例封装请求 Hooksjsx// 自定义 HooksuseRequest import { useState, useEffect } from react; // 抽离公共请求逻辑 function useRequest(url) { const [data, setData] useState(null); const [loading, setLoading] useState(true); const [error, setError] useState(null); useEffect(() { const fetchData async () { try { const res await fetch(url); const result await res.json(); setData(result); } catch (err) { setError(err); } finally { setLoading(false); } }; fetchData(); }, [url]); // 返回状态和数据 return { data, loading, error }; } // 组件中使用 function UserInfo() { // 直接使用无需重复写请求逻辑 const { data, loading, error } useRequest(https://api.example.com/user/1); if (loading) return div加载中.../div; return div{data?.name}/div; }优势一处封装多处使用代码更简洁、易维护。四、Hooks 速查表新手收藏表格Hooks核心作用类比类组件useState状态管理this.statethis.setStateuseEffect副作用 / 生命周期挂载 / 更新 / 卸载useRefDOM 引用 / 存值createRef/ 实例变量useContext跨组件传值Context APIuseMemo缓存计算结果性能优化useCallback缓存函数性能优化useReducer复杂状态管理Redux 简易版useLayoutEffect同步 DOM 操作同步版 useEffect五、新手必踩坑总结避坑指南Hooks 不能在条件 / 循环中使用必须放在顶层useEffect 依赖漏写会导致数据过时、逻辑异常直接修改 useState 状态不触发视图更新过度使用优化 HooksuseMemo/useCallback小组件无需优化自定义 Hooks 命名不以 use 开头React 无法识别。六、总结React Hooks 是 React 开发的未来主流彻底告别类组件的繁琐让函数组件成为主角基础必备useState状态useEffect副作用实用工具useRefDOM、useContext传值性能优化useMemo、useCallback进阶神器自定义 Hooks实现逻辑复用。新手学习建议先掌握 useState useEffect再逐步学习其他 Hooks最后尝试自定义 Hooks循序渐进就能完全吃透总结核心定位Hooks 让函数组件拥有类组件所有能力是 React 开发标准必学 5 大 HooksuseState/useEffect/useRef/useContext/useMemo核心能力状态管理、副作用处理、逻辑复用、性能优化最佳实践优先用函数组件 Hooks用自定义 Hooks 抽离公共逻辑。