React@16.x(25)useReducer

目录

1,介绍

这也是官方的一个HOOK,目的是更方便的使用 Redux。

Redux 后续会详细介绍。它的主体思想沿用了 Flux 数据流框架(也是 FaceBook 出品的)的思想,Vuex 也是同样的实现。

1.1,Flux 的设计思想

  1. 数据是单项流动的。

  2. 数据存储在数据仓库 state 中(可以将 useStatestate 简单理解为数据仓库)。

  3. action 是改变数据的唯一原因 ,它本质上是一个对象,有2个属性

    1. type,字符串,表示改变数据的动作类型;
    2. payload,any类型,表示动作的附加信息,也就是额外的参数。

    例如,添加一个学生:{ type: 'addStu', payload: { 学生对象的各种信息 } }

    例如,删除一个学生:{ type: 'deleteStu', payload: 学生id }

  4. reducer 改变数据的具体实现,是一个函数:

    1. 有2个参数
      1. state,表示当前数据仓库中的数据;
      2. action
    2. 必须有返回值,表示数据仓库变化后的数据。另外,Flux 要求对象是不可变的,所以要修改 state 必须创建新的对象。
    3. 必须是纯函数,不能有任何副作用。
    4. 不能直接调用,必须通过辅助函数 dispatch
  5. dispatch 是一个辅助函数,用于触发 reducer。该函数仅接收一个参数 action,并调用 reducer 来改变 state

2,实现

2.1,引入

先看个简单例子:

js 复制代码
export default function App() {
    const [n, setN] = useState(0);
    return (
        <div>
            <button
                onClick={() => {
                    setN(n - 1);
                }}
            >
                -
            </button>
            <span>{n}</span>
            <button
                onClick={() => {
                    setN(n + 1);
                }}
            >
                +
            </button>
        </div>
    );
}

用 Flux 的思想改造:

js 复制代码
function reducer(state, action) {
    let newState = state;
    if (action.type === "minus") {
        newState = state <= 0 ? 0 : state - 1;
    } else if (action.type === "add") {
        newState = state + 1;
    }
    return newState;
}

export default function App() {
    const [n, setN] = useState(0);
    function dispatch(action) {
        const newN = reducer(n, action);
        setN(newN);
    }
    return (
        <div>
            <button
                onClick={() => {
                    dispatch({ type: "minus" });
                }}
            >
                -
            </button>
            <span>{n}</span>
            <button
                onClick={() => {
                    dispatch({ type: "add" });
                }}
            >
                +
            </button>
        </div>
    );
}

注意,通过 Flux 的思想,只是为了把逻辑拆分的更细,便于管理状态 state

我要改变数据(dispatch),至于如何实现(reducer)并不关心。

而对使用状态的组件来说,影响并不大。因为完全可以直接使用 reducer 这个自定义函数。

2.2,实现 useReducer

dispatch 的实现很简单,所以可以考虑做成一个通用的 HOOK:useReducer

js 复制代码
import { useState } from "react";

export const useReducer = (reducerFunc, initState) => {
    const [state, setState] = useState(initState);
    function dispatch(action) {
        const newState = reducerFunc(state, action);
        setState(newState);
    }
    return [state, dispatch];
};

使用:

js 复制代码
export default function App() {
    const [n, dispatch] = useReducer(reducer, 0);
    // 其他内容...
}

3,官方实现

React 考虑到这一点,所以官方实现了 useReducer 这个HOOK函数,并且还有第3个可选参数:

该函数将 useReducer 的第2个参数作为它的参数,返回值作为 useReducer 中的 state 初始值。

js 复制代码
import { useReducer } from "react";

改造下自己实现的:

js 复制代码
import { useState } from "react";

/**
 * 通用的useReducer函数
 * @param { function } reducer reducer函数
 * @param { any } initialState 初始状态
 * @param { function } initFunc 计算初始值的函数
 */
export const useReducer = (reducerFunc, initState, initFunc) => {
    const [state, setState] = useState(initFunc ? initFunc(initState) : initState);
    function dispatch(action) {
        const newState = reducerFunc(state, action);
        setState(newState);
    }
    return [state, dispatch];
};

以上。

相关推荐
敢敢J的憨憨L18 分钟前
GPTL(General Purpose Timing Library)使用教程
java·服务器·前端·c++·轻量级计时工具库
喝拿铁写前端30 分钟前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架
美酒没故事°1 小时前
npm源管理器:nrm
前端·npm·npm源
用户22152044278001 小时前
vue3组件间的通讯方式
前端·vue.js
三十_A1 小时前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
下位子1 小时前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒1 小时前
Vue单文件组件到底需不需要写name
前端·vue.js
用户47949283569151 小时前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影1 小时前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天1 小时前
CSS 属性值的计算与过程
前端