dva.js 知识导图
(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 创建项目