当前位置: 首页 > 资讯 >

[Day13] [笔记]React Hooks-UseReducer

简介

useReducer 简单来说就是 useState 进阶用法。而且写法上其实跟 Redux 差异不大。我们就直接来看范例吧

写法如下:

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

官网范例1

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() {
                            // 第一个参数:事件处理器,第二个参数 state Default Value
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
                             // state 只能透过 dispatch 方法改变
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

官网范例2

我们刚上面写法中,并没有用到第三个参数,而第三个参数作用就是传入 init function 作为第三个参数。初始的 state 会被设定为 init(initialArg)。

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset'
      // 将值回归
      return init(action.payload);
    default:
      throw new Error();
  }
}

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

参考资料


相关文章:

  • 第02天 - 环境建立(上)
  • ES2021(ES12) - Intl、WeakRef
  • [从0到1] C#小乳牛 练成基础程序逻辑 正确打开方式 - 观看SOP
  • 第廿八天:旅游结束的周二
  • 05 - Tmuxinator - Tmux sessions 管理工具
  • 资安学习路上-picoCTF 解题(crypto)1
  • Leetcode: 210. Course Schedule II | 含C++笔记
  • 【Day27】反馈元件 - Progress circle
  • Day 21 - canvas 玩拼图 P5.js
  • mostly:functional 第二十八章:Applicative 的实体
  • Day28-介绍 Redux DevTools
  • D3 - 今天点个 String Methods 套餐
  • Python Flask 架站笔记 LINEBOT
  • standardize VS normalize
  • Day17 参加职训(机器学习与资料分析工程师培训班),Python程序设计
  • 数字人民币是什么?什么是数字人民币
  • 支持支付宝的国外VPS主机服务器大全:用支付宝买国外网站空间服务器VPS
  • 正规社交寻海外cps、网盟合作
  • 微信小程序搭建教程:怎么用CentOS搭建小程序服务器
  • Namesilo域名注册教程和域名注册流程方法
  • PayPal绑定国内手机卡的方法:国外PayPal怎么绑定国内手机号
  • HD钱包是什么?比特币钱包原理
  • 苹果手机Apple美国区账号无信用卡购买教程【Apple ID美国区绑定PayPal教程】
  • Linux运维命令大全:Linux运维要掌握哪些命令
  • PayPal国外买东西教程:银联卡(国内储蓄卡信用卡)怎么用PayPal买国外的东西更安全
  • 一键脚本:SmokePing一键安装/管理脚本
  • Hostinger主机如何添加一个新的域名(网站),如何更改主机的主域名(Main Domain)
  • 亚马逊卖家教程入门:如何做好亚马逊?教你怎么做亚马逊
  • Google Play Store报错DF-DFERH-01怎么办
  • MySQL mysqldump怎么用?MySQL怎么用mysqldump导入导出数据