首页 > 其他分享 >react useReducer 的基本用法

react useReducer 的基本用法

时间:2024-08-19 10:09:14浏览次数:10  
标签:count const useReducer dispatch 用法 react return type payload

const { createRoot } = ReactDOM
const { useState, useReducer, useEffect } = React
const root = createRoot(document.getElementById('app'))

function App() {
    // const [count, setCount] = useState(0)

    // 搜集所有的操作某一个数据的方案
    // 派发其  传入的不同操作类型  调用不同的操作逻辑
    const countReducer = (count, { type, payload }) => {
        console.log('count : ', count)
        switch (type) {
            case 'ADD':
                return count + payload
            case 'MINUS':
                return count - payload
            case 'MUL':
                return count * payload
            case 'DIV':
                return count / payload
            default:
                return count;
        }
    }

    /* useReducer 两个函数: reducer 函数 状态的初始值 */
    /* useReducer 返回两个值:  状态的值 dispatch 派发器 */
    const [count, dispatch] = useReducer(countReducer, 0)
    // const handleAdd = () => setCount(count + 2)

    console.log('dispatch : ', dispatch)


    useEffect(() => {
        console.log('组件挂载!!!')
    },  []) /* null undefined [] 其他值回报警 */

    return <div>
        <p>值: {count}</p>
        <div>
            <button onClick={() => dispatch({ type: 'ADD', payload: 1 })} >+</button>
            <button onClick={() => dispatch({ type: 'MINUS', payload: 1 })} >-</button>
            <button onClick={() => dispatch({ type: 'MUL', payload: 2 })} >*</button>
            <button onClick={() => dispatch({ type: 'DIV', payload: 3 })} >/</button>
        </div>
    </div>
}

root.render(<App></App>)

  

标签:count,const,useReducer,dispatch,用法,react,return,type,payload
From: https://www.cnblogs.com/rose-sharon/p/18366761

相关文章

  • char 和varchar 区别与用法以及效率
    char(固定长度字符)定义:CHAR(n)表示一个固定长度的字符字段,n是字符的长度。即使实际存储的数据短于n,也会自动用空格填充到指定长度。存储方式:因为长度固定,所以每个CHAR(n)字段都占用n个字节,不论实际存储的数据长度如何。效率:读取效率:在处理固定长度的数据时,CHAR通常会......
  • typedef在C/C++的用法
    typedef是C和C++中的一个关键字,用于为已有的数据类型创建新的类型名。它的主要用途如下:1.定义别名typedef最基本的功能是为一个现有的类型定义一个别名,使代码更简洁或更具可读性。例如:typedefunsignedlongulong;ulonga,b;这段代码将unsignedlong类型重......
  • 011、Vue3+TypeScript基础,template中ref的用法意义
    1、如果多个页面都用同一个id,那么就会报错。用ref可以指明是某个元素,规避报错情况。App.vue代码如下:<template><divclass="app"><h2ref="title2">好好学习,天天向上</h2><button@click="showLog">点我输出h2元素</button><Person/&g......
  • 虚函数的定义、用法以及纯虚函数和虚析构函数
    虚函数虚函数是一种成员函数,它允许子类重写(override)父类中定义的函数。虚函数的重要意义便是实现多态性。多态性是面向对象编程的一个核心概念:即同一个接口可以有不同的实现,从而实现代码的灵活性和通用性目录1.虚函数的定义2.虚函数的用法3.纯虚函数和抽象类4.虚析......
  • 009、Vue3+TypeScript基础,ref和reactive的区别
    01、App.vue代码如下:<template><divclass="app"><h1>好好学习,天天向上</h1><Person/></div></template><script>//JS或TSimportPersonfrom'./view/Person.vue'exportdefault{//......
  • 【vue讲解:vue3介绍、setup、ref、reactive、监听属性、生命周期、toRef、setup写法】
    1vue3介绍#Vue3的变化 -vue3完全兼容vue2---》但是vue3不建议用vue2的写法 -拥抱TypeScript -之前咱们用的JavaScript---》ts完全兼容js-组合式API和配置项API vue2是配置项apivue3组合式api#vue4必须要用2vue3项目......
  • 007、Vue3+TypeScript基础,使用reactive让界面数据变成响应式
    01、App.Vue代码:<template><divclass="app"><h1>好好学习,天天向上</h1><Person/></div></template><script>//JS或TSimportPersonfrom'./view/Person.vue'exportdefault{//Ap......
  • Git 高级用法详解
    文章目录Git高级用法详解标签管理1.1创建标签1.2查看标签1.3推送标签变基操作(Rebase)2.1变基的基本操作2.2处理变基时的冲突2.3交互变基解决冲突3.1合并冲突3.2变基冲突撤销更改4.1撤销未提交的更改4.2撤回已提交的更改4.3重置分支与远程仓库交互5.1添加......
  • how much 搭配用法 coca 大写小写混合
    Allofthe"slots"inyoursearcharetoofrequentforacollocatessearch.Youneedtodoatleastoneofthefollowing:1.Searchforcollocatesofasingleword,ratherthanaphrase.2.Makesurethatatleastoneofthe"slots"has......
  • React 的虚拟 DOM 和 Vue 的虚拟 DOM 有什么区别?
    React和Vue都使用虚拟DOM(VirtualDOM)来实现高效的UI渲染。1.引言介绍虚拟DOM的概念和重要性。提到React和Vue都采用了虚拟DOM来优化视图更新过程。2.什么是虚拟DOM?定义虚拟DOM:它是一种用JavaScript对象表示UI结构的技术。解释虚拟DOM如何与......