说说useReducer

已于 2022-07-05 02:39:33 修改
阅读量419 收藏
点赞数
文章标签： 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 的形式。

__竹子__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React--hooks-- useReducer数据状态管理
weixin_45928836的博客
11-15 1942
前言： 之前我们在写react组件时，我们要么是通过类组件内定义state来管理数据，要么就是在函数组件内使用useState来管理数据。但如果一个数据牵扯到了很多个组件，那么我们管理起来就会十分麻烦。 所以 react-hooks 为我们提供了一个类似与redux的功能 – useReducer来帮助我们集中式的处理复杂的state管理。 一、useReducer的使用 useReducer接收两个参数： 第一个参数：reducer函数。 第二个参数：初始化的state。返回值为最新的state和dis
useReducer
03-21
在React开发中，“useReducer”是一个非常重要的钩子，它提供了状态管理的另一种方式，尤其在处理复杂状态逻辑时更为适用。与“useState”不同，"useReducer"更倾向于处理那些涉及多步骤或需要复杂计算的状态变化。...
react hooks useReducer
qq_52693197的博客
06-12 262
react 学习笔记
react——useRdeucers使用规范——第三个参数的意义——_todlist实例
阿牛哥的博客
10-09 691
react——useRdeucers使用规范——第三个参数的意义——_todlist实例
useReducer 介绍和基本使用
热门推荐
Jas3000的博客
04-14 2万+
一、前言 useReducer 是 useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。） const [state, dispatch] = useReducer(reducer, initialArg, init); useReducer接收两个参数： 第一个参数：reducer函数。 第二个参数：初始化
React学习笔记——Hooks中useReducer的基础介绍和使用
MRlaochen的博客
07-21 849
在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处： 代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读维护 组件树层级变浅，
使用异步操作响应 useReducer
06-08
use-reducer-async React useReducer 与异步操作简介 React useReducer 本身不支持异步操作。 与 Redux 不同，它没有中间件接口，但钩子是可组合的。 这是一个用于扩展 useReducer 调度的小型库，以便调度异步操作...
Sample-React-useReducer
04-13
useReducer-React Hook 我创建了一个迷你项目，该项目允许用户选择项目，然后按“添加到购物车”，根据用户是否选中“选择项目”，系统会显示一条通知。 useReducer用于检查复选框字段的值并相应地显示文本。
react-redux:研究Redux与UseReducer的存储库
05-26
结果当使用useReducer ()和Redux创建计数器时，我意识到： 在此之后，状态管理的工作方式有所不同，虽然Redux提供了全局状态容器（如useContext() ），但useReducer()提供了独立的本地状态容器； Redux可以将reducer...
cart-usecontext-usereducer-ReactJs
05-09
购物车使用上下文用户教育家... 主题：useContext（）和useReducer（）挂钩，contextAPI，使用useReducer（）获取数据”， 话题： •useContext（）和useReducer（）挂钩，contextAPI，使用useReducer（）获取数据。
useReducer使用和原理
文摘资讯
06-28 6587
以下介绍的 Hook，有些是上一节中基础 Hook 的变体，有些则仅在特殊情况下会用到。useReducerconst [state, dispatch] = useRe...
React,Hooks中useReducer的使用
weixin_45389051的博客
07-29 1415
首先useReducer这个跟redux一点关系都没有…它的主要作用是防止state里面的数据操作太复杂 下面来演示一下怎么使用,点击加减改变数字的案例 一般来写就这样写 import React, { useState } from 'react' export default function Home() { const [counter,setCount] = useState(10) const [state,dispatch] = useReducer(reducer,{counter:0})
useReducer的使用
weixin_45664217的博客
03-01 355
在 hooks 中提供了的 useReducer 功能，可以增强 ReducerDemo 函数提供类似 Redux 的功能，引入 useReducer 后，useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的。 引入 import React, { useReducer } f.
React的useReducer与Reudx对比
大道至简
08-16 1422
通过 dispatch 函数，可以触发状态的更新，从而重新渲染组件。它通过集中式的存储（store）来管理状态，并使用纯函数的方式处理状态的更新。Redux 提供了丰富的生态系统，包括中间件、调试工具和与 React 的集成库（如 react-redux）。它能够管理复杂的状态流，并提供了强大的工具和扩展性。适用于简单的状态管理场景，特别是当状态之间的逻辑比较复杂或需要多个状态共同作用时。和 Redux 都是用于处理应用程序的状态管理的工具，但它们在概念和使用场景上存在一些区别。相比于 Redux，
【React全解6】useReducer的使用详解和代替Redux
qq_44906900的博客
12-21 3301
目录 前言 useReducer 使用useReducer写一个表单提交的案例 使用useReducer代替Redux 一、前言 前面已经介绍了useState 的详细用法，我们可以在函数组件和类组件中使用 useState 来创建变量和对象。使得页面能够及时的更新 UI 等等。接下来介绍一个 useState 的复杂版本–useReducer 二、useReducer useReducer 是 useState 的升级版本，用来践行 Flux/Redux 的思想 它主要有两个参数，一个读接口 s
深入学习React Hook——useReducer，并用其代替redux
m0_47670683的博客
04-27 1967
Hook使用规则 只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。 只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。 useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); useReducer是useState的替代方案，它和redux非常相似，使用dispatch和payload更新数据。useReducer和useContext配合
【译】在 React Hooks 中使用 useReducer 的几种用例
weixin_34148508的博客
04-13 883
原文：How to use useReducer in React Hooks for performance optimization github 的地址 欢迎 star! React Hook 出来已经有一段时间了，具体的一些用法以及它解决的痛点，可以查看 Dan 的两篇文章 useEffect 完整指南以及编写有弹性的组件进行详细了解。 本文主要是介绍了6种在 React Hooks...
useReducer简单使用
土匪丁的博客
02-26 458
在 hooks 中提供了的 useReducer 功能，提供类似 Redux 的功能。useReducer接收一个 reducer 函数作为参数，reducer 接收两个参数state 和 action 。 count 是返回状态中的值，dispatch 派发事件来更新 state 。useReducer的第二个参数将count默认值设为0 const [count, dispatch] = useReducer((state, action) => { // 这里写逻辑 }, 0) .
useReducer 的奇妙世界：探索 React 状态管理的新境界(下)
最新发布
你若盛开，清风自来
12-29 891
useReducer 是 React 中的一个 Hook，用于管理复杂的状态逻辑。它接受一个 reducer 函数和一个初始状态作为参数，并返回当前状态和一个用于更新状态的 dispatch 函数。
usereducer
09-26
useReducer是React中的一个Hook函数，用于在函数组件中管理复杂的state逻辑。它接收两个参数：reducer函数和初始化的state，并返回最新的state和dispatch函数。reducer函数是一个纯函数，通过接收当前的state和action来计算并返回新的state。相比于useState，useReducer可以更好地处理复杂的state逻辑和多个相关的state更新操作。 在给定的引用中，通过一个计数器的示例来说明了useReducer的用法。通过useReducer可以将原本使用useState实现的计数器改写为使用reducer函数进行状态管理。reducer函数中通过根据action的类型来计算并返回新的state，然后通过dispatch函数来触发reducer函数的执行。在组件中通过使用state和dispatch来获取当前的state值和触发对应的state更新操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值