当前位置：首页 > ai >正文

React 语法扩展

ai 2025/5/9 3:30:55

useReducer钩子函数

在这里插入图片描述

不同action类型返回不同处理行为

在这里插入图片描述

useState()函数返回解构为两个值 state当前状态 dispatch修改状态函数
在这里插入图片描述

dispatch()函数参数为一个actuon对象如：

在这里插入图片描述

样例：
在这里插入图片描述

import { useReducer } from 'react';
import './App.css';// 定义一个Reducer函数 根据不同的action进行不同的状态修改 function reducer(state,action){switch(action.type){case `INC`:return state+1case `DEC`:return state-1 default:return state}
}// 调用useReducer函数将reducer函数作为参数并设定初始状态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></div>);
}export default App;

额外传递参数、

在这里插入图片描述

import { useReducer } from 'react';
import './App.css';// 定义一个Reducer函数 根据不同的action进行不同的状态修改 function reducer(state,action){switch(action.type){case `INC`:return state+1case `DEC`:return state-1 case `SET`:return action.payloaddefault:return state}
}// 调用useReducer函数将reducer函数作为参数并设定初始状态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:9527})}}>更新</button></div>);
}export default App;