【React】useReducer

让 React 管理多个相对关联的状态数据

js 复制代码
import { useReducer } from "react"
// 1. 定义reducer函数,根据不同的action返回不同的状态
function reducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return state + action.payload
    case 'SUB':
      return state - 1
    default:
      return state
  }
}

function App() {
  // 2. 组件中调用 useReducer, 0 是初始化参数
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <div className="App">
      {state}
      {/* 3. 调用dispatch 产生一个新的状态,匹配事件(可传参) 更新 UI */}
      <button onClick={() => { dispatch({ type: 'ADD', payload:100 }) }}>+</button>
      <button onClick={() => { dispatch({ type: 'SUB' }) }}>-</button>
    </div>
  )
}

export default App;
相关推荐
颜酱1 小时前
实现一个mini编译器,来感受编译器的各个流程
前端·javascript·编译器
妄小闲1 小时前
网页源代码 企业网站源码 html源码网站
前端·html
Ares-Wang1 小时前
Vue3》》 ref 获取子组件实例 原理
javascript·vue.js·typescript
爱上妖精的尾巴2 小时前
5-16WPS JS宏 map数组转换迭代应用-1(一维嵌套数组结构重组)
开发语言·前端·javascript·wps·jsa
OEC小胖胖2 小时前
交互的脉络:小程序事件系统详解
前端·微信小程序·小程序·微信开放平台
DokiDoki之父2 小时前
web核心—HTTP
前端·网络协议·http
咖啡の猫2 小时前
Vue 简介
前端·javascript·vue.js
Moment2 小时前
写代码也能享受?这款显示器让调试变得轻松又高效!😎😎😎
前端·后端
゜ eVer ㄨ2 小时前
React-router v6学生管理系统笔记
前端·笔记·react.js
m0_526119403 小时前
pdf文件根据页数解析成图片 js vue3
前端·javascript·pdf