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);
react 组件架构的更多相关文章
- React 组件开发初探
react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- React 组件间通讯
React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...
- React组件设计
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
- React组件设计(转)
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
- 设计 react 组件
重新设计 React 组件库 诚身 7 个月前 在 react + redux 已经成为大部分前端项目底层架构的今天, 让我们再次回到软件工程界一个永恒问题的探讨上来, 那就是如何提升一个开发团队 ...
- React组件设计技巧
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
- React 组件性能优化探索实践
转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...
- webpack 打包一个简单react组件
安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...
随机推荐
- URI URN URL的RFC参考文档
- Jquery | 基础 | 项目实践
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 爬虫的UA池和代理池
爬虫的UA池和代理池 一.下载中间件 先祭出框架图: 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - 作用: (1)引擎将请求传递给下 ...
- Codeforces Round #396 (Div. 2) C
Mahmoud wrote a message s of length n. He wants to send it as a birthday present to his friend Moaz ...
- Hive_Hive和数据仓库简介
文章摘自 : http://www.imooc.com/video/7573 Hive是建立在Hadoop HDFS上的数据仓库基础架构.Hive可以用来进行数据的ETL.Hive定义了简单的类似SQ ...
- ajax中get和post区别
参考地址:http://blog.csdn.net/laijieyao/article/details/40426257 首先要明确的事$.get方法是使用GET方式进行异步请求.$.post方法使用 ...
- C#的弱引用
关于C#中的弱引用 一:什么是弱引用 了解弱引用之前,先了解一下什么是强引用 例如 : Object obj=new Object(); 就是一个强引用,内存分配一份空间给用以存储Object ...
- 最长上升子序列 O(nlogn)
题意:求一个序列中的最长上升子序列. 平常我用的是N*N做法,但是一遇到需要nlogn时,就被卡的无地自容了. 所以下定决心要学习nlogn做法. 如何实现nlongn哪? 这里要用到一个栈B,记录按 ...
- C#入门笔记1
C#是用于创建要运行在.NET CLR上的应用程序的语言之一,从C和C++语言演化而来,是微软专门为使用.NET平台而创建的.优点:就是彻头彻尾为.NET Framework设计语言. C#能编写什么 ...
- 【algorithm】二叉树的遍历
二叉树的遍历 二叉树用例 代码解析: public class BinaryTree { static class TreeNode { Integer val; TreeNode left; Tre ...