首页 > 其他分享 >react中reduce基本使用

react中reduce基本使用

时间:2023-06-04 14:33:32浏览次数:37  
标签:基本 count const reduce react state return

import React ,{useReducer}from 'react';
import './App.css';


const App =() =>{


const reduce =(state,action)=>{

  const actionFn = {
     add:function(){
       return {
         ...state,
         count:state.count+1
       }
     }
   }
 
   return actionFn[action.type]();
 
 }
 
 const [state,dispatch] = useReducer(reduce,{count:0})
 
 const addCount = () =>{
   dispatch({type:'add'})
 }

  return (
     <div>
        <div>{state.count}</div>
        <button onClick={addCount}>+1</button>
     </div>

  );
}

export default App;

  

标签:基本,count,const,reduce,react,state,return
From: https://www.cnblogs.com/malong1992/p/17455635.html

相关文章

  • git的基本使用
    git的基本使用在git的命令行下,linux格式的命令是被接受的一.配置用户名和用户邮箱使用gitconfig--globaluser.name配置全局用户名,带参数就是配置,不带参数就是查看使用gitconfig--globaluser.email配置全局用户邮箱也可以在用户目录下的.gitconfig文件里添加......
  • 【React工作记录八十六】React+Hook+ts+antDesignMobile实现input自动获取功能
    前言大家好我是歌谣今天继续处理工作遇到的问题目前要做的问题是移动端需要做一个进入页面获取焦点的功能实现演示核心代码input上面绑定refs<InputonChange={handleChange}ref={inputRef}placeholder="请输入条形编码或者扫码录入"/>定义状态constinputRef:any=useRef(nul......
  • p1 文件的基本使用
    文件的基本使用一、文件什么是文件文件是保存数据的地方,比如word文档,txt文件,excel文件……都是文件。即可以保存一张图片,也可以保持视频,声音……文件流文件在程序中是以流的形式来操作的流:数据在数据源(文件)和程序(内存)之间经历的路径输入流:数据从数据源(文件)到程序(内存......
  • 进程的基本认识
    进程进程的提出是为什么?因为程序,计算机中运行程序是并不止一个的,为了如何方便地管理这些程序,操作系统提出了进程这个抽象的概念,相当于每一个进程都有一个运行中的程序进程能够同时执行是为什么?CPU的调度,也就是操作系统提出的上下文切换,通过保存和恢复进程在运行中的......
  • table.bootstrapTable() 之基本使用方法
    一、Html表格table属性设置如下 data-toggle="table"data-url="Url地址"data-pagination="true"data-search="true"data-show-columns="true"data-show-refresh="true"data-show-toggle="true"data-page-......
  • Request类源码分析、序列化组件介绍、序列化类的基本使用、常用字段类和参数、反序列
    目录一、Request类源码分析二、序列化组件介绍三、序列化类的基本使用查询所有和查询单条四、常用字段类和参数(了解)常用字段类字段参数(校验数据来用的)五、反序列化之校验六、反序列化之保存七、APIVIew+序列化类+Response写的五个接口代码八、序列化高级用法之source(了解)九、......
  • 【由浅到深】聊聊 Vue 和 React 的区别,看看你在哪个段位
    大家好,我是沐华。最近部门招人,捞了一批简历至少都是5年以上的前端来面试,其中不乏360的,腾讯的,简历上写的基本都是熟练使用Vue2、Vue3、React并阅读源码对其实现原理有自己的理解,实际问起来却不免让人唏嘘比如:既然两个框架都用过,那能说一下你觉得这俩有什么区别吗毕竟是两个框架,不......
  • 消息队列RocketMQ基本概念
     1消息模型(MessageModel)RocketMQ主要由Producer、Broker、Consumer三部分组成,其中Producer负责生产消息,Consumer负责消费消息,Broker负责存储消息。Broker在实际部署过程中对应一台服务器,每个Broker可以存储多个Topic的消息,每个Topic的消息也可以分片存储于不......
  • 在react里面刷新浏览器,不会触发componentWillUnmount事件
    今天遇见个小bug发现刷新浏览器,componentWillUnmount竟然不会触发。搜了一下,可能原因是浏览器刷新的时候,componentQillUnmout来不及触发,就被刷掉了。使用onbeforeunload事件可以完美解决这个问题。 ......
  • 【React工作记录八十三】React+Hook+ts+antDesign实现table行编辑功能
    前言大家好我是歌谣今天要说的是antdesign实现表格行编辑的功能考虑问题的时候我们需要多看官方的api开发开始紧接着我们对照着api进行开发首先加一个table<TableonChange={onTableChange}rowKey="id"......