使用 AngularJS 和 ReactJS 的經驗

1. React 福音

當咱們的團隊開始尋找一個合適的前端框架的時候，咱們考慮了許多選擇，最後留下兩個選項 —— Angular 和 React。

Angular 是目前爲止最成熟的方案：它擁有一個龐大的社區，你能夠爲大部分應用場景找到合適的第三方模塊。

React 也頗有競爭力，它以 JavaScript 爲中心的設計看起來頗有前途，並且它性能很好。雖然它仍是 Beta 版本，可是 「由Facebook團隊開發的」 這一點給它的競爭力加分。

咱們決定給 React 一個機會，選擇了使用它。

最初使用 React 讓人感受棒極了，咱們能夠用 JavaScript 來作一切：展示一段 HTML，經過遍歷數組渲染一個列表，優雅地改變一個變量的值，而後看着它經過 props 傳播到各處，更新要更新的內容到可複用組件裏，而後一切就緒了，沒有一坨一坨的代碼，只有真正的停下來思考。React 解決了咱們在團隊開發中編寫可維護代碼的訴求。

 

2. React + Flux = ♥

但沿着這條路走下去，咱們發現並非一切都很美好。咱們遇到的第一個大挑戰就曾讓咱們考慮是否應該放棄 React —— 咱們陷入了回調迷宮。

因爲 React 的單向數據流性質，若是子組件須要更新父組件的狀態，父組件就要傳一個回調函數給它。這咋看起來沒有什麼大不了的，然而若是你的組件要更新 root 組件的狀態，你就不得不將 「this.props.updateCallback」 沿着數據流一層一層傳遞下來。

儘管如此，咱們喜歡 React，繼續使用它完成咱們的工做。經過努力，咱們找到了 Flux，它是一種規範化單向數據流的架構思想。它由四個主要元素構成。

• Store: 負責存儲數據和應用狀態。
• Action: 觸發狀態改變。
• Dispatcher: 管理 action 並將它們導向對應的 store。
• View: 展示 store 中的數據，派發 action - 這塊是 React 中已有的。

採用 Flux，咱們就不用將狀態保存在 root 組件中，而後將 update 回調一層層傳遞給它的子組件。React 組件經過 store 直接得到數據，經過調用 action 來改變狀態：這樣簡單、優雅，不會讓你抓狂。Flux 補充了可預測的行爲和一些標準到被 React 框架約束的代碼中。

3. 狂野的 Angular 出場……

……它採用以 HTML 爲中心的代碼且並不超有效。

 

最近，我開始參與一個 Angular 項目。我加入的時候這個項目已經完成了很大一部分了，因此不得不用 Angular，沒有回頭路。做爲一個忠實的 React 開發者，我吐槽 Angular。當我開始寫第一行 Angular 代碼的時候，我就真心詛咒它。這就是所謂的：若是你愛 React，那你就恨 Angular。

我不能自欺欺人，在一開始，我寫 Angular 代碼一點也不開心。將框架定義的屬性（或者，更恰當地說法是 directives）寫入到 HTML 中的作法讓我感受很不爽。我得費很大勁才能實現很簡單的功能，好比改變 URL 的時候不從新加載 controller 或者渲染基礎模板。

當我在表單中遇到一個因爲 ngIf directive 建立一個新的子域而致使的問題時，我處理起來仍是很費勁。還有當我想要從一個準備發送給服務器的 JSON 中移除一些空白字段時，我發現 UI 中對應的數據也被一併移除了 —— 丫的雙向綁定 ╮(╯▽╰)╭。還有當我想要使用 ngShow 和 ngHide 來顯示一個 HTML 塊同時隱藏另外一個 HTML 塊時，在一瞬間，二者同時顯示了。我明白許多問題是我本身的問題，而我想要指出的是，Angular是不可預測的，使用它的時候會趕上各類各樣的坑。

 

固然，Angular 仍是善於處理不少事情的。內建的 HTTP 請求模塊 很是棒，對 promise 的支持也很好。另外一個我沒法吐槽的好東西是：內建的表單控制器，它爲 input 字段提供了默認的格式化、解析和校驗，並且還提供了一個很好的插件用來展現錯誤信息。

使用 Angular 也能讓開發團隊與頁面製做團隊協同工做變得更簡單。在咱們團隊，有專門的頁面重構工程師負責寫 HTML 和 CSS，Angular 能讓咱們的工做無縫對接：重構工程師負責 HTML 和一些額外的標籤，我負責處理邏輯。若是咱們使用的是 React，那麼至少讓重構工程師寫組件會是一個挑戰，要麼得讓他學會寫基本的 JSX，要麼我就只能本身將他寫的 HTML 複製粘貼到 JSX 中。

還記得前面提到的 URL 替換和模板渲染問題嗎？其實不要緊，人們一般使用第三方的路由庫(ui-router)它們比標準的 (ngRoute)要好用。最後，Angular 也沒有我以前認爲的那樣糟糕。以前的大多數抱怨要麼是由於我習慣了 React 思惟，要麼是我還不夠專業。

 

4. 總結: AngularJS 與 ReactJS

React 使用原生 JavaScript 函數讓開發者能夠建立一個有固定生命週期的、單向數據流的可複用組件。React 與 Flux 架構（或者受 Flux 啓發而產生的其餘架構，好比 Redux）相結合，能讓團隊長期維護一個項目變得更加容易，使用它不用擔憂解決一個 bug 會引入更多新 bug。可是，若是你的團隊有專門寫 HTML 和 CSS 的人，React 會帶來額外的學習成本，由於它改變了傳統的開發流程。並且 React 的效果還很是依賴你選擇的組成你的應用的模塊。

另外一方面，Angular 專一於設計簡單的雙向數據綁定，當你改變 controller scope 中的內容，變化將會被自動地同步到UI（效果如同魔法般）。它自認爲節省了配置的時間，開發者不用像傳統開發模式那樣考慮用各類設計模式組織代碼而後從上百種可選的方案中選出一個核心模塊。使用雙向綁定爲開發帶來了便利，然而它也容易在長期維護的過程當中因爲修改部分代碼而產生不可預期的 bug，尤爲是那些在過去的幾個月中沒有再動過的代碼。

那麼，我從頭開始建立 app 的首選方案是什麼呢？

從長遠而言，我我的傾向於選擇 React，使用 Redux 架構，使用 Axios 支持 promise-ready 的 HTTP 請求，以及使用 react-router 處理路由。