資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚學
法律學ReactJS – useReducer 鉤子
此鉤子是 useState 鉤子的更好替代品，因為當我們想要附加一個函式來一起處理狀態或者當我們想要根據之前的值來處理狀態時，就會使用它。
語法
const [state, dispatch] = useReducer(reducer, initialArgs, init);
引數
Reducer − 用於處理或更新狀態的函式
initialArgs − 初始狀態
Init − 懶載入狀態或按需載入狀態
示例
在此示例中，我們將使用 useReducer 鉤子來構建一個簡單的計算器，它可以接收使用者的輸入並相應地顯示結果。
App.jsx
import React, { useReducer } from 'react';
const initialState = 0;
const reducer = (state, action) => {
switch (action) {
case 1:
return state + 1;
case 2:
return state + 2;
case 3:
return state + 3;
case 'Reset':
return 0;
default:
throw new Error('Error');
}
};
const App = () => {
const [ans, dispatch] = useReducer(reducer, initialState);
return (
<div>
<h2>{ans}</h2>
<button onClick={() => dispatch(1)}>Add 1</button>
<button onClick={() => dispatch(2)}>Add 2</button>
<button onClick={() => dispatch(3)}>Add 3</button>
<button onClick={() => dispatch('Reset')}>reset</button>
</div>
);
};
export default App;在以上示例中，當用戶點選任意按鈕時，就會派發該動作，然後更新狀態並相應顯示更新的狀態。
輸出
將會產生以下結果。
更新於： 19-Mar-2021
633 次瀏覽
廣告