一、最基础必备 Hooks#

1. useState#

• 作用：定义组件状态变量，修改状态触发视图更新
• 场景：所有需要组件内状态管理的地方
  • 开关、计数器、表单输入、显示隐藏等

const [count, setCount] = useState(0)

2. useEffect#

• 作用：处理副作用（异步、DOM 操作、定时器、请求）
• 场景：
  • 发送网络请求
  • 订阅/取消订阅
  • 操作真实 DOM
  • 定时器/延时器

useEffect(()=>{
  // 请求、定时器
}, [])

3. useContext#

• 作用：跨组件共享数据，告别 props 层层传递
• 场景：
  • 全局主题、语言
  • 用户信息
  • 多层组件需要共享的数据

const value = useContext(MyContext)

二、性能优化 Hooks#

4. useMemo#

• 作用：缓存计算结果
• 场景：
  • 耗时计算（过滤、排序大量数据）
  • 缓存对象/数组，防止子组件重渲染

const total = useMemo(()=>count*1000, [count])

5. useCallback#

• 作用：缓存函数本身
• 场景：
  • 函数传递给子组件时
  • 配合 React.memo 防止子组件重复渲染

const handleClick = useCallback(()=>{}, [])

6. React.memo#

• 作用：缓存整个组件
• 场景：
  • 子组件频繁被父组件触发重渲染
  • 纯展示组件，props 不变就不更新

const Child = React.memo(Child)

三、DOM & 引用 Hooks#

7. useRef#

• 作用：
  1. 获取真实 DOM 元素
  2. 存储不需要渲染的变量（定时器 ID、上次值）
• 场景：
  • 获取 input、div 等 DOM
  • 存定时器、计数器，修改不触发渲染

const inputRef = useRef(null)
const timerRef = useRef(null)

8. useLayoutEffect#

• 作用：DOM 更新后、浏览器绘制前同步执行
• 场景：
  • 需要获取 DOM 最新尺寸/位置
  • 避免页面闪烁、布局抖动

useLayoutEffect(()=>{
  // 读取 DOM 布局
}, [])

四、状态管理增强 Hooks#

9. useReducer#

• 作用：复杂状态逻辑替代 useState
• 场景：
  • 状态多、逻辑复杂
  • 一个动作修改多个状态
  • 状态依赖之前的值

const [state, dispatch] = useReducer(reducer, initialState)

10. useImperativeHandle#

• 作用：子组件向父组件暴露方法
• 场景：
  • 父组件调用子组件函数
  • 自定义表单组件、弹窗组件

useImperativeHandle(ref, () => ({
  open, close
}))

超清晰总结表#

一句话记忆口诀#

状态修改用useState， 副作用用useEffect， 跨组件传值useContext， 缓存数值useMemo， 缓存函数useCallback， 获取 DOM 用useRef。