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 知识导图 的相关文章

  • css in js开发利器 - styled-components(样式组件)

    styled components 是一个常见的 css in js 类库 和所有同类型的类库一样 通过 js 赋能解决了原生 css 所不具备的能力 比如变量 循环 函数等 注意 有时候 React 版本和 styled componen
  • Antd DatePicker 设置默认值报clone.weekday is not a function

    代码 dayjs版本1 11 7 页面 当点击页面日期框会报clone weekday is not a function 解决方法 在jsx文件中添加如下js import dayjs from dayjs import advanced
  • 虚拟列表的实现思路(附带react代码)

    虚拟列表实现思路 代码链接 div class 滚动容器 div class 撑起列表正常高度 div div class 列表容器 div class 列表项 div div div 1 列表项 的高度确定 2 利用 滚动容器 的高度计算
  • React Native 环境搭建, 新建项目, 运行和调试

    React Native 可以理解为一个基于 JavaScript 具备动态配置能力 面向前端开发者的移动端开发框架 目前为止虽然一直还没有V1 0 0版本 但是相信很多小伙伴都了解过或者已经入坑了 为什么RN那么有人气呢 我们可以先简单分
  • state和props的区别__react

    首先说明 state和props是每个组件都有的 其次 state可变 但props不可变 这是官网给出的说法 但实操过程中 state的确可变 但props也可以变 是不是fb搞错了 当然不是 这里的可变与不可变 说的是改变后 是否会重新
  • 【React】路由(详解)

    目录 单页应用程序 SPA 路由 前端路由 后端路由 路由的基本使用 使用步骤 常用组件说明 BrowserRouter和HashRouter的区别 路由的执行过程 默认路由 精确匹配 Switch的使用 重定向路由 嵌套路由 向路由组件传
  • Ionic3开发教程 - 开发(2)

    Ionic3开发系列教程Ionic3开发教程 环境准备 1 Ionic3开发教程 开发 2 Ionic3开发教程 发布Android版本 3 Ionic3开发教程 发布IOS版本 4 Ionic3开发教程 更新 5 本文中介绍的Ionic3
  • react 使用 scss

    react 使用 scss 日常记录开发中遇到的坑 1 使用 npm install sass loader node sass S 进行安装 2 在页面中直接使用 有时候可以 有时候不行 原因 我个人觉得安装的两个插件本版兼容问题 nod
  • Vite搭建react+ts项目

    创建一个react项目 首先需要打开终端 进行vite的引入 yarn create vite 使用react模板创建项目 yarn create vite react test template react cd react test y
  • 一文揭秘饿了么跨端技术的演进、实践与落地

    本文会先带领大家一起简单回顾下跨端技术背景与演进历程与在这一波儿接着一波儿的跨端浪潮中的饿了么跨端现状 以及在这个背景下 相较于业界基于 React Vue 研发习惯出发的各种跨端方案 饿了么为什么会选择走另外一条路 这个过程中我们的一些思
  • 【react】新旧生命周期对比

    componentWillUpdate componentWillReceiveProps componentWillMount 上述这三个生命周期在V18以上的版本中 使用时要加上UNSELF name
  • React中使用if else 条件判断

    在react中用jsx渲染dom的时候经常会遇到if条件判断 然而在jsx中竟是不允许if条件判断的 以下有几种判断方式 可以根据自己的应用场景 挑选适合的 方案一 class HelloMessage extends React Comp
  • React-(4)React中的事件绑定

    React中的事件绑定 在 React 组件中 每个方法的上下文都会指向该组件的实例 即自动绑定 this 为当前组件 而且 React 还会对这种引用进行缓存 以达到 CPU 和内存的最优化 在使用 ES6 classes 或者纯函数时
  • react之纯函数、函数组件、类组件、纯组件

    一 纯函数 Pure Function 定义 一个函数的返回结果只依赖于它的参数 并且在执行的过程中没有副作用 我们就把该函数称作纯函数 特点 1 函数的返回结果只依赖与它的参数 同一个输入只能有同一个输出 let foo a b gt a
  • React之state、hooks性能分析

    目录 一 state 1 为什么使用setState 2 setState异步更新 3 如何获取异步的结果 4 setState一定是异步吗 5 源码分析 6 数据的合并 7 多个state的合并 二 为什么需要Hook 三 Class组件
  • 【react】回调函数形式的ref

    回调函数有3个特点 是我定义的函数 我没有调用这个函数 在我没有调用的情况下这个函数自己执行了 ref绑定一个箭头函数作为回调函数 可以输出以下这段看下 ref绑定的箭头函数是会自己执行的 class Demo extends React
  • ant design pro 代码学习(七) ----- 组件封装(登录模块)

    以登录模块为例 对ant design pro的组件封装进行相关分析 登录模块包含基础组件的封装 组件按模块划分 同类组件通过配置文件生成 跨层级组件直接数据通信等 相对来说还是具有一定的代表性 1 登录模块流程图 首先 全局了解一下登录模
  • react之封装有无Token(路由权限控制)的高阶组件

    TOC 前景 有些路由页面内的内容信息比较敏感 如果用户没有经过登录获取到有效Token 是没有权限跳转的 根据Token的有 无控制当前路由是否可以跳转就是路由的权限控制 技术方案 实现步骤 1 在 components 目录中 创建 A
  • 自定义hooks

    自定义传参hooks 把大多数的通用代码 或者props 抽成一个hooks 用hooks实现上下文 就不用再一一传参了 实现原理 主要是通过createContext useContext 生产 消费者模式 用于大量props一层一层传参
  • 如何提高React组件的渲染效率的?在React中如何避免不必要的render?

    面试官 说说你是如何提高组件的渲染效率的 在React中如何避免不必要的render 一 是什么 react 基于虚拟 DOM 和高效 Diff 算法的完美配合 实现了对 DOM 最小粒度的更新 大多数情况下 React 对 DOM 的渲染

随机推荐

  • 将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 都是块级作用域 模板字符串 模板字符串提供了另一种做字符串组合的方