容器型组件(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);

react 组件架构的更多相关文章

  1. React 组件开发初探

    react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...

  2. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  3. React 组件间通讯

    React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...

  4. React组件设计

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

  5. React组件设计(转)

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

  6. 设计 react 组件

    重新设计 React 组件库 诚身 7 个月前   在 react + redux 已经成为大部分前端项目底层架构的今天, 让我们再次回到软件工程界一个永恒问题的探讨上来, 那就是如何提升一个开发团队 ...

  7. React组件设计技巧

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

  8. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  9. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

随机推荐

  1. 001-JDK安装

    1.确定JDK的具体版本号 [root@bogon ~]# rpm -qa | grep jdk java-1.7.0-openjdk-1.7.0.91-2.6.2.3.el7.x86_64 java ...

  2. react-native-wechat微信组件的使用

    对我来说link没有成功过,所以参考了其他人的文章,原文:https://www.jianshu.com/p/6a792118fae4 第一步:要去:https://open.weixin.qq.co ...

  3. 如何利用python制作微信好友头像照片墙?

    这个不难,主要用到itchat和pillow这2个库,其中itchat用于获取微信好友头像照片,pillow用于拼接头像生成一个照片墙,下面我简单介绍一下实现过程,代码量不多,也很好理解,实验环境wi ...

  4. ScrollTo:实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  5. 最短路之Dijkstra(单源)HDU 2544

    #include <iostream> using namespace std; ; ][]; ]; int middist; ]; void dijkstra(int n,int m) ...

  6. 转 【推荐】 RAC 性能优化全攻略与经典案例剖析

    https://mp.weixin.qq.com/s?__biz=MjM5MDAxOTk2MQ==&mid=2650277038&idx=1&sn=05cce57a1d253c ...

  7. 关于在ARM MDK 中使用STM32F4xx 硬件浮点单元的话题

    http://mp.weixin.qq.com/s/CDyZ8v2kLiyuIBHf7iqEPA

  8. C. Anton and Making Potions 贪心 + 二分

    http://codeforces.com/contest/734/problem/C 因为有两种操作,那么可以这样考虑, 1.都不执行,就是开始的答案是n * x 2.先执行第一个操作,然后就会得到 ...

  9. E. The Best among Equals

    http://codeforces.com/gym/101149/problem/E 这题的话,关键是注意到一定是要max score 然后就可以选出一个L最大优先,并且R最大的区间, 扫一次就能得到 ...

  10. 安卓 使用LruCache 加载图片 遇到的问题

    本来 使用listview的时候 加载大图片的时候 会遇到内存溢出而导致崩溃. 但是使用LruCache的时候 原本以为可以 解决这个问题.  但是发现还是出现了内存溢出的情况.   困扰很久 另外, ...