【随笔二】useReducer详解及其应用场景 怼烎@ 2024-03-26 19:49 33阅读 0赞 ## 前言 ## `useReducer` 实际上是 useState 的升级版,都是用来存储和更新 state,只是应用的场景不一样。 一般情况下,我们使用 `useState` 就足够项目需要了,不多当遇到以下场景时,使用useReducer 会更好些 。 * **状态逻辑复杂**:当状态的更新逻辑比较复杂时,使用 `useReducer` 可以将这个逻辑封装在 **reducer** 函数中,使代码更加清晰易懂。 * **多组件共享状态**:当多组件需要共享一个状态时,可以将这个状态放在父组件,然后通过 `useReducer` 将状态和更新函数传递给子组件,从而实现状态共享。 * **需要处理连续的多个状态更新**:当需要连续处理多个状态更新时,使用 `useReducer` 可以帮助我们更好地管理状态的变化和更新。 ## 1. useReducer 参数 ## **接收 3 个参数:** * **reducer 函数**:(state, action)=> newState 在使用 useReducer 时,我们需要先定义一个 **reducer** 函数,这个函数接收 **2个参数** `state` :是当前最新的状态值 `action`:用于告诉 `reducer` 当前执行的操作,reducer 会根据不同的操作执行不同的逻辑,从而更新不同的 state `newState`:返回值,返回一个新的state reducer 是一个纯函数,没有任何 UI 和 副作用。 * **initState** 这个没什么好说的,是指初始的state * **init** :是一个函数,`(inState)=> initialState` **这个参数是`可选`的,是一个函数,参数是初始的state。如果传入了这个参数,那么 `初始state` 就是 init(initState) 的返回结果** ## 2. useReducer 返回值 ## **返回的是一个数组** // const [state, dispatch] = useReducer(reducer, initState, getInitData); * `state` :当前的state * `dispatch`:是一个函数,`(action) => void` 通过调用 `dispatch` 传入 `action`,来告诉 `reducer` 应该执行什么操作,然后更新 `state` 比如: dispatch({ type: 'ADD', playod: 'xxx'}) 举一个简单的例子: import { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'increment': return state + 1; case 'decrement': return state - 1; default: throw new Error(); } } function Counter() { const [count, dispatch] = useReducer(reducer, 0); return ( <div> <p>Count: { count}</p> <button onClick={ () => dispatch({ type: 'increment' })}>Increment</button> <button onClick={ () => dispatch({ type: 'decrement' })}>Decrement</button> </div> ); } 在上面的例子中,定义了一个 `reducer` 函数来管理状态的变化,它根据传入的 `action` 来执行不同的逻辑,返回新的状态。 在组件中,我们使用 `useReducer` 来初始化状态,并获取到一个 `dispatch` 函数来触发状态的更新。 点击按钮,会调用 `dispatch` 函数,并传入一个包含 `type` 属性的对象(即action)。这个对象用来表示将要进行的状态更新操作。 ## 注意: ## 使用 `useReducer` 可以帮助我们更好的管理组件状态,使代码更易于维护和调试。不过,在一般情况下,使用 `useState` 可能会更加简单和高效,我们在日常开发中,需要根据实际情况进行评估。
相关 Java垃圾回收机制详解及其应用场景 Java的垃圾回收机制(Garbage Collection,GC)是Java自动内存管理的重要部分。简单来说,它是一个负责检测和清除不再使用的对象的机制。 ### 垃圾回收 超、凢脫俗/ 2024年09月10日 12:18/ 0 赞/ 16 阅读
相关 Nacos简介及其应用场景 Spring Cloud Alibaba Spring Cloud Netflix项⽬进⼊维护模式 Spring Cloud Alibaba 能够提供微服务开发的⼀站 向右看齐/ 2024年04月03日 10:31/ 0 赞/ 45 阅读
相关 【随笔二】useReducer详解及其应用场景 前言 `useReducer` 实际上是 useState 的升级版,都是用来存储和更新 state,只是应用的场景不一样。 一般情况下,我们使用 `useState` 怼烎@/ 2024年03月26日 19:49/ 0 赞/ 34 阅读
相关 归并排序及其应用场景 文章目录 一、归并排序的概念 二、归并排序递归与非递归实现 三、归并排序应用场景 四、归并排序总结 一、归并排序的概念 ![在这里插入图片 「爱情、让人受尽委屈。」/ 2022年09月12日 03:55/ 0 赞/ 186 阅读
相关 autoMapper(二)--应用场景 紧接上文[autoMapper基本应用][autoMapper],下面说说他的其他应用场景 1、IDataReader映射 布满荆棘的人生/ 2022年08月06日 07:07/ 0 赞/ 121 阅读
相关 mysql参数详解及其应用场景介绍 一、innodb\_flush\_log\_at\_trx\_commit 这是关系到事务日志的一个参数,0或者2,只是定时的刷新到log buffer, 事务日志..不 系统管理员/ 2022年08月06日 04:05/ 0 赞/ 221 阅读
相关 二级缓存应用场景及其局限性 二级缓存应用场景 适用于访问次数多且用户对查询结果实时性要求不高的查询,采用二级缓存可降低数据库访问量,提高访问速度,应用场景——耗时较高的统计分析sql、通讯记录查询( 今天药忘吃喽~/ 2022年06月15日 07:07/ 0 赞/ 227 阅读
相关 Filter过滤器应用场景及其使用 过滤器Filter作用 过滤器可以再请求和响应之前做一部分预处理,有效的过滤掉不需要的内容,而且过滤器可以被复用,节省了大量的复用代码,提高了java的代码执行效率 超、凢脫俗/ 2022年05月25日 10:23/ 0 赞/ 165 阅读
相关 反射机制及其应用场景 反射----1 反射机制 反射的应用场景 Tomcat服务器 1. Java的反射机制 (1).反射和类的关系 在程序运行状态中,对任意一个 比眉伴天荒/ 2021年09月26日 15:54/ 0 赞/ 371 阅读
还没有评论,来说两句吧...