比较react和flex的设计哲学

前两天收到了《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因为其前后端的通用性,还有非常长的一段路可以走

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...