文档章节

比较react和flex的设计哲学

fir01
 fir01
发布于 2016/02/21 09:17
字数 790
阅读 758
收藏 4

行业解决方案、产品招募中!想赚钱就来传!>>>

前两天收到了《react引领未来的用户界面开发框架》,因为一直在从事flex的开发,自然比较,自然发现其中80%的雷同之处。深度怀疑react的开发者是曾经的flex开发者一员,或者是仿冒,但是做到了青出于蓝。

1、JSX的组件:

和flex新建mxml组件的方式一模一样,引用方式也一样,使用方式也一样。

唯一不用点是jsx多了一种创建html(xml)标记的方式。

flex自定义的组件引用:

<ui:DateField id="dateFrom" text={'2015-02-16'} width="100"/>
react的:
<RepoList
    promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
  />

JSX独创的方式:


ReactDOM.render(
  <RepoList
    promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
  />,
  document.body
);



2、状态机:

react鼓吹的状态机特点,这一点flex早已有之,并且处理方式,和界面交互的操作方式更简洁:


<mx:states>
		<s:State name="default"/>
		<s:State name="sales"/>
		<s:State name="warehouse"/>
		<s:State name="boss"/>
		<s:State name="accountant"/>
	</mx:states>
状态机使用的其中一种方式,相对react更简单,如下代码直接控制了不同状态的显示和隐藏,不同状态下的组件宽度:


<s:TextInput id="payInAmount1S" width.boss="700" width.accountant="400" includeIn="boss,accountant" width="80" />

3、生命周期:

jsx中对于组件生命周期描述,几个初始化和销毁的方法,相对flex基本只有方法名称不同而已。

4、数流据:

JSX书中有一章:数流据,其中一节“放在state和props的各是哪些部分”,和我们写flex项目的要求也是一模一样。

JSX中对props用来携带外部数据,flex中是一种更自然的,类似java中传对象引用。state的要求一样:存储简单的视图在状态,使用this.setState(JSX)来设置状态,flex是this.curentState设置状态,禁止使用this.state来直接修改状态

5、数据绑定:

JSX单向数据绑定。flex单向就是默认使用方式,也可以双向。JSX也可以扩展为双向

比较结果:reactjs就是javascript版本的flex。使用的flex的童鞋们,有福了,一天精通。

6、开发效率:

自然还是flex优胜,优胜在开发环境,运行环境和调试环境相对js单纯很多,因为它的各中特性实现都是我们比较熟悉的方式,界面开发速度非常快

7、诸多不同:

诸多不同的根本原因还是react是基于json这中方式来开,而flex是比较传统的方式,直接导致写代码时候风格迥异,同一个特征实现出来也是不同

8、论成败:

flex的失败不在设计哲学,一是东主不行,毕竟只是专注设计行业的;二是底层写代码的烂,导致性能差强人意;三当然是东主控制了flash,而没有保证它的优质成长,反而有日落西山之感。而js因为其前后端的通用性,还有非常长的一段路可以走




fir01
粉丝 19
博文 110
码字总数 34117
作品 0
长沙
项目经理
私信 提问
加载中
请先登录后再评论。
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
WebUI自动化测试框架--Dagger

Dagger是网易杭州研究院QA团队开发的一个轻量级、运行稳定的WebUI自动化测试框架,主要基于Selenium及TestNg可以认为是对Selenium进行二次封装的一个框架(俗称 造轮子 )。之所以把这个轮子...

ChenKan
2013/03/05
2.8W
6
自定义表单系统--FormDesign

是基于 FLEX 开发的一款B/S的自定义表单系统 整个过程如下: 1、通过FormDesign自定义表单画出相应的表单; 2、将生成好的XML放到程序中,并通过后台自动编译成JSP; 注:FormDesing只是自定...

polliwog
2013/03/29
1.6W
1
点阵字符设计工具--MATPaint

MATPaint 是 MATrix Paint 的缩写,用于设计点阵字符,最高支持 32x32 像素。 该工具的功能: 新建、打开和保持文件 记住上次状态 保持模式为 PNG 图像 为微控制器生成十六进制码 打印预览和...

匿名
2012/11/26
744
0
树软辅助设计工具--MTC-2008

树软辅助设计工具不仅是一个软件开发平台,而且是一个设计树形软件的CAD。 树型软件工程方法(简称树软法)以崭新的观念丰富和发展了软件工程方法。树软法定义了系统、事件、任务、作业和语句...

Treesoft
2012/12/06
4K
0

没有更多内容

加载失败,请刷新页面

加载更多

代理服务器和反向代理服务器之间有什么区别? - What's the difference between proxy server and reverse proxy server?

问题: 代理服务器和反向代理服务器有什么区别? 解决方案: 参考一: https://stackoom.com/question/wRc/代理服务器和反向代理服务器之间有什么区别 参考二: https://oldbug.net/q/wRc/W...

技术盛宴
36分钟前
16
0
第八讲:配置外界可以访问虚拟机里面的HDFS

本节通过配置实现外界访问虚拟机Centos6.4里面的HDFS。为后续的java读写HDFS做准备 步骤有: 1、修改主机Windos7的网络配置 2、修改虚拟机Centos6.4里面的网络配置 3、修改虚拟机Centos6.4里...

刘日辉
54分钟前
26
0
OSChina 周四乱弹 —— 不劳而获的饭好吃么?好吃!非常好吃!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑推荐:《世界上不存在的歌 (2020重唱版)》- 陈奕迅 《世界上不存在的歌 (2020重唱版)》- 陈奕迅 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
今天
31
2
从 GPU、TPU,到 Web 端、移动端,深度学习框架部署训练开始变简单

本文作者:o****0 早些时候的统计显示,今年3月,深度学习框架集中爆发。5月,有人发布可以直接在 iphone11上训练神经网络的开源项目。日前,百度开源国内首个可直接运行在 Web 端的深度学习...

百度开发者中心
昨天
16
0
如何从Git存储库中删除文件? - How can I delete a file from a Git repository?

问题: I have added a file named "file1.txt" to a Git repository. 我已将名为"file1.txt"的文件添加到Git存储库中。 After that, I committed it, added a couple of directories called......

富含淀粉
今天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部