比較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由於其先後端的通用性，還有很是長的一段路能夠走