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

import { useReducer } from "react"
// 1. 定义reducer函数，根据不同的action返回不同的状态
function reducer(state, action) {switch (action.type) {case 'ADD':return state + action.payloadcase 'SUB':return state - 1default: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;