React 笔记

Hooks

useState → 开关按钮
- 用法：const [count, setCount] = useState(0) // 初始值
- 功能：给组件装个状态开关
- 使用场景：按钮点击计数、表单输入值
- 防坑：状态更新是异步的！用函数更新保证最新值：setCount(prev => prev + 1) // ✅正确姿势
useEffect → 管家机器人
```
useEffect(() => {
  // 开机动作（组件挂载）
  const timer = setInterval(...)
  
  return () => {
    // 关机清理（组件卸载）
    clearInterval(timer)
  }
}, [dependencies]) // 依赖项
```
- 功能：组件生老病死的生命周期管家
- 使用场景：
  - 数据请求（挂载时fetch）
  - 事件监听（挂载add/卸载remove）
  - 定时器（挂载set/卸载clear）
- 防坑：
  - 忘写依赖项 → 触发无限循环
  - 空依赖[] → 只在挂载/卸载执行
  - 不清理定时器/事件 → 内存泄漏警告⚠️
  - 通过浅比较（!==）判断数组内的变量，函数需要使用useCallback
useContext → 大喇叭
```
// 1. 创建Context
const ThemeContext = createContext('light')

// 2. 外层包裹Provider
<ThemeContext.Provider value="dark">

// 3. 子组件接收
const theme = useContext(ThemeContext)
```
- 功能：跨组件传值不用props层层传递
- 使用场景：主题切换、用户登录状态全局共享
- 防坑：频繁变化的context会导致所有消费者重新渲染，搭配memo使用更佳

useReducer → 高级版useState

const initialState = { count: 0 }

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    default:
      return state
  }
}

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

功能：适合复杂状态逻辑（比如表单多字段管理）
使用场景：购物车增减商品、多步骤表单
防坑：小状态用useState更简单，别杀鸡用牛刀

useCallback → 函数保鲜膜
```
const handleClick = useCallback(() => {

  // 依赖项变化才重新创建函数

}, [deps])
```
- 功能：缓存函数，避免子组件无意义重渲染
- 使用场景：传给子组件的回调函数
- 防坑：滥用反而降低性能，只在必要时使用
useMemo → 计算器缓存
```
const expensiveValue = useMemo(() => {
  return heavyCalculation(a, b)
}, [a, b]) // a或b变化才重新计算
```
- 功能：缓存计算结果，避免重复计算
- 使用场景：复杂计算、大数据量过滤排序
- 防坑：不要用它处理副作用（副作用交给useEffect）

useRef → 保险箱

const inputRef = useRef(null)

<input ref={inputRef} />

// 访问DOM
inputRef.current.focus()

// 存任意可变值（不会触发渲染）
const intervalId = useRef()
intervalId.current = setInterval(...)

功能：
- 访问DOM节点
- 保存与渲染无关的变量
防坑：修改.current不会触发重新渲染！

useLayoutEffect → useEffect的急脾气兄弟
- 区别：在浏览器绘制前同步执行
- 使用场景：需要测量DOM尺寸后立即更新样式
- 防坑：滥用会导致页面卡顿，90%情况用useEffect就行
useDebugValue → 调试小标签
```
useDebugValue(isOnline ? 'Online' : 'Offline')
```
- 功能：在React开发者工具中显示自定义Hook的标签

useId → 生成唯一ID

const id = useId() // 生成如 :r1:
<label htmlFor={id}>Email</label>
<input id={id} />

防坑：不要用于列表key！用数据自身的id

useTransition → 让更新丝滑

const [isPending, startTransition] = useTransition()

startTransition(() => {
  setState(newValue) // 非紧急更新
})

使用场景：搜索框输入时延迟更新结果列表

useDeferredValue → 延迟显示值
```
const deferredValue = useDeferredValue(value)
```
- 使用场景：和防抖节流类似，但更React-way

📝 总结表（保存这张就够了！）

Hook名称	江湖称号	使用场景	防坑重点
`useState`	状态开关	管理组件内部状态	异步更新用函数式
`useEffect`	管家机器人	副作用操作	记得清理和填依赖
`useContext`	跨组件喇叭	全局主题/用户状态	搭配`memo`防过度渲染
`useReducer`	状态管理器	复杂状态逻辑	简单状态别用
`useCallback`	函数保鲜膜	优化子组件渲染	不要滥用
`useMemo`	计算器缓存	缓存昂贵计算	别用来处理副作用
`useRef`	万能保险箱	存DOM引用/任意可变值	修改不会触发渲染
`useLayoutEffect`	急性子管家	DOM操作后立即更新	谨慎使用防卡顿
`useTransition`	更新润滑剂	区分紧急/非紧急更新	提升用户体验
`useDeferredValue`	延迟显示镜	延迟显示非关键内容	替代防抖的好选择

最后口诀：
useState管状态，useEffect搞副业，
useContext传全局，useRef存东西，
性能优化三兄弟，memo、callback加useMemo！