标签：count return -- hooks reducer useReducer dispatch react state

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。