1.代码展示

import { useReducer } from "react"// 1.定义reducer函数，根据不同action返回不同状态
function reducer(state, action) {console.log(state, action);switch (action.type) {case "INC":return state + 1break;case "DEC":return state - 1break;case "SET":return action.databreak;default:if(action.kanno==="SET"){return action.data}return statebreak;}
}function UseReducer() {// 2.组件中调用useReducer钩子函数，该钩子函数有两个参数，第一个参数（必须）是自己定义的逻辑处理方法，第二个参数（非必须）是变量的初始值const [state, dispatch] = useReducer(reducer,0)return (<div>{/* 3.调用dispatch((type:"INC"))=>通知reducer产生一个新的状态 使用这个新状态更新UI */}<button onClick={() => dispatch({ type: "DEC",data:66 })}>-</button>{state}<button onClick={() => dispatch({ type: "INC",data:88 })}>+</button><button onClick={() => dispatch({ kanno: "SET",data:100 })}>更新</button></div>)
}export default UseReducer

2.代码说明

自定义的reducer函数中的两个形参，第一个是变量，第二个是dispatch({ xxx: "xxx" })中传递过来的对象

3.效果展示

输出展示：console.log(state, action);

页面展示