[JavaScript知识库]react—Hook中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本篇的文章就到这里啦，如果对你有帮助，点赞关注支持一下呀，后续会持续给大家带来优质内容~