項目介紹
具體的業務背景就不用介紹了，這里只介紹涉及技術方面的東西。
項目背景：項目涉及多個子頁面，而多個子頁面之間存在或多或少的數據傳輸。
技術介紹
- 技術方案
- 單頁應用
- 基於 React
- 技術方案理由
-
單頁應用
單頁：可以很方便地在一個頁面生命周期內控制子頁面之間的數據傳輸。
非單頁：子頁面之間的交互，在兼容性面前，更多會考慮URL傳輸。而這種方式面對某個需要其他子頁面數據來填充自身表單的子頁面來說，就不是一個好辦法，因為數據量很可能很大，讓URL很長。
綜上，選擇單頁方式實現。
-
基於React
-
新開發方式的嘗試
如果是傳統方式開發也未嘗不可，前端新東西層出不窮，很多人把react捧得很高，但我之前對它也僅僅是聽眾的角色，“紙上得來終覺淺，絕知此事要躬行”。
我得試試，感受一下。
-
組件化開發
這個方案對於開發單頁應用來說很直觀，只需將各個子頁面當做一個組件，再拆分更細的組件即可。
省了不少勁啊。
-
虛擬DOM
內網上有人說過，很多問題都可以通過引入第三方的方式解決。而React的虛擬DOM就是被引入了一個介於數據和真實DOM之間的第三方，做
diff等操作，進而減少對DOM的全部重繪幾率。對於其性能我並沒有看中太多，頁面沒有達到必須通過虛擬DOM來提高性能的程度。
這種引入“第三方”的思想是我比較中意的。
-
-
技術點
-
多個子頁面之間的數據交互
-
實現方案
引入
Redux組件，並統一存儲所有頁面數據(store.js)。 -
理由
不引入
Redux的話，只能依賴React的默認數據傳輸路徑：parent-->child只能通過props傳輸。如果有A組件和B組件，二者內部的子組件想要通信就很困難（還是可以通過全局事件實現的，但略丑陋）。
利用
Redux，就可以通過“A組件（及子組件）監聽數據變化事件和B組件（及子組件）觸發數據變化事件”的方式進行數據傳輸。
-
-
UI即時反應數據的變化
React本身即支持數據變化即時同步到UI(setState)。案例：口碑地圖選址
移動地圖獲得推薦地址后，數據變化及時同步到UI上。
-
前端路由（子頁面之間跳轉）
用組件定義子頁面的一個好處，就是子頁面之間的跳轉變得尤其方便。想從A頁面跳到B頁面，用：
ReactDom.render(<A/>, dom)變為ReactDom.render(<B />, dom)即可。個人覺得比非React方式的display:none;或者銷毀制，在開發上要方便一些。 -
性能優化
個人經驗，在性能優化的目標上，我也是針對的各個組件進行優化，比如銷毀組件（
componentWillUnmount）前做一些銷毀數據等性能優化的動作。積少成多，把每一個盒子（組件）優化好了，總體性能不至於太差。
一些感想
使用新技術是有試錯成本的，包括時間成本。在用React時我也花了不少時間找坑。對新技術我的態度是保持關注，快速了解，但在成熟前持謹慎引入態度。