dva.js 知识导图

2023-10-30

(JavaScript语言&)

JavaScript语言&

不要用 var,而是用 const 和 let,分别表示常量和变量。不同于 var 的函数作用域,const 和 let 都是块级作用域。

模板字符串

模板字符串提供了另一种做字符串组合的方法。

const user = 'world';console.log(`hello ${user}`);  // hello world
// 多行const content = `  Hello ${firstName},  Thanks for ordering ${qty} tickets to ${event}.`;

默认参数

 

不需要通过 function 关键字创建函数,并且还可以省略 return 关键字。

同时,箭头函数还会继承当前上下文的 this 关键字。

import 用于引入模块,export 用于导出模块。

引入部分要有{},引入全部作为对象import * as github

析构赋值让我们从 Object 或 Array 里取部分数据存为变量。

析构传入的函数参数。

析构时还可以配 alias,让代码更具有语义。

析构的反向操作,用于重新组织一个 Object 。

定义对象方法时,还可以省去 function 关键字。

Spread Operator 即 3 个点 ...,可用于组装数组。

获取数组的部分项。

收集函数参数为数组。

代替 apply。

对于 Object 而言,用于组合成新的 Object 

扩充组件 props

Promise 用于更优雅地处理异步请求。比如发起异步请求

dva 的 effects 是通过 generator 组织的。Generator 返回的是迭代器,通过 yield 关键字实现暂停功能。

这是一个典型的 dva effect,通过 yield 把异步逻辑通过同步的方式组织起来。

(React Component&)

React Component&

React Component 有 3 种定义方式,分别是 React.createClass, class 和 Stateless Functional Component。推荐尽量使用最后一种,保持简洁和无状态。这是函数,不是 Object,没有 this 作用域,是 pure function。

Component 嵌套

类似 HTML,JSX 里可以给组件添加子组件

className

class 是保留词,所以添加样式时,需用 className 代替 class 。

JavaScript 表达式需要用 {} 括起来,会执行并返回结果。

可以把数组映射为 JSX 元素列表。

尽量别用 // 做单行注释。

(Props&)

Props&

数据处理在 React 中是非常重要的概念之一,分别可以通过 props, state 和 context 来处理数据。而在 dva 应用里,你只需关心 props 。

JavaScript 是弱类型语言,所以请尽量声明 propTypes 对 props 进行校验,以减少不必要的问题。

内置的 prop type

往下传数据

往上传数据

CSS Modules 的工作原理

class 在构建之后会被重命名为 ProductList_button_1FU0u 。button 是 local name,而 ProductList_button_1FU0u 是 global name 。你可以用简短的描述性名字,而不需要关心命名冲突问题。

然后你要做的全部事情就是在 css/less 文件里写 .button {...},并在组件里通过 styles.button 来引用他。

全局 CSS

CSS Modules 默认是局部作用域的,想要声明一个全局规则,可用 :global 语法。

在一些复杂的场景中,一个元素可能对应多个 className,而每个 className 又基于一些条件来决定是否出现。这时,classnames 这个库就非常有用。

(reducer&)

reducer&

reducer 是一个函数,接受 state 和 action,返回老的或新的 state 。即:(state, action) => state

嵌套数据的增删改

建议最多一层嵌套,以保持 state 的扁平化,深层嵌套会让 reducer 很难写和难以维护。

下面是深层嵌套的例子,应尽量避免。

(Effect&)

Effect&

put用于触发 action 。

call用于调用异步逻辑,支持 promise 

select用于从 state 里获取数据。

(错误处理&)

错误处理&

全局错误处理dva 里,effects 和 subscriptions 的抛错全部会走 onError hook,所以可以在 onError 里统一处理错误。

本地错误处理

如果需要对某些 effects 的错误进行特殊处理,需要在 effect 内部加 try catch 。

异步请求基于 whatwg-fetch

统一错误处理

假如约定后台返回以下格式时,做统一的错误处理。

编辑 utils/request.js,加入以下中间件:

错误就会走到 onError hook 里

(Subscription&)

Subscription&

subscriptions 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。格式为 ({ dispatch, history }) => unsubscribe 

当用户进入 /users 页面时,触发 action users/fetch 加载用户数据。

如果 url 规则比较复杂,比如 /users/:userId/search,那么匹配和 userId 的获取都会比较麻烦。这是推荐用 path-to-regexp 简化这部分逻辑。

(Router&)

Router&

(Route Components&)

Route Components&

Route Components 是指 ./src/routes/ 目录下的文件,他们是 ./src/router.js 里匹配的 Component。

通过 connect 绑定数据

 App 里就有了 dispatch 和 users 两个属性。

基于 action 进行页面跳转

(dva配置&)

dva配置&

添加 redux-logger 中间件

onAction 支持数组,可同时传入多个中间件。

history切换 history 为 browserHistory

去除 hashHistory 下的 _k 查询参数

(工具&)

工具&

通过 dva-cli 创建项目

 

 

 

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

dva.js 知识导图 的相关文章

  • react项目按需加载报错 .libraryName is not a valid Plugin property

    babel presets react app plugins import libraryName antd style true 原配置如上会报错 libraryName is not a valid Plugin property g
  • React 初识之Umi项目搭建实战

    一 创建项目 创建之前需要安装 Node js 和 npm yarn 这俩个环境 在WebStorm里面创建一个项目 输入命令 yarn create umi 弹出选项 这里我们选择第二项APP 选择是否使用typescript 这里选no
  • 在react项目中,使用craco插件进行mobx配置解决方案

    在使用react项目中 不可避免的要使用蚂蚁金服出品的ant desgin前端UI组件 ant desgin推荐使用 craco 一个对 create react app 进行自定义配置的社区解决方案 对 create react app
  • React 组件通讯

    目录 1 组件通讯 概念 1 组件的特点 2 知道组件通讯意义 总结 2 组件通讯 props 基本使用 1 传递数据和接收数据的过程 2 函数组件使用 props 3 类组件使用 props 总结 3 组件通讯 props 注意事项 1
  • 对useReducer的理解

    useReducer是React提供的一个高级Hook 它不像useEffect useState useRef等必须hook一样 没有它我们也可以正常完成需求的开发 但useReducer可以使我们的代码具有更好的可读性 可维护性 可预测
  • React学习之扩展浅比较(三十四)

    注意 这玩意也已经被React PureComponent的功能取代了 这里依旧是提一下 主要是React v15的版本中的react with addons js 这些玩意还存在 哎 害人呐 引入 import shallowCompar
  • 配置使用Eslint的时候 版本错误 "eslint": "5.6.0" a different version of eslint was detected higher up in the tr

    1 如果你也遇到下面的问题 你可以 按照命令行提示的那样 下面这四步完成的一般就可以了 但是不排除你在运行的时候忘记下载某些依赖 1 删除 package lock json 不是package json 你可以选择 yarn lock 或
  • React路由懒加载的实现

    React lazy 通过引入lazy Suspense两个方法实现路由懒加载 首先 我们需要在组件中引入lazy Suspense这两个方法 然后我们需要通过Suspense组件 包裹着注册路由 import React Componen
  • Notion笔记搭建博客网站 - NotionNext

    NotionNext是什么 NotionNext是我在Github上开源的基于Next js框架开发的博客生成器 目的是帮助写作爱好者们通过Notion笔记快速搭建一个独立站 从而专注于写作 而不需要操心网站的维护 它将您的Notion笔记
  • Ant Design Pro从零到一(认识AntD)

    废话 在我们第一次接触AntD的时候 会遇到两个东西 一个是Ant Design 另一个是Ant Design Pro 他们的官网分别是 Ant Design 一套企业级 UI 设计语言和 React 组件库 Ant Design Pro
  • React的超详细讲解

    React React的重点 webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器 module bundler 当 webpack 处理应用程序时 它会递归地构建一个依赖关系图 dependency
  • 【react】回调函数形式的ref

    回调函数有3个特点 是我定义的函数 我没有调用这个函数 在我没有调用的情况下这个函数自己执行了 ref绑定一个箭头函数作为回调函数 可以输出以下这段看下 ref绑定的箭头函数是会自己执行的 class Demo extends React
  • umi 后台管理demo

    umi 后台管理demo umi react ts dva antd egg 有待优化 简单的前后端管理demo 接口提供增删查改 前端也有相应功能 github代码 https github com huiBuiling ql admin
  • ant design pro 代码学习(七) ----- 组件封装(登录模块)

    以登录模块为例 对ant design pro的组件封装进行相关分析 登录模块包含基础组件的封装 组件按模块划分 同类组件通过配置文件生成 跨层级组件直接数据通信等 相对来说还是具有一定的代表性 1 登录模块流程图 首先 全局了解一下登录模
  • hooks实践总结

    何为hooks 在React中hook是指不编写 class 的情况下使用 state 以及其他的 React 特性 而Vue3也推出了具有相同功能的组合式API 如果你用过Vue3就会知道在 setup 中你应该避免使用 this 因为h
  • 【React】 4课 react初识组件

    首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件 npm init y npm i babel standalone D npm i react react dom D 安装配置文件教程链接 https blog cs
  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac
  • 如何替换对象的key值

    发生的场景 现在用antd组件库 有些组件想渲染数据的话 我要根据他们官网给的字段名称对应起来才能渲染上去 这个是复选框选中 保存的时候 字段需要按照后台约定的传入code value 1 常规循环遍历 大招来了 哈哈哈 才疏学浅 我觉得是
  • 自定义hooks

    自定义传参hooks 把大多数的通用代码 或者props 抽成一个hooks 用hooks实现上下文 就不用再一一传参了 实现原理 主要是通过createContext useContext 生产 消费者模式 用于大量props一层一层传参
  • React安装依赖 node_modules中有下载依赖项但package.json文件中没有依赖

    React安装依赖 node modules中有下载依赖项但package json文件中没有依赖 直接在下载依赖项后 加 S 就可以解决 随机 id 生成器 uuid nanoid npm install nanoid S S save

随机推荐

  • 将yolov5检测结果保存成json文件

    将yolov5检测结果保存成json文件 每帧图片对应一个json文件 json文件中包含图片名称 检测到的bbox信息 分类结果 中心坐标和置信度 函数json add以图片名 该图像内的所有bbox信息 以及bbox数量为输入 在yol
  • PCB画板(Altium Designer)

    b站学习视频 1 https www bilibili com video BV1ei4y1L7TU spm id from 333 999 0 0 这力荐 2 https www bilibili com video BV1tE411g7
  • 判断多边形凹凸

    任意给定一个多边形 判断它是凸还是凹 多边形的顶点以逆时针方向的序列来表示 include
  • 关于小程序中如何获取openid

    想要获取用户的openid首先要明白获取的过程 1 登录 2 发请求获取openid 实现 先定义一组数据 后面发请求获取openid时要的参数 一个是appid 一个是secret秘钥 这两个在注册开发者平台后可以查到 如下 global
  • 【Vulnhub系列】DC1

    文章目录 基本信息 实验过程 额外内容 使用CVE2014 3704添加管理账号 另一种查询具有root权限命令的find语句 下载地址 https www vulnhub com entry dc 1 1 292 基本信息 Kali 19
  • Counterfactual Zero-Shot and Open-Set Visual Recognition

    Counterfactual Zero Shot and Open Set Visual Recognition 1 Introduction 文献提出一个反事实框架 是由对不可见类的泛化来支撑的 作者基于反事实的一致性规则 反事实确实是基
  • C++同步技术——Mutex相关 (转)

    进程的互斥运行 正常情况下 一个进程的运行一般是不会影响到其他正在运行的进程的 但是对于某些有特殊要求的如以独占方式使用串行口等硬件设备的程序就要求在其进程运行期间不允许其他试图使用此端口设备的程序运行的 而且此类程序通常也不允许运行同一个
  • 大数据技术面试-Flume、kafka

    大数据技术面试 Flume kafka 1 Flume组成有哪些 2 Flume拦截器有哪些知识点 3 Flume采集数据会丢失吗 4 FileChannel如何优化 5 如何控制Kafka丢不丢数据 6 Kafka分区分配策略默认哪两种
  • 【华为机试刷题笔记】HJ26-字符串排序

    题目描述 编写一个程序 将输入字符串中的字符按如下规则排序 规则 1 英文字母从 A 到 Z 排列 不区分大小写 如 输入 Type 输出 epTy 规则 2 同一个英文字母的大小写同时存在时 按照输入顺序排列 如 输入 BabA 输出 a
  • I.MX6U开发板交叉编译Qt项目(什么是交叉编译器;如何搭建Qt交叉编译环境;WinSCP将Windows中的文件传到Ubuntu中;如何将编译好的执行文件拷到开发板上)

    文章目录 1 关于嵌入式学习的一些思考 1 1 使用imx6 还是stm32mp 1 2 关于是否需要买板子 2 I MX6U开发板交叉编译Qt项目 2 1 什么是交叉编译器 2 2 安装交叉编译器 2 2 1 下载交叉编译器和资料 2 2
  • 用FLEX实现屏幕快照及下载 flex导出excel文件

    用FLEX实现屏幕快照及下载 Flex Flash Flex2 Flex3 GgNET 01月 31st 2008 2 53am 这种方式 在服务器端不会在磁盘上生成图片FLEX代码public function printMap void
  • 分析脚本搭建docker环境:python, R

    1 搭建Anaconda Python3 6 FROM nvidia cuda 8 0 cudnn6 devel ubuntu16 04 MAINTAINER Tyan
  • TP-Link-IPC使用rtsp推流

    文章目录 1 安装 2 使用 3 RTSP 1 安装 电源 WIFI 2 使用 扫码或官网下载APP 登录绑定查看IP 登录IE浏览器 输入账号密码默认admin 123456 3 RTSP 注意 通过RTSP可以取视频流 但不支持控制云台
  • Linux samba网络传输服务

    Linux samba网络传输服务 本文章适合的读者 Linux初 中级用户 开源软件爱好者 大中专院校的学生 社会培训学生 Linux下的开发人员 samba 使用smb协议的应用程序 主要用于文件共享 SMB service messa
  • 实验七-卷积编码的MATLAB实现

    信息论编码实验3 9连载 更多看专栏 实验七 卷积编码的MATLAB实现 一 卷积码原理介绍 1 1 基本概念 1 2 n k N 卷积编码 1 2 1 编码 1 2 2 译码 Viterbi 译码算法 二 代码展示及运行结果 2 1 2
  • Mybatis处理一对多关系时的性能考虑

    Mybatis对于处理一对多的情况有三种解决方案 查询的时候join子表 然后交由mybatis拼装 查询的时候不join子表 另外发起select去抓取子表数据 和第二种类似 只不过利用fetchType lazy来延缓抓取的时机 这三种
  • JWT——Token认证的两种实现和安全详解

    前言 最近因为项目中需要解决跨域取值的问题 所有考虑到用Token认证做技术支撑点 自己看了许多与之相关的文章 从中总结出了以下两个要点 签名和token时间 在说这两个要点之前先大概简单说一下与之有关的一些问题 首先 如果你对token认
  • 【IT之路】连接MySQL遇到ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor:yes)问题

    一般这个错误是由密码错误引起 解决的办法自然就是重置密码 假设我们使用的是root账户 1 重置密码的第一步就是跳过MySQL的密码认证过程 方法如下 vim etc my cnf 注 windows下修改的是my ini 在文档内搜索my
  • DenseNet网络详解及Pytorch实现

    DenseNet网络详解及Pytorch实现 DenseNet网络简介 DenseNet Densely Connected Convolutional Networks 是由Gao Huang等研究人员于2017年提出的一种深度神经网络架
  • dva.js 知识导图

    JavaScript语言 JavaScript语言 不要用 var 而是用 const 和 let 分别表示常量和变量 不同于 var 的函数作用域 const 和 let 都是块级作用域 模板字符串 模板字符串提供了另一种做字符串组合的方