首页 > 其他分享 >dva.js 知识导图

dva.js 知识导图

时间:2023-02-23 21:33:15浏览次数:43  
标签:导图 Component Object dva js state action 错误处理

(JavaScript语言&)

JavaScript语言&

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

dva.js 知识导图_嵌套

模板字符串

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

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

默认参数

 

dva.js 知识导图_错误处理_02

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

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

dva.js 知识导图_错误处理_03

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

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

dva.js 知识导图_错误处理_04

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

dva.js 知识导图_其他_05

析构传入的函数参数。

dva.js 知识导图_错误处理_06

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

dva.js 知识导图_嵌套_07

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

dva.js 知识导图_其他_08

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

dva.js 知识导图_错误处理_09

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

dva.js 知识导图_react_10

获取数组的部分项。

dva.js 知识导图_react_11

收集函数参数为数组。

dva.js 知识导图_错误处理_12

代替 apply。

dva.js 知识导图_错误处理_13

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

dva.js 知识导图_嵌套_14

扩充组件 props

dva.js 知识导图_嵌套_15

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

dva.js 知识导图_错误处理_16

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

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

dva.js 知识导图_错误处理_17

(React Component&)

React Component&

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

dva.js 知识导图_错误处理_18

dva.js 知识导图_数组_19

Component 嵌套

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

dva.js 知识导图_错误处理_20

className

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

dva.js 知识导图_数组_21

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

dva.js 知识导图_react_22

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

dva.js 知识导图_嵌套_23

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

dva.js 知识导图_错误处理_24

(Props&)

Props&

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

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

dva.js 知识导图_react_25

内置的 prop type

dva.js 知识导图_错误处理_26

往下传数据

dva.js 知识导图_嵌套_27

往上传数据

dva.js 知识导图_错误处理_28

CSS Modules 的工作原理

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

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

dva.js 知识导图_数组_29

全局 CSS

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

dva.js 知识导图_数组_30

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

dva.js 知识导图_其他_31

(reducer&)

reducer&

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

dva.js 知识导图_数组_32

嵌套数据的增删改

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

dva.js 知识导图_react_33

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

dva.js 知识导图_其他_34

(Effect&)

Effect&

put用于触发 action 。

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

select用于从 state 里获取数据。

dva.js 知识导图_错误处理_35

(错误处理&)

错误处理&

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

dva.js 知识导图_错误处理_36

本地错误处理

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

dva.js 知识导图_数组_37

异步请求基于 whatwg-fetch

dva.js 知识导图_嵌套_38

统一错误处理

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

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

错误就会走到 onError hook 里

dva.js 知识导图_错误处理_39

(Subscription&)

Subscription&

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

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

dva.js 知识导图_嵌套_40

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

dva.js 知识导图_react_41

(Router&)

Router&

dva.js 知识导图_其他_42

(Route Components&)

Route Components&

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

通过 connect 绑定数据

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

dva.js 知识导图_react_43

基于 action 进行页面跳转

dva.js 知识导图_嵌套_44

(dva配置&)

dva配置&

添加 redux-logger 中间件

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

dva.js 知识导图_数组_45

history切换 history 为 browserHistory

dva.js 知识导图_错误处理_46

去除 hashHistory 下的 _k 查询参数

dva.js 知识导图_其他_47

(工具&)

工具&

通过 dva-cli 创建项目

dva.js 知识导图_嵌套_48

 

 

 

 

 

 

标签:导图,Component,Object,dva,js,state,action,错误处理
From: https://blog.51cto.com/u_11837698/6081837

相关文章

  • Dva双向数据流的理解
    (Dva双向数据流的理解&)Dva双向数据流的理解&数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch......
  • cnpm全局配置搭建dva-cli脚手架
    (cnpm全局配置搭建dva-cli脚手架&)cnpm全局配置搭建dva-cli脚手架&第一步删除npm配置npmconfigsetproxyhttp://10.0.5.99:80npmconfigsethttps-proxyhttp://......
  • js中的数据类型有哪些?
    数据类型共有8中(1)基本数据类型:String、Number、Boolean、Null、Undefined、Symbol(ES6)、BigInt(2)引用数据类型:Object【Object是个大类,function函数、array数组、date日期......
  • KingbaseES Json 系列四:Json数据操作函数二
    KingbaseESJson系列四--Json数据操作函数二(JSONB_PRETTY,JSONB_STRIP_NULLS,JSON_OBJECTAGG,JSON_EQUAL,JSON_EXISTS,JSON_STRIP_NULLS)JSON数据类型是用来存储JSON(J......
  • KingbaseES Json 系列三:Json数据操作函数一
    KingbaseESJson系列三--Json数据操作函数一(JSONB_EACH,JSONB_EACH_TEXT,JSONB_OBJECT_KEYS,JSONB_EXTRACT_PATH,JSONB_EXTRACT_PATH_TEXT,JSON_EACH,JSON_EACH_TEXT,JSO......
  • KingbaseES Json 系列二:Json对象函数
    KingbaseESJson系列二--Json对象函数(JSONB_BUILD_OBJECT,JSONB_OBJECT,JSON_BUILD_OBJECT,JSON_OBJECT)JSON数据类型是用来存储JSON(JavaScriptObjectNotation)数据......
  • KingbaseES Json 系列一:Json构造函数
    KingbaseESJson系列一--Json构造函数(JSON,ROW_TO_JSON,TO_JSON,TO_JSONB)JSON数据类型是用来存储JSON(JavaScriptObjectNotation)数据的。KingbaseES为存储JSON数据......
  • KingbaseES Json 系列十:Json数组构造函数
    KingbaseESJson系列十--Json数组构造函数(ARRAY_TO_JSON,JSONB_BUILD_ARRAY,JSON_ARRAY,JSON_BUILD_ARRAY)JSON数据类型是用来存储JSON(JavaScriptObjectNotation)数......
  • KingbaseES Json 系列九:Json路径查询函数
    KingbaseESJson系列九--Json路径查询函数(JSONB_PATH_EXISTS,JSONB_PATH_MATCH,JSONB_PATH_QUERY,JSONB_PATH_QUERY_ARRAY,JSONB_PATH_QUERY_FIRST)JSON数据类型是用来......
  • KingbaseES Json 系列八:Json记录操作函数三
    KingbaseESJson系列八--Json记录操作函数三(JSON_TABLE)JSON数据类型是用来存储JSON(JavaScriptObjectNotation)数据的。KingbaseES为存储JSON数据提供了两种类型:JSO......