109.《hooks中useReducer的使用(计数器案例)》

最新推荐文章于 2023-10-29 17:40:32 发布

@逆风微笑代码狗

最新推荐文章于 2023-10-29 17:40:32 发布

阅读量102

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_44864082/article/details/119256920

版权

React Hooks useReducer useEffect 状态管理副作用

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

import React, { Component, useState,useReducer,useEffect } from 'react' 

function App(){
   let useReducerData= (state,action)=>{
        switch(action){
            case "add":
                return state + 1
            case "sub":
                return state - 1
            default:
                return state
        }
     }
     let [ count,dispatch ] = useReducer(useReducerData,0)

     useEffect(() => {
         console.log("1111111");
         return () => {
            console.log("2222222"); 
         }
     }, [])
    return (
        <div>
            <h1>这是我的数字：{count}</h1>
            <button onClick={()=>{dispatch("add")}}>+1</button>
            <button onClick={()=>{dispatch("sub")}}>-1</button>
        </div>
    )
}

export default App