react—Hook中useReducer详解(举个例子 )

简介: 在hooks中,可以为函数式组件提供类似Redux的功能,类似于vuex都是提供状态管理的。官方提供的两种state管理:useState,useReducer。下面我们一起来看看useReducer的用法

useReducer

在hooks中,可以为函数式组件提供类似Redux的功能,类似于vuex都是提供状态管理的。官方提供的两种state管理:useState,useReducer。下面我们一起来看看useReducer的用法

实现累加器

举个简单例子来了解它的使用方法,点击按钮实现累加:
1.首选前面要引入useReducer,后面要使用它
2.定义[state, dispatch]来接收我们后面的useReducer,因为useReducer包含两个参数,一个参数为useReducer的函数,一个为初始值
3.在按钮中绑定点击事件,触发useReducer的事件需要使用dispatch,另外我们这里在函数中进行判断,如果action为add就累加1,否则返回state

import React, { useReducer } from 'react'

export default function App() {
    const [state, dispatch] = useReducer((state, action) => {
        if(action === 'add') {
            return state+1
        }
        return state
    }, 0)
    return (
        <div>App
            <h1>{state}</h1>
            <button onClick={() => dispatch('add')}>+1</button>
        </div>
    )
}

这样就实现了效果:
在这里插入图片描述
上面代码中注意区分,useReducer中箭头函数后面的第一个值为操作状态的函数(累加的-判断),第二个值为0(初始值)

我们还可以使用case改写一下,加个功能:
原理都是一样的,使用这里的dispatch进行操作

export default function App() {
    const [state, dispatch] = useReducer((state, action) => {
        switch(action) {
            case 'add':
                return state+1
            case 'sub':
                return state-1
            default:
                return state
        }
    }, 0)
    return (
        <div>App
            <h1>{state}</h1>
            <button onClick={() => dispatch('add')}>+1</button>
            <button onClick={() => dispatch('sub')}>-1</button>
        </div>
    )
}

实现效果:
在这里插入图片描述

拆分改写

为了让大家看的更清楚用法,下面再给大家看一种写法,把上面的进行拆分,实现一样的功能:

const iniState = {count:0}

function reducer(state, action) {
    switch(action.type) {
        case 'add':
            return {count: state.count + 1}
        case 'sub':
            return {count: state.count - 1}
        default:
            throw new Error()
    }
}
export default function App() {
    const [state, dispatch] = useReducer(reducer,iniState)
    return (
        <div>App
            <h1>{state.count}</h1>
            <button onClick={() => dispatch({type: 'add'})}>+1</button>
            <button onClick={() => dispatch({type: 'sub'})}>-1</button>
        </div>
    )
}

这里就相当于把useReducer的两个参数单拿出来写,并且在dispatch中传什么值都是可以的,我这里传的是对象,把函数和初始值单拿出来写也是可行的,实现一样的效果

useReducer的使用场景

  1. 如果说你的state是一个数组或者是对象
  2. 如果你的state变化很复杂,经常一个操作需要修改很多的state
  3. 如果你的应用比较大,希望UI和业务能够分开维护的时候

OK本篇的文章就到这里啦,如果对你有帮助,点赞关注支持一下呀,后续会持续给大家带来优质内容~

相关文章
|
4月前
|
前端开发
react中 useContext 和useReducer的使用
react中 useContext 和useReducer的使用
react中 useContext 和useReducer的使用
|
1月前
|
前端开发 JavaScript 中间件
React中使用​​useReducer​​​高阶钩子来管理状态
通过本文的介绍,您可以在React中使用 `useReducer`高阶钩子来管理复杂的状态逻辑。`useReducer`不仅提供了清晰的状态管理方式,还可以通过与 `useContext`结合,实现全局状态管理。此外,通过自定义中间件,可以进一步扩展其功能。希望本文对您理解和应用 `useReducer`有所帮助。
42 0
|
4月前
|
前端开发
React 中的 Hook 概念
【8月更文挑战第31天】
41 0
|
5月前
|
前端开发
React useImperativeHandle Hook
【7月更文挑战第1天】React useImperativeHandle Hook
32 3
|
5月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
106 1
|
5月前
|
前端开发
Vue3 【仿 react 的 hook】封装 useTitle
Vue3 【仿 react 的 hook】封装 useTitle
60 0
|
5月前
|
前端开发 API
Vue3 【仿 react 的 hook】封装 useLocation
Vue3 【仿 react 的 hook】封装 useLocation
45 0
|
5月前
react18【系列实用教程】useReducer —— 升级版的 useState (2024最新版)
react18【系列实用教程】useReducer —— 升级版的 useState (2024最新版)
69 0
|
7月前
|
前端开发 JavaScript
React中的状态管理:useState与useReducer的使用与探讨
【4月更文挑战第25天】本文探讨了React中构建动态界面的关键——状态管理,重点关注`useState`和`useReducer` Hook。`useState`适用于简单状态管理,例如计数器,而`useReducer`在处理复杂逻辑和多个状态更新时更具优势,提供更好的组织和可维护性。选择使用哪个取决于状态逻辑复杂度、可维护性和性能需求。合理运用这两个工具能实现高效、可维护的React应用。
|
7月前
|
前端开发 JavaScript
深入理解React中的useReducer:管理复杂状态逻辑的利器
深入理解React中的useReducer:管理复杂状态逻辑的利器