我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文主要学习react中的useReducer的函数,如何使用。在redux系列文章中,大家已经知道了reducerstate的概念。这两个概念在纯正的react项目中,也是存在的。react中修改简单的state数据的时候,使用useState。修改复杂大量的数据的时候,可以选择useReducer

苏南大叔:react教程,如何使用useState的升级版hook函数useReducer? - usereducer
react教程,如何使用useState的升级版hook函数useReducer?(图5-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述react中的useReducer函数的使用方法。测试环境:create-react-app@5.0.1node@16.14.2react@18.2.0react-dom@18.2.0

因为函数里面有use的字样,所以必然是个hook,必然只能用于react的函数式组件里面,而不是传统的类式组件里面。

useStateuseReducer

react官方定性,useStateuseReducer都是函数式组件的状态管理方法,useReduceruseState的升级方案。但是,官方并没有把useState定性为“过时”。所以,useStateuseReducer是可以并存的。

两者可能的区别是:

  • useState 适合定义一些简单的状态(字符串、数值型、布尔型)
  • useReducer适合逻辑比较复杂的state(数组或对象等其它复杂的类型等)。

苏南大叔:react教程,如何使用useState的升级版hook函数useReducer? - 运行界面
react教程,如何使用useState的升级版hook函数useReducer?(图5-2)

回顾useState

回顾一下useState的使用方法:

import { useState} from 'react';
function Sunan() {
    const [count, setCount] = useState(100);
    return (
        <>
            苏南大叔有 {count} 个心眼子
            <button onClick={() => setCount(count => count + 1)}>+</button>
            <button onClick={() => setCount(count + 1)}>+</button><br />
        </>
    );
}

这里使用了两种修改state数据的方法,两者有什么区别呢?参考文章:
https://newsn.net/say/react-usestate-setInterval.html

useState的更多用法,请参考:
https://newsn.net/say/react-usestate.html

苏南大叔:react教程,如何使用useState的升级版hook函数useReducer? - usereact写法
react教程,如何使用useState的升级版hook函数useReducer?(图5-3)

useReducer

useReducer作为useState的升级版本,有适应复杂常见处理复杂state的能力。
先定义一个reducer,输入参数为state,action,输出为根据action.type修改过的新的state

import { useReducer } from 'react';
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        default:
            throw new Error();
    }
};

这里的根据action.type处理state的新值的时候,如果数据比较复杂,也可以写成下面的样子,适用范围更广。

return{...state,count:state.count + 1}

三个点运算符的使用方法,可以参考:

使用useReducer来处理定义好的reducer,输入项目为reducerstate的初始值,输出为state变量和dispatch函数。

苏南大叔:react教程,如何使用useState的升级版hook函数useReducer? - usereducer-code-1
react教程,如何使用useState的升级版hook函数useReducer?(图5-4)

值得注意的是:这个dispatchreact里面原有的。和react-redux中的useDispatch,虽然很相似,但并不是同一个东东。
function Sunan2() {
    const [state, dispatch] = useReducer(reducer, { count: 199 });
    return (
        <>
            苏南大叔有 {state.count} 个心眼子
            <button onClick={() => dispatch({ type: 'increment' })}>+</button><br />
        </>
    );
}

useReducer的输入项目,可以是:

  • 两个输入,reducerstate的初始值。
  • 三个输入,reducerstate的初始值,加上对state初始值进行再处理得到新的初始值的函数。

下面示例使用useReducer三个输入,返回state变量和dispatch函数的情况:

function Sunan3() {
    const [state, dispatch] = useReducer(reducer, { count: 0 }, (state) => {
        state.count = 200;
        return state;
    });
    return (
        <>
            苏南大叔有 {state.count} 个心眼子
            <button onClick={() => dispatch({ type: 'increment' })}>+</button><br />
        </>
    );
}

苏南大叔:react教程,如何使用useState的升级版hook函数useReducer? - usereducer-code-2
react教程,如何使用useState的升级版hook函数useReducer?(图5-5)

相关链接

结束语

更多react经验文章,请点击苏南大叔的博客文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react