dva/docs/GettingStarted.md

进入目录安装依赖:

npm i 或者 yarn install
开发：

npm run dev

npm install 太慢，试试yarn吧。建议用npm install yarn -g进行安装。

Container Component

Container Component 一般指的是具有监听数据行为的组件，一般来说它们的职责是绑定相关联的 model 数据，以数据容器的角色包含其它子组件，通常在项目中表现出来的类型为：Layouts、Router Components 以及普通 Containers 组件。

 

通常的书写形式为：

import React, { Component, PropTypes } from 'react';

// dva 的 connect 方法可以将组件和数据关联在一起

import { connect } from 'dva';

 

// 组件本身

const MyComponent = (props)=>{};

MyComponent.propTypes = {};

// 监听属性，建立组件和数据的映射关系

function mapStateToProps(state) {

return {...state.data};

}

 

// 关联 model

export default connect(mapStateToProps)(MyComponent);

Presentational Component

Presentational Component 的名称已经说明了它的职责，展示形组件，一般也称作：Dumb Component，它不会关联订阅 model 上的数据，而所需数据的传递则是通过 props 传递到组件内部。

 

通常的书写形式：

import React, { Component, PropTypes } from 'react';

// 组件本身

// 所需要的数据通过 Container Component 通过 props 传递下来

const MyComponent = (props)=>{}

MyComponent.propTypes = {};

// 并不会监听数据

export default MyComponent;

https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/04-%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%96%B9%E6%B3%95.md#container-component

 

 

 

 

Route Components

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

通过 connect 绑定数据

比如：

import { connect } from 'dva';

function App() {}

function mapStateToProps(state, ownProps) {

return {

users: state.users,

};

}

export default connect(mapStateToProps)(App);

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

Injected Props (e.g. location)

Route Component 会有额外的 props 用以获取路由信息。

location

params

children

 

五、Generator函数的概念
Generator 函数是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。

function* gen(x){
var y = yield x + 2;
return y;
}
上面代码就是一个 Generator 函数。它不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。
整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用 yield 语句注明。Generator 函数的执行方法如下。

var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }
上面代码中，调用 Generator 函数，会返回一个内部指针（即遍历器 ）g 。这是 Generator 函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。调用指针 g 的 next 方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的 yield 语句，上例是执行到 x + 2 为止。
换言之，next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，表示当前阶段的信息（ value 属性和 done 属性）。value 属性是 yield 语句后面表达式的值，表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。

http://www.ruanyifeng.com/blog/2015/04/generator.html

变量声明

const 和 let

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

const DELAY = 1000;

let count = 0;
count = count + 1;

箭头函数

函数的快捷写法，不需要通过 function 关键字创建函数，并且还可以省略 return 关键字。

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

比如：

[1, 2, 3].map(x => x + 1);  // [2, 3, 4]

等同于：

[1, 2, 3].map((function(x) {
  return x + 1;
}).bind(this));

模块的 Import 和 Export

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

比如：

// 引入全部
import dva from 'dva';

// 引入部分
import { connect } from 'dva';
import { Link, Route } from 'dva/router';

// 引入全部并作为 github 对象
import * as github from './services/github';

// 导出默认
export default App;
// 部分导出，需 import { App } from './file'; 引入
export class App extend Component {};

对象字面量改进

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

const name = 'duoduo';
const age = 8;

const user = { name, age };  // { name: 'duoduo', age: 8 }

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

app.model({
  reducers: {
    add() {}  // 等同于 add: function() {}
  },
  effects: {
    *addRemote() {}  // 等同于 addRemote: function*() {}
  },
});

Spread Operator

Spread Operator 即 3 个点 ...，有几种不同的使用方法。

可用于组装数组。

const todos = ['Learn dva'];
[...todos, 'Learn antd'];  // ['Learn dva', 'Learn antd']

也可用于获取数组的部分项。

const arr = ['a', 'b', 'c'];
const [first, ...rest] = arr;
rest;  // ['b', 'c']

// With ignore
const [first, , ...rest] = arr;
rest;  // ['c']

还可收集函数参数为数组。

function directions(first, ...rest) {
  console.log(rest);
}
directions('a', 'b', 'c');  // ['b', 'c'];

代替 apply。

function foo(x, y, z) {}
const args = [1,2,3];

// 下面两句效果相同
foo.apply(null, args);
foo(...args);

区分 apply和call就一句话：

foo.call(this,arg1,arg2,arg3)==foo.apply(thsi,arguments)==this.foo(arg1,arg2,arg3);
两者区别

call 和 apply都属于Function.prototype的一个方法，它是Javascript引擎内在实现的，

因为属于Function.prototype对象的实例，也就是每个方法都有call,apply属性，这两个方法很容易混淆，

因为他们的作用一样，只是使用方式不同（传递的参数不同）。

不同点分析

我们针对上面的foo.call(this,arg1,arg2,arg3)展开分析：<br/>
foo 是一个方法，this是方法执行时上下文相关对象，永远指向当前代码所处在的对象中。arg1,arg2,arg3是传给foo方法的参数。
    function A(){
        var message="a";
        return{
            getMessage:function(){return this.message}
        }
    }
    function B(){
        var message="b";
        return{
            setMessage:function(message){this.message=message}
        }
    }
    var a=new A();
    var b=new B();
    b.setMessage.call(a,"a的消息");
    alert(a.getMessage()); //这里将输出“a的消息”
这就是动态语言Javascript call的威力所在，简直是无中生有，对象的方法可以任意指派，而对象本身是没有这个方法的。注意，指派通俗地讲就是把方法借给另一个对象调用，原理上时方法执行时上下文的对象改变了。
所以，b.setMessage.call(a,"a 的消息");就等于用a做执行时上下文对象调用b对象的setMessage()方法，而这个过程与b一点关系都没有。作用等效于a.setMessage()

下面说一下apply的使用场景

    function print(a,b,c,d){
        console.log(a+b+c+d);
    }
    function example(a,b,c,d){
        //用call方式借用print，参数显式打散传递
        print.call(this,a,b,c,d);
        //apply方式借用print，参数作为一个数组传递
        print.apply(this,arguments);
        //或者这样写
        print.apply(this,[a,b,c,d]);
    }
    example('我','不','开','心');
从上面的例子我们发现，call和apply方法除了第一个参数相同，call方法的其他参数一次传递给借用的方法做参数，而apply就两个参数，第二个参数是借用方法的参数组成的数组。 

总结一下，当参数明确时可用call，当参数不明确时用apply并结合arguments
https://github.com/Jafeney/myBlog/blob/master/JavaScript%E6%A0%B8%E5%BF%83%E2%80%94%E2%80%94call%E5%92%8Capply%E7%9A%84%E5%8C%BA%E5%88%AB.md

对于 Object 而言，用于组合成新的 Object 。(ES2017 stage-2 proposal)

const foo = {
  a: 1,
  b: 2,
};
const bar = {
  b: 3,
  c: 2,
};
const d = 4;

const ret = { ...foo, ...bar, d };  // { a:1, b:3, c:2, d:4 }

此外，在 JSX 中 Spread Operator 还可用于扩展 props，详见 Spread Attributes。

定义全局 CSS

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

比如：

.title {
color: red;
}
:global(.title) {
color: green;
}
然后在引用的时候：

<App className={styles.title} /> // red
<App className="title" /> // green
classnames Package

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

import classnames from 'classnames';
const App = (props) => {
const cls = classnames({
btn: true,
btnLarge: props.type === 'submit',
btnSmall: props.type === 'edit',
});
return <div className={ cls } />;
}
这样，传入不同的 type 给 App 组件，就会返回不同的 className 组合：

<App type="submit" /> // btn btnLarge
<App type="edit" /> // btn btnSmall

https://github.com/dvajs/dva-knowledgemap

结构划分

很多同学在搭建项目的时候，往往忽略项目结构的划分，实际上合理的项目划分往往能够提供规范的项目搭建思路。 在 dva 架构的项目中，我们推荐的目录基本结构为：

.
├── /mock/           # 数据mock的接口文件
├── /src/            # 项目源码目录
│ ├── /components/   # 项目组件
│ ├── /routes/       # 路由组件（页面维度）
│ ├── /models/       # 数据模型
│ ├── /services/     # 数据接口
│ ├── /utils/        # 工具函数
│ ├── route.js       # 路由配置
│ ├── index.js       # 入口文件
│ ├── index.less
│ └── index.html
├── package.json     # 项目信息
└── proxy.config.js  # 数据mock配置

大家可以发现，dva 将项目中所有可能出现的功能性都映射到了对应的目录当中，并且对整个项目的功能从目录上也有了清晰的体现，所以我们建议你的项目也按照这个目录来组织文件，如果你是用的是 dva-cli 工具生成的 dva 的脚手架模板，那么会帮你按照这样目录生成好。

https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/02-%E5%88%92%E5%88%86%E7%BB%93%E6%9E%84.md

Getting Started

This article will lead you to create dva app quickly, and learn all new concepts.

Final App.

This app is used to test click speed, by collecting click count within 1 second.

Some questions you may ask.

1. How to create app?
2. How to organize code after created app?
3. How to build, deploy and publish after development?

And somethings about code organization.

1. How to write Component?
2. How to write CSS?
3. How to write Model?
4. How to connect Model and Component?
5. How to update State after user interaction?
6. How to handle async logic?
7. How to config router?

And.

1. If I want to use localStorage to save Highest Record, what to do?
2. If we want to support keyboard click rate test, what to do?

We can takes these questions to read this article. But don't worry, all the code we need is about 70 lines.

Install dva-cli

dva-cli is the cli tool for dva, include init, new.

$ npm install -g dva-cli

After installed, you can check version with dva -v, and view help info with dva -h.

Create new App

After installed dva-cli, we can create a new app with it, called myapp.

$ dva new myapp --demo

Notice: --demo option is only used for creating demo level app. If you want to create normal project, don't add this option.

cd myapp, and start it.

$ cd myapp
$ npm start

After a few seconds, you will get these outputs:

          proxy: listened on 8989
     livereload: listening on 35729