数据结构
网络
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 次浏览
广告