React 語法擴展

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;

流程

在這里插入圖片描述
1.dispatch函數接收到action對象，根據不同的action對象觸發reduce函數
2.reducer管理的state變化，重新渲染ui

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/79412.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/79412.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/79412.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！