React - useReducer

suaxi

2026-04-12 / 0 评论 / 2 阅读 / 正在检测是否收录...

04/12

作用：和 useState 类似，用于管理相对复杂的状态数据

基础用法：

定义 reducer 函数
组件中调用 useReducer，并传入 reducer 函数和初始值
通过 dispatch 函数分派一个 action 对象（通知 reducer 要返回哪个新状态并渲染 UI）

import { useReducer } from 'react'

function reducer(state, action) {
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'SET':
      return action.payload
    default:
      return state
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, 0)
  return <div className="App">{state}
  <button onClick={() => {dispatch({type: 'INC'})}}>+</button>
  <button onClick={() => {dispatch({type: 'DEC'})}}>-</button>
  <button onClick={() => {dispatch({type: 'SET', payload: 100})}}>SET</button>
  </div>
}

export default App

React