【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;
相关推荐
盖头盖几秒前
【xss基本介绍】
前端·xss
一枚前端小能手8 分钟前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖9 分钟前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号14 分钟前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js
学习3人组15 分钟前
React JSX 语法讲解
前端·react.js·前端框架
小高00719 分钟前
🚨 2025 最该淘汰的 10 个前端 API!
前端·javascript·面试
一枚前端小能手21 分钟前
🎨 页面卡得像PPT?浏览器渲染原理告诉你性能瓶颈在哪
前端·javascript
lssjzmn29 分钟前
性能飙升!Spring异步流式响应终极指南:ResponseBodyEmitter实战与架构思考
java·前端·架构
毕设源码-郭学长34 分钟前
【开题答辩全过程】以 基于vue在线考试系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
詩句☾⋆᭄南笙39 分钟前
初识Vue
前端·javascript·vue.js