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?處理路由。

總結

以上是生活随笔為你收集整理的使用 AngularJS 和 ReactJS 的经验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。