選擇前端開發(fā)的最佳選項(xiàng)
React.js 與 Angular。他們同樣擅長構(gòu)建基于 Web 的應(yīng)用程序。世界上的一些項(xiàng)目是用 React.js 構(gòu)建的，其他相同大小的項(xiàng)目是用 Angular 構(gòu)建的。
這些強(qiáng)調(diào) React.js 和 Angular 的例子適合制作大型和可擴(kuò)展的平臺(tái)，每時(shí)每刻處理大量請(qǐng)求。
當(dāng)前流行度統(tǒng)計(jì)
React.js 在 GitHub 上的 Node Package Manager (NPM) 下載量位居榜首并超過 Angular。差別是巨大的。
去年對(duì) Stackoverflow 用戶的調(diào)查表明 React.js 比 Angular 受歡迎 10%。
這是否意味著 Angular 出現(xiàn)了問題？或者，這是否意味著 React.js 提供了比 Angular 更好的解決方案？
Angular 的主要原理
讓我們通過簡要概述這兩個(gè)系統(tǒng)來弄清楚。Angular 起源于谷歌的初創(chuàng)產(chǎn)品，其中產(chǎn)品開發(fā)的關(guān)鍵是在一個(gè)地方管理多個(gè)進(jìn)程。任何不合理的決定都可能導(dǎo)致問題并影響瞬間運(yùn)行的數(shù)十億用戶操作。
Angular 成為一個(gè)預(yù)定義編程步驟的整體框架。盡管它通過服務(wù)、控制器和模塊豐富了開發(fā)過程，但它決定了自己的思維和工作方式。這在程序員和框架之間產(chǎn)生了距離。
除此之外，還有一些其他因素使 Angular 難以訪問：
- Angular 使用面向?qū)ο缶幊蹋∣OP），所以它的知識(shí)是硬技能。
- 開發(fā)人員應(yīng)該很好地掌握 TypeScript。
- RxJS 的知識(shí)也是必備的。
顯然，學(xué)習(xí)曲線非常高。與 React.js 不同，Angular 需要開發(fā)人員有更多的 OOP 相關(guān)經(jīng)驗(yàn)。考慮到他們團(tuán)隊(duì)的高專業(yè)知識(shí)，這對(duì) Google 很有效。Angular 被設(shè)想為一種端到端的解決方案，并且與他們先進(jìn)的編程文化兼容。
盡管架構(gòu)復(fù)雜，但 Angular 有其無可爭(zhēng)議的好處：
- 雙向數(shù)據(jù)綁定自動(dòng)同步模型和視圖。比如說，如果數(shù)據(jù)在模型中改變了，它會(huì)在視圖（DOM）中自動(dòng)改變。這樣的功能不需要編寫更多額外的代碼。想象一下 Google Drive 的文檔，當(dāng)用戶在文檔中鍵入文本時(shí)，另一個(gè)用戶會(huì)實(shí)時(shí)查看它。由于雙向數(shù)據(jù)綁定，這樣的功能是可能的。
- 依賴注入 (DI)，可以將依賴從一個(gè)類傳遞到另一個(gè)類。由于 DI，服務(wù)器端服務(wù)可以委托給客戶端。因此，這是在 Angular 中使用 OOP 的一個(gè)重要優(yōu)勢(shì)。
- 指令旨在通過為其提供新語法來豐富 HTML。最常見的指令是組件。使用它，程序員可以為現(xiàn)有元素創(chuàng)建任何屬性并更改其行為。這是一個(gè)很有用的特性，它使得使用 DOM 非常靈活。
Angular 豐富了許多其他有價(jià)值的功能，比如 UI Material，使得在項(xiàng)目的其他部分重用組件代碼成為可能，但這也類似于 React 提供的功能。
今天誰選擇了 Angular？
經(jīng)驗(yàn)豐富的前端開發(fā)人員分享說，當(dāng) React.js 是早期初創(chuàng)公司和小公司的更好選擇時(shí)，Angular 非常適合企業(yè)解決方案和企業(yè)部門。這可以解釋為，大企業(yè)不會(huì)經(jīng)常改變他們的優(yōu)先事項(xiàng)，而且他們的 CTO 更早知道戰(zhàn)略目標(biāo)。
您可以從我們的概述中獲得的要點(diǎn)是記住，對(duì)于需要可靠性高于一切的長期項(xiàng)目，Angular 是更好的選擇。除了列表中提到的其他公司之外，還有一些公司正在使用 Angular：Microsoft Office、德意志銀行和三星。
React.js 甚至不稱自己為框架，而是一個(gè) JS 庫。與 Angular 不同，React.js 將設(shè)置項(xiàng)目結(jié)構(gòu)、為 HTTP 路由尋找相關(guān)服務(wù)等成為開發(fā)人員的責(zé)任。在這一點(diǎn)上，React 的思想是敏捷的，為開發(fā)者提供絕對(duì)的自由。因此，它從一開始就最小化了項(xiàng)目的大小，因?yàn)樗鼈兛赡軙?huì)涉及到他們?cè)谀硞€(gè)時(shí)間需要的那些庫。
假設(shè)您是項(xiàng)目中唯一的前端開發(fā)人員，或者只有幾個(gè)。這里的主要目標(biāo)是為最短的視角設(shè)定的。你應(yīng)該既快速又高效，能夠適應(yīng)創(chuàng)業(yè)目標(biāo)。Angular 的直接規(guī)則和架構(gòu)要求會(huì)減慢開發(fā)過程。
因此，遵循單一策略并不是 React.js 社區(qū)的主要優(yōu)先事項(xiàng)。事實(shí)上，這與 Angular 正好相反。
值得一提的是，React.js 不能單獨(dú)工作，因?yàn)樗皇且晥D（V），需要一個(gè)引擎進(jìn)行數(shù)據(jù)處理。開發(fā)人員需要弄清楚它的實(shí)現(xiàn)，使用 Redux 和 Saga 進(jìn)行管理，并單獨(dú)安排。
是什么讓 React.js 與眾不同？
- 學(xué)習(xí)曲線很低。具有 HTML 和 JavaScript 經(jīng)驗(yàn)的開發(fā)人員可以進(jìn)行 Web 開發(fā)并很快展示他們的第一個(gè)成果。
- 架構(gòu)很簡單，不需要花太多時(shí)間來研究它的所有結(jié)構(gòu)。
- 虛擬 DOM 減少了服務(wù)器端渲染的時(shí)間。
- 巨大的社區(qū)支持，定期為 React.js 集合做出貢獻(xiàn)。
- 直觀的環(huán)境，令人愉快的界面。
虛擬DOM解決了什么問題？
當(dāng)前的情況是：如果用戶瀏覽器在單擊頁面時(shí)發(fā)生了任何更改，這些更改將自動(dòng)記錄到 DOM 中。要在網(wǎng)頁上顯示更改，瀏覽器應(yīng)重新加載整個(gè) DOM 結(jié)構(gòu)。它會(huì)給瀏覽器帶來更多的負(fù)載并降低應(yīng)用程序的性能。
React.js 在性能方面的創(chuàng)新
- React.js 創(chuàng)建 DOM 的快照，稱為虛擬 DOM (VDOM)。
- UI 組件中的每一個(gè)新變化都要首先記錄到新的虛擬 DOM 中，而不是常規(guī)的。
- React.js 比較新版本的 VDOM，并確定這些更改是否對(duì)更新瀏覽器的 DOM 至關(guān)重要。
- 如果更改是必不可少的，React.js 會(huì)使用最新的更改部分更新 DOM。
React.js 有這樣的計(jì)算算法，允許它決定何時(shí)更新瀏覽器中的 DOM。這使得前端應(yīng)用程序非常具有性能。不幸的是，Angular 沒有任何與此功能類似的功能。
話雖如此，當(dāng) Angular 用許多擴(kuò)展補(bǔ)充 HTML 時(shí)，React.js 有助于為項(xiàng)目編寫干凈的 JavaScript 代碼。這會(huì)在一段時(shí)間內(nèi)變得混亂，并且很難處理這樣一個(gè)擴(kuò)大的代碼。
是時(shí)候說：React.js 在當(dāng)今前端開發(fā)領(lǐng)域占據(jù)主導(dǎo)地位。
先進(jìn)的特性、易用性、廣泛的 JavaScript 庫集合使 React.js 處于比 Angular 更高的位置。這證明了以用戶為中心的方法是王道的想法。React.js 已成為制作前端應(yīng)用程序的直觀而強(qiáng)大的資源。
由于 React.js 的勝利，諸如“Angular vs. React”之類的討論顯然即將結(jié)束。如今，社區(qū)對(duì) Vue.js 等其他框架非常感興趣，這種比較在今天會(huì)更加實(shí)際。
