用React實現移動端單頁應用

項目介紹

具體的業務背景就不用介紹了，這裏只介紹涉及技術方面的東西。

項目背景：項目涉及多個子頁面，而多個子頁面之間存在或多或少的數據傳輸。

技術介紹

• 技術方案
  • 單頁應用
  • 基於 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時我也花了很多時間找坑。對新技術個人態度是保持關注，快速瞭解，但在成熟前持謹慎引入態度。