和TARO一起做SPA--react+redux+dva+moc

作者: shtonyteng | 来源:发表于2019-01-06 09:24 被阅读0次

1. 基础知识

1.1 this指针

this指针大概是javascript中最令初学者困惑的语法了，简单说，this指针就是指向函数或方法运行的上下文环境。既然叫上下文环境，肯定和运行的环境相关。
在浏览器环境下：

当this出现在函数调用中，指向的是他运行的上下文：window对象；
当this出现在对象方法调用时，则指向了他运行的上下文：对象本身；
让我们举个例子说明一下：

    function fn(){
        console.log(this);
    }
    var obj={
        fn:fn
    }
    fn();
    obj.fn();

通过运行代码,你会发现,fn返回的是window对象,而obj.fn返回的则是obj对象
为了加深理解，我们看一个有点迷惑的问题

<!DOCTYPE html>
<html>
    <div id="root"></div>
</html>
<script type="text/javascript"/>
    var e1=document.getElementById("root");
    var getId=document.getElementById
    var e2=getId("root");
</script>

这是一个常见的场景,每次使用document.getElementById方法很麻烦,所以重新定义一个函数 getId,指向document.getElementById方法.
但是你发现,在chrome浏览器中调用getId方法居然系统会抛一个异常:

test.htm:9 Uncaught TypeError: Illegal invocation

发生异常的原因就在于,getElementById内部实现使用了this指针指向document对象.但是,当你用自己定义的getId方法时,getElementById已经由对象调用变成了方法调用,this指针被指向了window对象.

既然this指针有这样的不确定性，那么，自然就可以想到如何根据需要变更他的指向。
变更this指针指向有两种方法，定义时绑定和运行时绑定。

定义时绑定 bind
运行时绑定 apply/call
还是让我们看个例子：
对于我们上个getId的例子,你只要这样调用就可以了
定义时通过bind方法绑定

    const getId=document.getElementById.bind(document);
    const e=getId("root");

运行时通过call方法绑定

    const e=getId.call(document,"root")

运行时通过apply方法绑定

     const e=getId.apply(document,["root"])

通过上面的例子也可以看到call和apply两者的区别是：apply绑定时，传入的参数为数组形式，而call绑定则是采用枚举的方式。所以如果getId方法需要使用apply方法时,必须将参数包装成数组的形式.

1.2 高阶函数

在javascript语言中,函数是一类成员,函数可以作为变量,也可以作为输入参数和返回参数.将函数作为输入参数或输出参数的函数称之为高阶函数.后面我将会带大家一起了解一下高阶函数.

1.2.1 闭包

让我们看一下第一个高阶函数,闭包.
闭包利用了javascript函数作用域内变量被引用不会消除的特性.闭包被应用的场景非常多.
让我们先看一个获取递增ID的例子,首先,让我们看一下传统的方法,传统的方法获取递增ID,你需要先做一个全局变量.

let globalID=0
function getID(){
    return globalID++;
}
console.log(getID(),getID(),getID())

这种方法由于使用了全局变量,任何一个人都有可能不经意的修改globalID的值导致你的方法失效.
采用闭包的写法,你先创建一个crGetID方法通过闭包保存ID,并返回getID函数.然后通过getID方法获取ID

function crGetID(){
    let id=0;
    return function(){
        return id++;
    }
}
var getID=crGetID();
console.log(getID(),getID(),getID())

这样,没有人可以直接修改你的ID值.

1.2.2 currying

让我们再看一个闭包的应用:currying,currying解决的问题是把一个函数的多个参数转换为单参数函数.
举个例子,假设我们需要累计一个用户7天的数据:

function add(d1,d2,d3,d4,d5,d6,d7){
    return d1+d2+d3+d4+d5+d6+d7
}

如果是30天,可能需要30个输入参数,如果不定天数呢?
采用currying则可以解决这个问题:

function curryAdd(){
    let s=[];
    return function(...arg){
        if (arg.length==0){
            return s.reduce(function(p,v){return p+v},0)
        }else{
            s.push(...arg)
            console.log("s",s);
        }
    }
}
var ca=curryAdd();
ca(1);
ca(2);
ca(3);
ca(4);
console.log(ca());

通过将一个函数currying后,函数可以随时被调用,直到输入参数为空时才进行计算.
闭包的特性使之成为javascript中运用最广的特性.后续在代码中,我们还会继续看到大量的闭包用法.

1.3 es6语法

react 大量使用了es6的语法，如果你对javsascript的印象还停留在原始的印象里，你可能根本没法看懂react的代码。所以在这里我们简单对用到的es6语法做一些介绍，并尽可能以react实际使用作为学习的例子。详细的es6语法介绍，可以参考相关的技术文档。

1.3.1变量解析

数组变量解析
es6 支持对数组直接进行解析，举个例子，如果需要对变量x,y互换值，传统的做法是:

function(x,y){
    var t;
    t=x;
    x=y;
    y=t;
}

如果用数组解析，就容易多了:

let [x,y]=[y,x]

数组解析可以用到输入参数传递

    function test ([x,y,z]){
        return x+y+z;
    }
    console.log(test([1,2,3]))

上面的例子,打印出来的结果是6.
还可以用到一次返回多个参数：

    function retMult(){
        return [1,2,3]
    }
    let [x,y,z]=retMult();
    console.log(x,y,z)

函数会打印出 1,2,3

对象变量解析
对象解析用的更广泛，让我们举个简单的例子：

    let {x:x,y:y}={x:2,y:3}
    console.log(x,y);

函数打印结果 2,3
还可以简写为:

    let {x,y}={x:2,y:3}
    console.log(x,y);

让我们看一下下面的例子,如果对象属性名称和变量名称可以更进一步进行简写:

    let x=1;
    let obj={x};  //相当于 obj={x:x}
    console.log(obj.x);

和数组解析一样，对象解析大量应用在输入参数的传值上,让我们举一个redux的实际应用的例子(这个例子里,假设state对象仅包含一个value属性)：

function  reducer({value},{type,payLoader}){
    switch(type){
        case "calc":
            return  {value:value+payLoader}
        default:
            return {value}
    }
}

这个例子里,使用了对象的解析,代码更加简洁和异动.如果不使用对象解析,你的代码是这样的:

function reducer(state,action){
    switch(action.type){
        case "calc":
            return {value:state.value+action.payLoader}
        default:
            return state;
    }
}

1.3.2箭头函数

箭头函数可以让代码更加简洁和直观，另外，由于箭头函数对this指针的特殊处理，因此，被大量的运用。
让我们还是以数组提供的map函数为例子说明:

let arr=[1,2,3,4];
let m=arr.map(v=>v*2);

使用箭头函数,即简洁又直观,对数组中的每个元素直接乘以2.
如果使用传统的方式,你需要这样写:

let n=arr.map(function(v){
    return v*2;
})
console.log(n);

使用箭头函数需要注意以下几点:

如果是一个参数,可以省略(),如果多个参数或没有参数,则必须使用()
如果函数直接返回箭头后的表达式,可以不加{},否则,需要在箭头后使用{}
让我们再举个数组提供的reduce方法的实际例子:

var r=[1,2,3,4].reduce((p,n)=>p+n);
console.log(r);

这个例子通过reduce函数计算数字元素的累加和,reduce函数的输入参数是一个函数,函数的输入参数分别为累加之和p以及下一个元素n.
如果用传统的方法,你需要这样写:

var r=[1,2,3,4].reduce(function(p,n){
    return p+n;
})
console.log(r);

1.3.3类

ES6提供了类,类实际上就是一个语法糖.让我们还是通过一个具体的例子来看一下类的实现:

class Counter extends Component{
    constructor(props){
        super(props)
    }
    sub(){
        let value=this.state.value-1;
        this.setState({value})
    }
    add(){
        let value=this.state.value+1;
        this.setState({value})
    }
    render(){
        return (
            <div>
                <button onClick={this.add.bind(this)}>+</button>
                <button onClick={this.desc.bind(this)}>-</button>
            </div>
        )
    }
}

这个例子说明了ES6的类的用法.
首先,类的定义语法是:

class  Name{
}

你的类可以继承自另一个类,在刚才的例子里我们的类Counter继承自React的Component类

class Counter extends Component{
}

你可以根据需要实现类的构建器,构建器可以通过super方法引用父类的构建器:

    constructor(props){
        super(props)
    }

类的方法可以缩写为methodName(){}的形式

    sub(){
        let value=this.state.value-1;
        this.setState({value})
    }

1.3.4装饰器

1.4 异步函数

2. 代码框架

2.1nodejs

2.2webpack

2.3react

2.3.1第一个react程序

由于react需要依赖大量的依赖库，如通过babel对es6的转化，css的渲染…对于新手来说，可能这一大堆配置就让人望而却步。为了简化开发环境的搭建，让我们直接用create-react-app 搭建脚手架（具体命令含义可以先不用理解）：
首先,我们安装create-react-app

npm install -g create-react-app

安装成功后,就可以开始使用

mkdir basic
create-react-app basic

basic是我们第一个react程序的名称,create-react-app命令会运行一段时间,帮我们搭建脚手架和开发环境.命令执行后,我们开始启动我们的应用:

cd basic
yarn start

yarn start命令后,webpack会启动webpack-dev-server跟踪我们代码修改,然后自动启动一个端口为3000的HttpServer帮我们进行调试,并且很贴心的弹出URL为http://localhost:3000的浏览器页面,显示我们的第一个react应用.
好,让我们开始学习第一个react程序,首先,让我们看一下脚手架帮我们搭建的目录结构。

,create-react-app创建的目录结构
其中/public/index.html就是我们的页面模板,所有的组件都会渲染在这个文件上.
让我们看一下第一个组件:/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

这个组件很简单,重要的是这一句:

ReactDOM.render(<App />, document.getElementById('root'));

这个是React的语句,意思是在index.html页面ID为root的元素上渲染App组件.其中index.html页面放置在public目录下.
而App就是React组件,系统如何区分React组件和DOM组件呢?很简单,在React中,首字母为大写的就是React组件,小写字母为DOM组件.
App组件非常简单，让我们也看一下：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}
export default App;

好，现在让我们开发一个计数器程序来学习一下React开发.首先,让我们自己定义一个Counter组件.
首先,我们在src根目录下新建一个counter.js文件

import React,{Component} from 'react'
class Counter extends Component{
    constructor(){
        super()
        this.state={value:0}
    }
    render(){
        return (
            <div>
                <span>{this.state.value}</span>
                <button onClick={this.add.bind(this)}>+</button>
                <button onClick={this.desc.bind(this)}>-</button>
            </div>
        )
    }
    desc(){
        let value=this.state.value-1;
        this.setState({value})
    }
    add(){
        let value=this.state.value+1;
        this.setState({value})
    }
} 
//将组件导出模块
export default Counter

然后,修改index.js文件,渲染我们新开发的Counter组件:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
-import App from './App';
+import Counter from './counter'
import * as serviceWorker from './serviceWorker';
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Counter />, document.getElementById('root'));
serviceWorker.unregister();

页面会自动刷新修改后的内容,(是不是很惊讶)显示结果.点击 + 和 - 按钮系统会自动显示最新的counter.
让我们来分析一下代码:

首先 ,我们的Counter组件继承自React.Component.我们的Counter组件继承Component组件,并且实现了构建器.在构建器中,完成了state值的初始化.

class Counter extends Component{
    constructor(){
        super()
        this.state={value:0}
    }
}

让我们看接下来的渲染部分的处理:

    render(){
        return (
            <div>
                <span>{this.state.value}</span>
                <button onClick={this.add.bind(this)}>+</button>
                <button onClick={this.desc.bind(this)}>-</button>
            </div>
        )
    }

render方法是React组件的核心部分,主要完成组件的表现.在这里,render方法返回了一个jxs的代码段.所谓的jxs,简单说就是嵌入了react语句的html代码段.
在这里,你特别需要注意的是,React会自动跟踪state值的变化进行渲染,因此,你不需要像传统开发一样手动渲染数据,只需要简单的标明会发成变更的数据即可:

                <span>{this.state.value}</span>

在这里,{}表示的是里面的部分是由react代码构成.
这个代码段有几个特别需要注意的地方:

return语句直接返回JSX时,必须用()进行包裹,下面的语句由于<div>前没有(),会直接报错:

    render(){
        return <div>{this.state.value}</div>  
    }

html代码段必须有一个根元素,因此,以下的代码是错误的:

    render(){
        return (
                <span>{this.state.value}</span>
                <button onClick={this.add.bind(this)}>+</button>
                <button onClick={this.desc.bind(this)}>-</button>
        )
    }

和HTML事件命名机制不同,让我们对比一下React的写法:

  <button onClick={this.add.bind(this)}>+</button>

下面是HTML的写法:

 <button onclick="test()">test</button>

有三个重要的区别:
1.React事件触发是骆驼命名方式.而HTML的触发方式是全部小写;
2.React事件触发是函数名,而HTML的触发方式是函数执行代码块;
3.React事件处理函数this指针不会绑定任何对象,而HTML指针会自动绑定到window对象;

如果处理state,则React事件处理函数需要绑定this指针到组件
这就是以下代码的原因,通过bind方法将函数this指针绑定到React Component:

  <button onClick={this.add.bind(this)}>+</button>

state的处理原则
让我们看一下事件处理方法的实现:

    desc(){
        let value=this.state.value-1;
        this.setState({value})
    }
    add(){
        let value=this.state.value+1;
        this.setState({value})
    }

代码很简单,但是有几个需要注意的地方:

不能直接修改state的值,必须通过this.setState方法修改,否则,系统不会进行渲染.

  let value=this.state.value+1
  this.state.value=value

state的原始值不能修改,因此,以下代码是无效的:

   let value=this.state.value++; //this.state.value++修改了原始的state的值
   this.setState({value})

第一个react程序结束了,React的逻辑很简单，每个组件都有一个state值,组件通过监控state的状态变化实现页面渲染.
最后,别忘了需要从模块中导出我们的组件:

export default Counter

导出是,如果不增加default参数,导入时需要将组件名称用{}括起来.一个模块中智能有唯一的一个default组件.

2.3.2 React组件间通讯

从第一个例子我们可以发现,React组件开发很容易,通过监控组件state值的变化,实现自动的渲染,极大的减轻了开发的工作量.但是每个组件都有自己的state,如果多个组件需要通讯,问题就变得复杂了.
让我们看下面的这个例子,在这个例子,组件Control由3个Counter构成,每个Counter都可以自动增减,CounterControl显示的值是3个Counter的累加值.
这个例子显示了组件间如何进行通信.
先让我们看一下CounterControl组件的代码:

import React,{Component } from "react";
import Counter from "./counter"
class counterControl extends Component{
    constructor(){
        super();
        //设置组件的初始值
        this.state={value:0}
    }
    //这个地方需要特别注意,change是Counter组件每次点击发生变化的值
    change(change){
        //不可以修改state的原始值
        let value=this.state.value;
        value+=change;
        //必须通过this.setState方法进行state的修改
        this.setState({value:value})
    }
    render(){
        return(
            <div>
                <Counter name={"one"} change={this.change.bind(this)}/>
                <Counter name={"two"}  change={this.change.bind(this)}/>
                <Counter name={"three"}  change={this.change.bind(this)}/>
                <div>value:{this.state.value}</div>
            </div>
        )
    }
}
export default counterControl;

Counter组件也发生了变化,增加了name属性和change方法.

<Counter name={"three"}  change={this.change.bind(this)}/>

由于组件彼此state独立,因此,组件之间的通讯就落到了change方法里.让我们看一下change方法的实现:

    //这个地方需要特别注意,change是Counter组件每次点击发生变化的值
    change(change){
        //不可以修改state的原始值
        let value=this.state.value;
        value+=change;
        //必须通过this.setState方法进行state的修改
        this.setState({value:value})
    }

change方法实际是CounterControl通过属性传递给Counter子组件的回调函数.他的实现原理是每次Counter组件被点击时,把Counter组件state值的变化回调至CounterControl,从而实现CounterControl的State值的变化.
让我们看一下Counter组件:

import React,{Component} from 'react'
class Counter extends Component{
    constructor(props){
        super(props)
        this.state={value:0}
      }
    desc(){
        let value=this.state.value-1;
        this.setState({value})
        this.props.change(-1)
    }
    add(){
        let value=this.state.value+1;
        this.setState({value})
        this.props.change(1);
    }
    render(){
        return (
            <div>
                <span>{this.props.name}:{this.state.value}</span>
                <button onClick={this.add.bind(this)}>+</button>
                <button onClick={this.desc.bind(this)}>-</button>
            </div>
        )
    }
}
export default Counter

重点看一下组件的onClick方法:

    desc(){
        let value=this.state.value-1;
        this.setState({value})
        this.props.change(-1)
    }
    add(){
        let value=this.state.value+1;
        this.setState({value})
        this.props.change(1);
    }

无论是add还是desc方法,Counter在完成自己state变更的同时,都需要调用通过props属性传递的change方法回调CounterControl提供的chanage方法,实现state变化的通知.

2.3.3 优化

上面的例子我们发现,Counter组件如果需要整合到CounerControl组件中,就必须进行修改.
原来Counter组件的事件如下:

    desc(){
        let value=this.state.value-1;
        this.setState({value})
    }
    add(){
        let value=this.state.value+1;
        this.setState({value})
    }

修改后

    desc(){
        let value=this.state.value-1;
        this.setState({value})
        //增加了change的回调方法
        this.props.change(-1)
    }
    add(){
        let value=this.state.value+1;
        this.setState({value})
        //增加了change的回调方法
        this.props.change(1);
    }

也就是说,Counter组件并不是一个通用的组件.造成这种情况的原因,是由于Counter组件增加了过多的业务逻辑.
如果把组件的显示和业务逻辑进行剥离成内部组件和容器组件,就可以解决这个问题.内部组件只负责显示,容器组件则负责具体的业务逻辑和state处理.让我们看一下如何进行剥离:
新的NgCounter内部组件代码如下:

class NgCounter extends Component{
    render(){
        return (
            <div>
                <span>{this.props.name}:{this.props.value}</span>
                <button onClick={this.props.add}>+</button>
                <button onClick={this.props.sub}>-</button>
            </div>
        )        
    }
}

剥离后的NgCounter组件不再进行任何业务逻辑的处理,也不处理state相关的数据.它只是按照传递的属性值进行显示或回调.
我们管这种不处理任何state的组件称之为无状态组件.无状态组件可以进一步简化为函数,如下所示:

import React,{Component} from 'react'
function NgCounter(props){
    return (
        <div>
            <span>{props.name}:{props.value}</span>
            <button onClick={props.add}>+</button>
            <button onClick={props.sub}>-</button>
        </div>
    )
}

无状态组件函数由于没有this指针,属性props由容器组件传递.
让我们看一下容器组件如何进行处理

import React,{Component} from 'react'
class Container extends Component{
    constructor(props){
        super(props);
        this.state={value:0}
    }
    add(){
        this.setState({value:this.state.value+1})
        //如果嵌入CounterControl则需要增加以下方法
        this.props.add();
    }
    sub(){
        this.setState({value:this.state.value-1})
        //如果嵌入CounterControl则需要增加以下方法
        this.props.sub();
    }
    render(){
        return(
            <NgCounter name="ngCounter" add={this.add.bind(this)} sub={this.sub.bind(this)} value={this.state.value}/>
        )
    }
}
export default Container;

通过内部组件和容器组件的拆分,如果组件需要嵌入其他组件,则只需要修改容器组件即可.内部组件不需要进行任何调整.
需要特别注意的是,此时导出的组件为容器组件.

我们把CounterControl也进行了改造,相应的代码如下:

import React,{Component} from 'react';
import NgCounter from './ngCounter'
//内部无状态组件退化为函数
function NgCounterControl(props){
    return(
        <div>
            <NgCounter name={"one"} add={props.add} sub={props.sub}/>
            <NgCounter name={"two"}  add={props.add} sub={props.sub}/>
            <NgCounter name={"three"}  add={props.add} sub={props.sub}/>
            <div>value:{props.value}</div>
        </div>
    )
}
//容器组件负责具体的业务逻辑和state的处理
class Container extends Component{
    constructor(props){
        super(props);
        this.state={value:0}
    }
    add(){
        this.setState({value:this.state.value+1})
    }
    sub(){
        this.setState({value:this.state.value-1})
    }
    render(){
        return (
            //返回内部组件
            <NgCounterControl add={this.add.bind(this)} 
            sub={this.sub.bind(this)}
            value={this.state.value} />
        )
    }
}
//导出容器组件
export default Container;

2.3.4 总结

通过上面的例子,我们可以发现,虽然我们把组件拆分为内部组件和容器组件,实现了内部组件的独立性,但是,由于React组件彼此都维护自己的state,当多个组件需要同步state值的时候,情况还是变得很复杂,组件必须通过props属性传递回调方法层层调用.因此,对于多个组件协调工作时,这种实现方法就显得很笨拙而且效率低下.

2.4Ant.Design的整合

在开始redux模块前,让我们先介绍一下Ant.Design模块.
到目前为止,我们自己开发的组件都是基于html的原生元素.实际上,Ant.Design已经帮我们精心设计了大量优秀的组件,我们可以直接使用,这一部分,我们将介绍给大家如何使用Ant.Design

2.4.1引入Ant.Design

首先,让我们安装Ant.Design

yarn add antd

修改你的App.css,在第一行加入:

@import '~antd/dist/antd.css';

让我们新增加一个antd的组件,简单演示一下如何使用Ant.Design.让我们在/src目录下增加一个antd.js文件,简单实现一个无状态的组件.
这个组件里我们简单使用了Row,Col,Button,Calendar,Rate,Card,Steps 几个组件.

import React from 'react'
import "./App.css"
import {Row,Col,Button,Calendar,Rate,Card,Steps } from 'antd'
export default function(){
    const Step = Steps.Step;
    return (
        <Row>
            <Col span={12}>
                <Card title="Antd 示例">
                    <Rate allowHalf defaultValue={2.5} />
                    <Steps current={1}>
                        <Step title="Finished" description="This is a description." />
                        <Step title="In Progress" description="This is a description." />
                        <Step title="Waiting" description="This is a description." />
                    </Steps>
                    <Button type="primary">hello,world</Button>
                </Card>
            </Col>
            <Col span={12}><Calendar/></Col>
        </Row>
    )
}

下一步,修改index.js文件

//导入刚才新建的组件
import Antd  from './antd'
//渲染该组件
ReactDOM.render(<Antd/>, document.getElementById('root'));

现在我们应该可以看到Ant.Design开始正式工作了.

2.4redux组件

2.4.1 reduct组件原理

reduct组件由store action reducer构成:

store:全局唯一和共享的数据存储;store的主要方法有
- dispatch:负责调用reducer处理action,生成新的state
- subscribe:负责监听state的变化,如果state发生了变化,则调用相关的回调函数进行处理
action:由动作类型type和携带的数据构成,reducer负责根据action的type进行相应的处理;
reducer:负责根据action处理state,并且保证每次reducer操作,都必须返回新的state;

2.4.2 reduct的使用

让我们通过一个实际的例子学习怎样使用reduct,
首先,我们需要安装redux

yarn add redux

实现reducer,创建store

import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {createStore} from 'redux'
const reducer=(state,action)=>{
    console.log(state.value)
    switch(action.type){
        case "calc":
            return {value:state.value+action.payload}
        default:
            return state;
    }
}
const initState={value:0};
const store=createStore(reducer,initState);

创建store后,我们需要所有的组件都能够访问该store,因此,我们需要把store放到所有组件的父容器上.在这里,我们通过新建一个Provider组件实现store的保存:

class Provider extends Component{
    getChildContext(){
        return {
            store:this.props.store
        }
    }
    render(){
        return this.props.children
    }
}
Provider.childContextTypes={
    store:PropTypes.object
}

请注意getChildContext方法,为了简化store的传递,React提供了一个Context对象.需要使用Context的父组件只要实现getChildContext方法返回Context对象.并且设置该属性的类型为PropTypes.object即可.
因为Provider作为父组件,内部会嵌套子组件,所以render方法直接返回this.props.children即可.
让我们看一下如何使用Provide组件:

        <Provider store={store}>
            <ReduxCounter name={"one"} />
            <ReduxCounter name={"two"} />
            <ReduxCounter name={"three"} />
            <Panel/>
        </Provider>

this.props.children指向的即是Provider组件嵌套的内容.
让我们看一下ReduxCounter组件的实现:

function ReduxCounter(props){
    return (
        <div>
            <span>{props.name}:{props.value}</span>
            <button onClick={props.add}>+</button>
            <button onClick={props.sub}>-</button>
        </div>        
    )
}

ReduxCounter 组件是一个内部无状态组件,只负责渲染

class ReduxCounterContainer extends Component{
    constructor(props,context){
        super(props,context);
        this.state={value:0}
        this.store=this.context.store;
    }
    add(){
        this.setState({value:this.state.value+1})
        this.store.dispatch({
            type:"calc",
            payload:1
        })
    }
    sub(){
        this.setState({value:this.state.value-1})
        this.store.dispatch({
            type:"calc",
            payload:-1
        })
    }
    render(){
        return(
            <ReduxCounter name={this.props.name} value={this.state.value} add={this.add.bind(this)} sub={this.sub.bind(this)}/>
        )
    }
}
ReduxCounterContainer.contextTypes={
    store:PropTypes.object
}

所有的逻辑和状态的处理都由ReduxCounterContainer组件完成.
在这里,需要特别注意的是

ReduxCounterContainer.contextTypes={
    store:PropTypes.object
}

如我们之前所说,所有的子组件,如果希望使用父组件提供的context,必须声明该组件的contextTypes为PropTypes.object

下一步,让我们看一下Panel组件的实现

class Panel extends Component{
    constructor(props,context){
        super(props,context);
        context.store.subscribe(this.change.bind(this));
    }
    change(){
        this.setState(this.context.store.getState());
    }
    render(){
        return (
            <div>{this.context.store.getState().value}</div>
        )
    }
}
Panel.contextTypes={
    store:PropTypes.object
}

Panel组件很简单,只需要通过跟踪store的state变化,展示子state的value值即可.
因此,Panel组件需要接受store的回调

        context.store.subscribe(this.change.bind(this));

最后,让我们看一下ReduxCounterControl组件的实现

function  ReduxCounterControl(){
    return (
        <Provider store={store}>
            <ReduxCounterContainer name={"one"} />
            <ReduxCounterContainer name={"two"} />
            <ReduxCounterContainer name={"three"} />
            <Panel/>
        </Provider>        
    )
}
export default ReduxCounterControl;

至此,我们完成了redux的使用,总结一下,redux使用包括以下几步:

创建reducer
创建store
创建Provider,用来保存和传递store
需要跟踪store值的组件,调用store的subscribe方法监控state值的变化
各组件通过store.dispatch方法调用reducer处理并返回state
组件发现state值发生变化,自动渲染
下一节我们将学习如何使用react-redux简化这个流程

2.4.3 react-redux的使用

2.5mockjs

2.6dva

2.7taro

2.8taro-ui

3 开发环境搭建

3.1搭建taro脚手架项目

首先,让我们搭建taro的脚手架,这个例子里我们假设项目名称为wos,则在命令行下运行
taro init wos
回答系列问题后,命令行会自动创建以wos为文件夹的脚手架项目.
这个教程里,是否使用TypeScript选择了否,css预处理器选择了less,模板选择了redux
如下所示:

 Taro v1.2.4

Taro即将创建一个新项目!
Need help? Go and open issue: https://github.com/NervJS/taro/issues/new

? 请输入项目介绍！ wos
? 是否需要使用 TypeScript ？ No
? 请选择 CSS 预处理器（Sass/Less/Stylus） Less
? 请选择模板 Redux 模板

执行成功后,可以开始编译微信小程序:

cd wos
npm run dev:weapp

命令会执行一会儿,当出现

监听文件修改中...

说明编译完成,可以打开微信小程序开发工具,新建项目,选择wos文件夹后,可以看到小程序已经可以正常运行.

3.2整合tara-ui

在命令行下输入
yarn add taro-ui
现在,taro-ui已经整合成功,我们可以简单修改pages/indexs页面测试一下

+ import {aButton} from 'taro-ui'
  render () {
    return (
      <View className='index'>
      +<AtButton type='primary'>tryme</AtButton>
        <Button className='add_btn' onClick={this.props.add}>+</Button>
        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
        <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
        <View><Text>{this.props.counter.num}</Text></View>
        <View><Text>Hello, World</Text></View>
      </View>
    )
  }

再次运行
npm run dev:weapp
打开微信小程序开发工具,这时候你可以看到,首页里,已经多了一个蓝色的按钮.
至此,我们已经搭建了taro的开发环境.

3.3整合dva框架

下面的步骤,我们将整合dva框架.首先,我们先安装相关的依赖库
yarn add dva-core dva-loading
我们把所有的配置都集中在一起,在src目录下新建一个config文件夹,生成index.js,代码如下:

// 请求连接前缀
export const baseUrl = 'http://localhost:3721';
// 输出日志信息
export const noConsole = false;

dva会按照路由多model进行分层管理,在taro框架里,我们没有使用umi,所以需要统一管理model,让我们在/src目录下新建models文件夹,生成index.js文件,我们现在还没有model需要dva管理,因此,先空着.

export default [
]

我们让dva来管理我们的store,在src目录下新建util文件夹,生成dva.js文件,代码如下.

import Taro from '@tarojs/taro'
import { create } from 'dva-core'
import { createLogger } from 'redux-logger'
import createLoading from 'dva-loading'

let app;
let store;
let dispatch;

function createApp(opt) {
  // redux日志
  opt.onAction = [createLogger()];
  app = create(opt);
  app.use(createLoading({}));

  // 适配支付宝小程序
  if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
    global = {};
  }
  if (!global.registered) 
    opt.models.forEach(
      model =>{
        app.model(model);
        console.log(model)
      });

  global.registered = true;
  app.start();
  store = app._store;
  app.getStore = () => store;

  dispatch = store.dispatch;
  app.dispatch = dispatch;
  return app;
}

export default {
  createApp:createApp,
  getDispatch() {
    return app.dispatch
  }
}

让我们封装一下http请求你的工具类,同样,在src/util/目录下新建request.js文件,代码如下:

import Taro from '@tarojs/taro';
import { baseUrl, noConsole } from '../config';

const request_data = {
  platform: 'wap',
  rent_mode: 2,
};

export default (options = { method: 'GET', data: {} }) => {
  if (!noConsole) {
    console.log(`${new Date().toLocaleString()}【 M=${options.url} 】P=${JSON.stringify(options.data)}`);
  }
  return Taro.request({
    url: baseUrl + options.url,
    data: {
      ...request_data,
      ...options.data
    },
    header: {
      'Content-Type': 'application/json',
    },
    method: options.method.toUpperCase(),
  }).then((res) => {
    console.log("res:",res);
    const { statusCode, data } = res;
    if (statusCode >= 200 && statusCode < 300) {
      if (!noConsole) {
        console.log(`${new Date().toLocaleString()}【 M=${options.url} 】【接口响应：】`,res.data);
      }
      if (data.status !== 'ok') {
        Taro.showToast({
          title: `${res.data.error.message}~` || res.data.error.code,
          icon: 'none',
          mask: true,
        });
        console.error(`${res.data.error.message}~` || res.data.error.code);
      }
      return data;
    } else {
      throw new Error(`网络请求错误，状态码${statusCode}`);
    }
  })
}

典型的dva的开发目录如下:

每个文件件都需要4个文件,太复杂,所以我们在根目录下增加一个脚本template.js,自动生成文件:

/**
 * pages模版快速生成脚本,执行命令 npm run tep `文件名`
 */

const fs = require('fs');

const dirName = process.argv[2];

if (!dirName) {
  console.log('文件夹名称不能为空！');
  console.log('示例：npm run tep test');
  process.exit(0);
}

// 页面模版
const indexTep = `import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';

@connect(({${dirName}}) => ({
  ...${dirName},
}))
export default class ${titleCase(dirName)} extends Component {
  config = {
    navigationBarTitleText: '${dirName}',
  };

  componentDidMount = () => {

  };

  render() {
    return (
      <View className="${dirName}-page">
        ${dirName}
      </View>
    )
  }
}
`;

// scss文件模版
const scssTep = `@import "../../styles/mixin";

.${dirName}-page {
  @include wh(100%, 100%);
}
`;

// model文件模版
const modelTep = `import * as ${dirName}Api from './service';

export default {
  namespace: '${dirName}',
  state: {

  },

  effects: {
    * effectsDemo(_, { call, put }) {
      const { status, data } = yield call(${dirName}Api.demo, {});
      if (status === 'ok') {
        yield put({ type: 'save',
          payload: {
            topData: data,
          } });
      }
    },
  },

  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload };
    },
  },

};
`;
// service页面模版
const serviceTep = `import Request from '../../utils/request';

export const demo = data => Request({
  url: '路径',
  method: 'POST',
  data,
});
`;
fs.mkdirSync(`./src/pages/${dirName}`); // mkdir $1
process.chdir(`./src/pages/${dirName}`); // cd $1
fs.writeFileSync('index.js', indexTep);
fs.writeFileSync('index.scss', scssTep);
fs.writeFileSync('model.js', modelTep);
fs.writeFileSync('service.js', serviceTep);

console.log(`模版${dirName}已创建,请手动增加models`);

function titleCase(str) {
  const array = str.toLowerCase().split(' ');
  for (let i = 0; i < array.length; i++) {
    array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
  }
  const string = array.join(' ');
  return string;
}
process.exit(0);

然后,在package.json文件中的scripts下增加一行
"g":"node template"
然后运行:
npm run g home
可以看到,在pages目录下新增加了 home文件夹以及下面的4个文件.
至此,我们完成了dva项目的整合,后面,我们将开始完善代码.

3.4整合mock

首先，让我们加载mock依赖库
yarn add mocker-api mockjs --dev
在项目根目录下新建 mock文件夹,新建index.js文件。输入以下代码：

const delay = require('mocker-api/utils/delay');
const mockjs=require('mockjs');
const data= {
    'GET /api/user': {
        id: 1,
        username: 'kenny',
        sex: 6
    },  
    'GET /api/hi':(req,res)=>{
        res.json(
            {
                id:1,
                //query 方法获取Get参数,如 /api/hi?name=tony
                username:req.query["name"],
            }
        )
    },
    //可以直接使用mockjs生成mock数据
    'GET /api/mock':mockjs.mock({
        'list|10-100':1,
    })
}
//使用delay方法可以延迟返回数据
module.exports=delay(data,1000);

修改package.json文件，在scripts下新增一行：

"mock": "mocker ./mock"

运行
npm mock
返回

> wos@1.0.0 mock D:\study\taro\wos
> mocker ./mock

> Server Listening at Local: http://localhost:3721/
>           On Your Network: http://192.168.60.1:3721/

我们可以开始在浏览器中测试，输入 http://localhost:3721/api/user，1秒后返回mock数据:

{"id":1,"username":"kenny","sex":6}

输入 http://localhost:3721/api/hi/name='tony',1秒后返回mock数据:

{"id":1,"username":"tony"}

3. 完善代码

我们设计的App分为四个模块:

首页
分析模块
营销模块
账户模块
登陆模块
我们使用之前增加的模板功能,增加另外的3个页面:

npm run g home
npm run g analysis
npm run g account
npm run g login

3.1微信小程序首页

现在我们开始修改app.js文件:

import '@tarojs/async-await'
import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/redux'
import Index from './pages/index'
import './app.less'

-import configStore from './store'
+import dvaApp from './util/dva'
+import models from './models'

// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

+const app=dvaApp.createApp({models})
+const store=app.getStore()
-const store = configStore()

class App extends Component {

  config = {
    //页面路由表
    pages: [
+    'pages/home/index',
+    'pages/analysis/index',
+    'pages/account/index',
+    'pages/market/index'
+    'pages/login/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    //底部工具栏
    tabBar: {
+      list: [{
+        pagePath: "pages/home/index",
+        text: "首页",
+        iconPath: "./images/tab/home.png",
+        selectedIconPath: "./images/tab/home-active.png"
+     }, {
+        pagePath: "pages/analysis/index",
+       text: "分析",
+        iconPath: "./images/tab/cart.png",
+       selectedIconPath: "./images/tab/cart-active.png"
+      }, {
+        pagePath: "pages/market/index",
+        text: "营销",
+        iconPath: "./images/tab/cart.png",
+        selectedIconPath: "./images/tab/cart-active.png"
+      },{
+        pagePath: "pages/account/index",
+        text: "账户",
+        iconPath: "./images/tab/user.png",
+        selectedIconPath: "./images/tab/user-active.png"
+      }],
+    }
+  }

  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  componentCatchError () {}

  componentDidCatchError () {}

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

再次编译运行微信小程序,这次,你将看到微信小程序底部出现了4个图标.点击图标后页面进行了正确的跳转.