react 组件架构

容器型组件（container component）

• 含有抽象数据而没有业务逻辑的组件
• 负责管理数据和业务逻辑，不负责 UI 的呈现
• 带有内部状态

展示型组件（presentational component）

• 只负责 UI 的呈现
• 没有状态（即不使用this.state这个变量），一般可以写成无状态组件，但也可以不是，展示型组件也可以拥有自己的生命周期
• 所有数据都由参数（this.props）提供

 

把网络请求 + 列表展示的组件拆分成以上的容器型组件 + 展示型组件：

　　在容器组件中访问网络，有结果之后执行setState，在render中使用展示型组件，网络请求来的列表通过propos传递给展示型组件。

　　展示型组件中仅仅获取propos来展示数据，而没有state（无状态组件，所以展示型组件可以用function来创建）

以上完成了组件的初步拆分。但是可能有多个组件中都有异步请求，所以必须把异步请求从组件中独立抽取出来，在容器组件上多抽出来一层专门处理异步请求的网络组件。

　　这个网络组件或称为高阶组件，用于增强组件。实现过程：采用属性劫持。一个函数接收一个组件A，返回另一个组件B。B的props接收一个promise，didMount中对这个promise进行回调注册（ps：这里可能需要看一下下面的promise解释），有结果后进行setState，render中调用A，props传入网络数据，到了A中直接获取数据展示即可。

总结以上过程：

　　第一次抽取：把组件中的网络请求与展示逻辑拆分，分为container和list组件

　　第二次和第一次类似，继续对container进行网络请求和容器的拆分，分为netWrapper和container组件。到这一步container可以从propos中获取网络数据，也可以拥有自己的state，而list和container的关系可以认识，list把自己的状态都交给了container来管理，list仅仅用于展示，这里有点类似于controller view 模式。

 

补充以上的promise解释：

对于一个状态已经变化完毕的promise，后续任何时候对这个promise进行函数注册，都会马上被执行，而且可以多次执行，下面代码输出两个ok

var p = new Promise(function(resolve,reject){
    resolve("ok")
});

setTimeout(function(){
    p.then(function (data) {
        console.log(data)
    });
},100);

setTimeout(function(){
    p.then(function (data) {
        console.log(data)
    });
},1000);