React Hook中使用Reducer详解

文章结构概览

• • useReducer

    • • 构建累加器功能

      • • 分解与重构表述

      • useReducer的应用情境

useReducer

在hooks机制中，能够为函数式组件赋予类似于Redux的功能，这与vuex在状态管理方面的用途相似。官方所提供的两种状态管理方式包括useState和useReducer。接下来，我们将共同探讨useReducer的具体使用方法。

累加器实现方法

以下是一个简单的示例，用于说明其使用方式，通过点击按钮实现数值的累加操作：

1. 首先需要在代码中导入useReducer，随后在适当的位置加以应用
2. 通过定义[state, dispatch]来获取useReducer返回的两个参数，因为useReducer本身接收两个输入，一个是用于处理状态更新的函数，另一个是初始状态值
3. 在按钮上绑定点击事件，当需要触发useReducer中的操作时，需调用dispatch函数。此外，在该函数内部进行条件判断，若接收到的action类型为add，则将当前状态值加1；否则保持原状态不变

    import React, { useReducer } from 'react'
    
    export default function