说说useReducer

已于 2022-07-05 02:39:33 修改
阅读量446 收藏
点赞数
文章标签： react
于 2022-01-29 22:30:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/carol246/article/details/122748555
版权

useReducer 是什么

使用方法

useReducer 是 useState 的替代方案。可以通过下面的源码，看下 useState 和 useReducer 传参和返回值的类型。

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

export function useReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useReducer(reducer, initialArg, init);
}

const [state, setState] = useState(initialState);

const [state, dispatch] = useReducer(reducer, initialArg, init);

useReducer 接收三个参数：

  • reducer —— 是函数 (state, action) => newState
    • state 是当前最新的状态值，action 用于告诉 reducer 当前执行的操作，reducer 会根据不同操作执行不同逻辑去更新 state
    • reducer 是一个纯函数，没有任何 UI 和副作用
  • initialArg —— 是指定的初始 state
  • init —— 是函数 (initialArg) => initialState
    • 这个参数是可选的，如果传入了 init，初始 state 就是 init(initialArg) 的返回结果

useReducer 返回一个数组：

  • 第一项是 state
  • 第二项是 dispatch，是函数 (action) => void
    • 通过调用 dispatch 传入 action，来告诉 reducer 执行什么操作，然后更新 state
    • dispatch 不会在组件重新渲染时改变

可以通过下面这个计数器的栗子，直观地看下怎么使用 useReducer。

const initializer = (initialValue) => {
  return {
    count: initialValue.count + 10,
  };
};

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState, initializer);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

因为 useReducer 传入了第三个参数 initializer，所以初始 state 不是 0，而是计算后的 10。
在这里插入图片描述

和 Redux 的关系

Store, Reducer, Action 是 Redux 的三核心概念，同时也是 useReducer 的三大核心概念。
通过调用 useReducer 返回的 dispatch，传入 action 来告诉 reducer 要执行的操作，然后 reducer 根据 action 更新 store，然后响应到 view 层。
在这里插入图片描述

useState vs useReducer

在 state 更新方面，使用 useReducer 和使用 useState 在 setState 传入回调函数时的效果一样，即 state 的更新是异步的，并且不会合并。

🌰
useState ↓

function Counter() {
  const [count, setCount] = useState(0);
  console.log("render");
  
  return (
    <div>
      count: {count}
      <button
        onClick={() => {
          setCount((c) => c + 1);
          console.log("count", count);
          setCount((c) => c + 1);
          console.log("count", count);
        }}
      >
        +
      </button>
    </div>
  );
}

useReducer ↓

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  console.log("render");
  
  return (
    <div>
      count: {state.count}
      <button
        onClick={() => {
          dispatch({ type: "increment" });
          console.log("count", state.count);
          dispatch({ type: "increment" });
          console.log("count", state.count);
        }}
      >
        +
      </button>
    </div>
  );
}

点击 + 后，都是这个结果 ↓
在这里插入图片描述
useState 是细粒度的状态管理。本质来说，useState 就是预置了 reducer 的 useReducer，即 每次调用 setState，相当于调用 dispatch 让 reducer 把传入值赋值到对应的 state。

reducer 体现的编程思想，类似于设计模式中的状态模式。状态模式是，当不同的状态有不同的行为，并且在代码中存在大量和状态相关的条件语句的时候，把具体的状态类抽象出来，最后只用委托状态类调用其中的方法即可，不用关心具体的实现。reducer 是，每一种状态对应一组数据，状态变化的时候就更新对应组的数据，使用时也不用关心具体数据。当一种状态对应多个数据变化，比如一个操作需要更新多个 state 的时候，reducer 就能聚合了这种变化。

useReducer 的使用场景

当你想更新一个状态，并且这个状态更新依赖于另一个状态的值时，你可能需要用 useReducer 去替换它们。

场景一：需要同时更新多个状态时

🌰
使用 useState 时：

function LoginPage() {
  const [name, setName] = useState(""); // 用户名
  const [pwd, setPwd] = useState(""); // 密码
  const [isLoading, setIsLoading] = useState(false); // 是否展示loading，发送请求中
  const [error, setError] = useState(""); // 错误信息
  const [isLoggedIn, setIsLoggedIn] = useState(false); // 是否登录

  const login = (event) => {
    event.preventDefault();
    setError("");
    setIsLoading(true);
    login({ name, pwd })
      .then(() => {
        setIsLoggedIn(true);
        setIsLoading(false);
      })
      .catch((error) => {
        // 登录失败: 显示错误信息、清空输入框用户名、密码、清除loading标识
        setError(error.message);
        setName("");
        setPwd("");
        setIsLoading(false);
      });
  };
  return (
	// 返回页面 JSX Element
  );
}

使用 useReducer 时：

const initState = {
  name: "",
  pwd: "",
  isLoading: false,
  error: "",
  isLoggedIn: false,
};
function loginReducer(state, action) {
  switch (action.type) {
    case "login":
      return {
        ...state,
        isLoading: true,
        error: "",
      };
    case "success":
      return {
        ...state,
        isLoggedIn: true,
        isLoading: false,
      };
    case "error":
      return {
        ...state,
        error: action.payload.error,
        name: "",
        pwd: "",
        isLoading: false,
      };
    default:
      return state;
  }
}
function LoginPage() {
  const [state, dispatch] = useReducer(loginReducer, initState);
  const { name, pwd, isLoading, error, isLoggedIn } = state;
  const login = (event) => {
    event.preventDefault();
    dispatch({ type: "login" });
    login({ name, pwd })
      .then(() => {
        dispatch({ type: "success" });
      })
      .catch((error) => {
        dispatch({
          type: "error",
          payload: { error: error.message },
        });
      });
  };
  return (
    // 返回页面 JSX Element
  )
}

场景二：解耦，移除不必需的依赖，避免不必要的 effect 调用

🌰
使用 useState 时：

function Counter() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  useEffect(() => {
    const id = setInterval(() => {
      setCount((c) => c + step);
    }, 1000);
    return () => clearInterval(id);
  }, [step]);

  return (
    <>
      <h1>{count}</h1>
      <input value={step} onChange={(e) => setStep(Number(e.target.value))} />
    </>
  );
}

使用 useReducer 时：

const initialState = {
  count: 0,
  step: 1,
};

function reducer(state, action) {
  const { count, step } = state;
  if (action.type === "tick") {
    return { count: count + step, step };
  } else if (action.type === "step") {
    return { count, step: action.step };
  } else {
    throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { count, step } = state;

  useEffect(() => {
    const id = setInterval(() => {
      dispatch({ type: "tick" });
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <>
      <h1>{count}</h1>
      <input value={step} onChange={(e) => setStep(Number(e.target.value))} />
    </>
  );
}

使用场景总结

可以在一个自定义 hook 或组件中同时使用多个 useState 或 useReducer 。

按照使用作用域分离 state，如果它们一起更新，最好将其放在 reducer 中；如果某项 state 与该自定义 hook 或组件中的其他 state 来说非常独立，那么将其与其他 state 绑定在一起只会给 reducer 增加不必要的复杂性，最好就让它保持 useState 的形式。

__竹子__
关注
六、useReducer的使用
qq_44753552的博客
08-31 354
目录一、Reducer是什么？二、useReducer的使用 一、Reducer是什么？ Reducer的兴起是从Redux广泛使用开始的，但不仅仅存在于Redux中。Reducer其实就是一个函数，这个函数接收两个参数，一个是状态（state)，另一个是用来控制业务逻辑的判断参数（action）。先写一个Reducer。 function countReducer(state, action) { switch(action.type) { case 'add':
对React Hooks的理解
qq_33495944的博客
07-15 624
文章目录一、Why二、What三、How1.引入库2.读入数据四、Use五、Summarize 一、Why React 创建组件的方式，最常见的有两种，一个是类组件，例如 class Dashboard extends React.Component, 一种是纯函数组件， 例如 const Dashboard = () => {return <></>}， 而我们希望组件不要变成复杂的容器，最好只是数据的管道。所以组件的最佳写法应该是函数，而不是类。 但是，我们知道穿函数组
useReducer的使用
weixin_45664217的博客
03-01 377
在 hooks 中提供了的 useReducer 功能，可以增强 ReducerDemo 函数提供类似 Redux 的功能，引入 useReducer 后，useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的。 引入 import React, { useReducer } f.
react——useRdeucers使用规范——第三个参数的意义——_todlist实例
阿牛哥的博客
10-09 753
react——useRdeucers使用规范——第三个参数的意义——_todlist实例
React中使用useReducer模拟实现redux管理React组件状态
white-hang的博客
03-25 802
React中使用useReducer模拟实现redux管理React组件状态
useReducer是什么
m0_57236802的博客
09-27 129
useReducer是 React 中的一个 Hook，用于处理组件状态的复杂逻辑。它与useState类似，但提供了更高级的状态管理能力。useReducer尤其适用于当状态逻辑复杂或状态包括多个子值时。
React Hooks使用心得
weixin_42310711的博客
11-14 274
说说最近用的hooks吧 为什么要用HOOKS 复用一个有状态的组件太麻烦 react都核心思想是，将一个页面拆成一堆独立的，可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。 那之前，官方...
如何在React项目中使用TypeScript
郊眠寺
11-15 1156
axios是很流行的http库，他的ts封装已经很完美了，我们只做简单的二次封装，返回通用的数据响应格式。首先在// 拦截器定义export interface RequestInterceptors {// 请求拦截requestInterceptors?: (err: any) => any// 响应拦截responseInterceptors?}// 生成axios实例的参数，实例可以单独传入拦截器}// loading请求数量// 打开loading。
context + hooks = 真香
wumu0927的博客
01-03 782
context + hooks = 真香 文章首发于个人博客 前言 hooks 打开了新世界的大门，本文教你如何使用 Context + hooks。 后面代码会比较多，主要是扩展思维，坚持看到最后一定会有帮助的！！！ 什么是 Context 引用官方文档中的一句话: Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 在 React 中当中， 数据流是从上而下的， 而 props 就是数据流中一个重要的载体， 通过 props 传递给子组件渲染出来的对
前端面试题
2301_77357017的博客
06-16 247
Immutable的思想就是构建持久化、不可变的、结构共享的状态，当对immutable数据进行操作的时候，实质上不会更改原数据，而是会根据原数据生成一个新的immutable数据，这样就可以避免刚才说的问题， 并且immutable采用的是结构共享的方式，生成新的immutable数据的时候不会完全重建，而是只重新更改后的节点及其父节点，其他节点与上次的immutable数据共享， 节省了新建的性能开支。需要自行做缓存优化。数据缓存，合适的接口数据缓存在本地存储， 减少接口调用、keep-alive；
React Hooks系列之useReducer
Boboy
03-19 865
前言 react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性，而不仅限于 class 组件。react hooks 的出现，标示着 react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。 优势： 函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更...
useReducer基本用法
weixin_43865681的博客
09-22 1123
一、引入api import React ,{useReducer}from 'react'; 二、基本使用 设置数值count,默认初始值为0， 传入不同分发方式，‘add’,‘sub’, 根据action不同，返回不同数值。 function UseReducerDemo() { const [count, dispatch]=useReducer((state,action)=>{ switch (action) { ca
useReducer的用法
最新发布
博客of me
06-19 361
1、定义：是一个React Hook，允许你在函数组件中添加reducer以管理状态。2、作用：它提供了一种集中式和可预测的状态管理机制，尤其适用于复杂的状态更新逻辑。1、Reducer函数：一个纯函数，用于根据动作类型更新状态。它接受两个参数：当前状态和动作对象，返回新的状态。2、初始状态（可选）：作为reducer的起始状态。如果没有提供，则reducer的第一次调用将使用作为初始状态。返回一个数组，包含两个元素：1、当前状态：表示应用或组件的当前状态。2、Dispatch函数：一个用于触发状态更新的函
useReducer使用和原理
文摘资讯
06-28 6634
以下介绍的 Hook，有些是上一节中基础 Hook 的变体，有些则仅在特殊情况下会用到。useReducerconst [state, dispatch] = useRe...
七、学习useReducer
NinthMonee的博客
02-18 1623
一、什么是useReducer？ ​ useReducer是react hooks中提供的一个高级hooks，即便没有这些高级hooks，只用useState、useEffect和useContext，也能完成需求。但是这些高级的hooks可以让我们的代码具有更好的可读性、可维护性、可预测性。 二、useReducer的出现是为了解决什么问题？ 要理解这个问题，我们得先知道reducer是什么东西。reducer是redux中一个概念，以下就是redux更新数据的一个流程。 [外链图片转存失败,源站可能有防
useReducer用法
weixin_45633353的博客
08-08 384
简介 useReducer是React提供的一个高级Hook，它不像useEffect、useState、useRef等必须hook一样，没有它我们也可以正常完成需求的开发。 简单来说 reducer是一个函数(state, action) => newState：接收当前应用的state和触发的动作action，计算并返回最新的state 例子 常规 import {useCallback, useState} from "react"; export const useUndo = <T&
usereducer
09-26
useReducer是React中的一个Hook函数，用于在函数组件中管理复杂的state逻辑。它接收两个参数：reducer函数和初始化的state，并返回最新的state和dispatch函数。reducer函数是一个纯函数，通过接收当前的state和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值