react hooks--useReducer用法
作者:互联网
useReducer是useState的替代方案,我们可以用它来处理复杂逻辑的state。此外它还可以和useContxt结合实现Redux进行状态管理。
一、基础用法
const [state, dispatch] = useReducer(reducer, initialState, initializer);
state:状态变量
dispatch:用于触发reducer 函数
reducer:reducer 函数,该函数接受state和action两个参数
initialState:状态的初始值
initializer:选填值。用于惰性提供初始状态
二、具体案例
通过useReducer实现数字的递增和递减操作。
import React, { useReducer } from 'react';
import './index.less';
function counter(count: number, action: string) {
switch (action) {
case 'inc':
return count + 1;
case 'dec':
return count - 1;
default:
return count;
}
}
const UseReducerExample: React.FC = () => {
const [count, dispatch] = useReducer(counter, 0);
return (
<div className="box-wrap">
<div>当前数字:{count}</div>
<div>
<button onClick={() => { dispatch('inc') }} >
数字+1
</button>
<button onClick={() => { dispatch('dec') }} >
数字-1
</button>
</div>
</div>
);
};
export default UseReducerExample;
三、效果展示
感谢您读完本文!如果本文对您有帮助,请点个赞呗,您的点赞是对我最大的支持和认可!
我的公众号:大前端教程,欢迎关注,会定期更新前端知识,希望能帮到您。
标签:count,return,--,hooks,reducer,useReducer,dispatch,react,state 来源: https://blog.csdn.net/w544924116/article/details/119021102