react教程，如何使用useState的升级版hook函数useReducer？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

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

useState和useReducer

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

两者可能的区别是：

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

回顾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

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}

三个点运算符的使用方法，可以参考：

• https://newsn.net/say/js-dotdotdot.html

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

值得注意的是：这个dispatch是react里面原有的。和react-redux中的useDispatch，虽然很相似，但并不是同一个东东。

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

useReducer的输入项目，可以是：

• 两个输入，reducer和state的初始值。
• 三个输入，reducer和state的初始值，加上对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 />
        </>
    );
}

相关链接

• https://newsn.net/say/react-ref.html
• https://newsn.net/say/react-usestate.html

结束语

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

• https://newsn.net/tag/react/

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