前端架構二: React 之概覽（二）

標籤：結構   合并   資料   架構   action   訊息   jpg   ret   實現   

 

一、React組件

1、父子組件

React 中通過組合而不是繼承來組織應用。一個應用中從一個組件啟動，並在這個組件中建立其他組件，所有的組件最終形成一顆樹狀結構。

我們依然有父組件和子組件的稱呼，不過他們不是繼承關係，而是父組件建立了子組件的關係。

這樣就涉及到一個重要的問題就是：父子組件的通訊問題。

在不藉助其他架構的情況下，React 中父子組件是這麼通訊的：

父組件通過在建立子組件的時候設定 props 來傳遞資料

子組件通過調用父組件在 props 中設定的回呼函數來向父組件傳遞訊息

也就是說，有父子關係的組件其實完全通過 props 屬性來通訊。那麼沒有父子關係的怎麼辦？ 官方建議通過 全域的事件系統來通訊。

2、mixins

上面說過 React 中的組件不是繼承的，而只是誰建立了誰的關係，那麼我們一些公用的邏輯應該怎麼處理呢。公用的邏輯應該通過 mixins 來實現。

mixin，可以非常簡單的理解，他就是把 一個 mixin 對象上的方法都混合到了另一個組件上，和 $.extend 方法做的事情類似。

不過，react對mixin做了一些特殊處理。

在mixin中寫的生命週期相關的回調都會被合并，也就是他們都會執行，而不會互相覆蓋掉。 
    比如：你在mixin中可以定義 componentDidMount 來初始化組件，他不會覆蓋掉使用這個mixin的組件。實際執行的時候，會先執行 mixin 的 componentDidMount ，最後動作項目的 componentDidMount 方法。

需要注意的是，因為mixin的作用是抽離公用功能，不存在渲染dom的需要，所以它沒有render方法。如果你定義了render方法，那麼他會和組件的render方法衝突而報錯。 
    同樣，mixin不應該汙染state，所以他也沒有 setState 方法。mixin應該只提供介面（即方法），不應該提供任何屬性。mixin內部的屬性最好是通過閉包的形式作為私人變數存在。就像下面這樣：

var Timer = function() {

 var t = 1;//私人屬性

 return {//xxxx}

}

最好不要放到this上，避免汙染。 
當然，如果你真的在this上寫了一些變數，那麼react也會進行mixin，因為react並不會區分你的屬性到底是不是函數。

二、MVC 架構 flux 和 reflux

因為 React 其實只是 View，所以如果組織大型的應用的話因為缺少資料層會非常難以解耦。React 官方出了一個架構叫flux。嚴格說 flux 是一個MVC的規範，而不是一個架構，基於 flux 規範完全可以自己去實現而不需要用 flux 庫。

有了flux 之後我們就可以把 View 和 Model 完全分開了。View 就是 React 組件，而 Model 是flux 中的 store。

Store 就是一個儲存資料的對象，它會在 dispatch上註冊自己感興趣的事件。

Dispatcher 是flux提供的一個全域的事件分發器，而 action 其實就是自訂的事件而已。

當發生某些事件的時候，比如使用者點擊了一個按鈕，這個時候View 並不會直接去修改 store ，而是觸發一個 action。這個Action 通過 dispatch 進行分發，store已經對自己感興趣的事件註冊過，所以他可以收到這個事件，並更新資料，最終反映到視圖上的更新。

所以說白了 flux 只是定義了一個規範而已，它的庫特別小，因為其實他就提供了一個全域 Dispatcher 的預設實現。至於 store 要怎麼寫完全是自己決定的，只要能存資料並且在Dispatcher上註冊監聽就行了。

大家可以諮詢這個號：858568103，或者掃描下方二維碼，裡面有資料，可以協助大家解決一些問題。

 

 

 

前端架構二: React 之概覽（二）