比较react和flex的设计哲学

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

一、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
);

二、状态机：

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" />

三、生命周期：

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

四、数流据：

JSX书中有一章:数流据，其中一节“放在state和props的各是哪些部分”，和咱们写flex项目的要求也是如出一辙。

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

五、数据绑定：

JSX单向数据绑定。flex单向就是默认使用方式，也能够双向。JSX也能够扩展为双向

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

六、开发效率:

天然仍是flex优胜，优胜在开发环境，运行环境和调试环境相对js单纯不少，由于它的各中特性实现都是咱们比较熟悉的方式，界面开发速度很是快

七、诸多不一样:

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

八、论成败:

flex的失败不在设计哲学，一是东主不行，毕竟只是专一设计行业的;二是底层写代码的烂，致使性能差强人意;三固然是东主控制了flash，而没有保证它的优质成长，反而有日落西山之感。而js由于其先后端的通用性，还有很是长的一段路能够走