React 回憶錄（二）爲何使用 React？

Hi 各位，歡迎來到 React 回憶錄！👋 在本章中，我將介紹 React 框架的五大特色：虛擬DOM，組件化，聲明式代碼，單向數據流和純粹的JavaScript語法。但在介紹這五大特色以前，讓咱們先簡要說明一下 React 出現的時代背景。

01. React 出現的時代背景

世界上的事情都有因纔有果，一個框架的出現也必然離不開特定的時代背景。而對於 React 而言，不得不提的時代背景主要有這麼兩條：

1. 大量業務邏輯由後端實現改成前端實現：AJAX技術的出現促令人們追求更流暢的Web交互體驗，使得大量複雜的業務邏輯從後端開發改成由前端開發實現，這使得前端代碼量呈幾何式增長，量變引發質變，如何組織管理這種量級的前端代碼？如何更好的提高應用性能？借鑑幾十年來後端開發的經驗，絕不意外，答案是使用大型前端框架。
2. 對於邏輯複雜的SPA應用，原有前端框架性能不佳：在 React 問世以前，已經有 backbone.js 與 Angular.js 等成熟的大型前端框架了，然而 Facebook 的工程師們發現，在面對複雜的業務場景（例如：頻繁操做DOM）時，這些框架都沒法帶來良好的頁面性能，因而他們打算着手本身開發一個框架解決這一問題，所開發出的框架便是 React，而對於這一問題的解決方案則是：使用虛擬 DOM。

02. 虛擬 DOM

虛擬 DOM 的思想其實並不難理解：咱們知道頻繁的 DOM 操做會致使瀏覽器對 DOM 樹進行大量計算，這是前端最重要的性能瓶頸。所以，只要咱們可以合併屢次的 DOM 操做，而後「畢其功於一役」，適時的，一次性的對 DOM 樹集中進行一次操做，就能夠大大提高前端性能。

對於 React 而言，實現這一思路的方案便是使用 虛擬 DOM。咱們所謂的 DOM 樹其實就是一個樹狀結構嵌套的 JavaScript 對象。而在瀏覽器中，DOM 樹的改動會形成瀏覽器一系列的計算，所以咱們能夠基於現有的 DOM 樹結構，克隆出一份如出一轍的 DOM 樹，即「虛擬 DOM 」，將全部的改動都實如今這棵虛擬 DOM 上，而後統一合併至瀏覽器中的 DOM 樹中以解決以前所提到的性能瓶頸。

雖然理解起來不難，但在這個過程當中其實牽扯到不少複雜的狀況以及一些算法上的難點，足夠開一篇新的文章講解，在這裏就先點到爲止，就此不表了。

03. 什麼是組件化？

組件化是一種代碼設計模式，它表現爲你可以將一些簡單的函數構建爲一個更加複雜的函數加以使用。

組件化有兩個顯著的特色：

1. 封裝：一個組件所需的數據封裝於組件內部；
2. 組合：一個組件能夠與其餘組件經過組合的方式實現更加複雜的業務邏輯；

而 React 最棒的一點就在於在 React 中一切 UI 元素皆是組件，而組件又只是一個 JavaScript 函數。可是相較於傳統函數接收一些參數並返回一個值的模式而言，React 函數將會接收一些參數，返回界面中的 UI 元素。

正如一個好的函數應該符合「DOT」（Do One Thing）原則，一個好的 React 組件也不能混雜其餘組件的業務邏輯，咱們應該儘可能讓 React 組件保持簡單，從而讓複雜的 React 組件的內部邏輯變得清晰。

下面這個公式能夠很好的表達在 React 中「視圖是對數據的渲染」的組件化思想：

UI = render(data)
複製代碼

這樣一來，在 React 中，構成複雜視圖的方式就變得很簡單：組合組件；

04. 聲明式代碼

聲明式代碼指的是：讓開發者按照「我要作什麼」，而不是「我要讓計算機作什麼」去思考如何實現業務需求。

讓咱們簡單比較一下「聲明式代碼」與「命令式代碼」的不一樣：

• 命令式代碼： 感覺到天氣太熱，編寫代碼： 1. 拿起空調遙控器； 2. 打開空調； 3. 設置溫度爲 27 攝氏度；
• 聲明式代碼： 感覺到天氣太熱，編寫代碼： 1. 調用「開空調(27)」函數；

看起來，聲明式代碼不過是對封裝了的命令式代碼進行調用，但本質上，這是一種更棒的編程思惟，它可以讓咱們再也不僅僅着眼於如何經過代碼實現功能，而是更多的思考爲了實現業務邏輯，代碼須要哪些功能（函數），對功能的設計，和功能之間的關係的思考，讓咱們的代碼邏輯更加清晰，富有秩序。

05. 單向數據流

在 React 中，數據的組織形式是樹狀的，由上至下單向流動（對應DOM樹），之因此這樣設計，是由於：數據流更清晰，組件的狀態就更可控；

對於業務邏輯複雜的單頁面應用而言，前端所承接的數據量很大，數據之間的關係也錯綜複雜，再加上 React 採用組件式開發，不一樣 UI 根據不一樣數據產生變化，若是沒有一個清晰，合理的數據流管理方式，最後的代碼只能是一團糟，一旦 UI 或數據出現錯誤將很難排查出錯源到底在哪。

有鑑於此，React 使用「單向數據流」的方式，只容許數據從父元素流至子元素。

React 單向數據流的機制大體以下：數據被存儲在父級組件上，而且向下流動至子組件。雖然數據存儲在父級組件上，可是父級與子級的組件均可以使用這個數據。可是，若是數據須要更新，那麼只有父級組件應該去更新，若是子組件須要修改數據，他也只能經過發送更新的數據給父級組件，那裏纔是數據被真正更新的地方。一旦數據被父級組件更新了，子級組件將會接收到新的數據。

單向數據流雖然聽起來增長了額外的工做量，可是卻使開發者更容易搞清楚應用是如何工做的。

06. 純粹的JavaScript語法

咱們很容易就忽視 React 的這一特色，即在 React 中，沒有任何特殊的專有的 React 語法須要理解和記憶，全部的組件，數據操做，業務邏輯都是經過使用 JavaScript 語法實現的。

這意味着你想要使用 React 只需理解 React 的思想和幾個關鍵的 API 就能夠當即開始使用 React 進行復雜應用的開發。而且 React 還鼓勵你使用函數式編程思想進行開發，你能夠在 React 開發中，使用你的任何函數式編程技巧。

07. 小結

到這裏，《React 回憶錄》第二章的部分就結束了，在本章中咱們先談到了 React 框架產生的時代背景，接着解釋了 React 的五大特色：

1. 虛擬 DOM；
2. 組件化；
3. 聲明式代碼；
4. 單向數據流；
5. 純粹的 JavaScript 語法；

但願各位有所收穫，若是有任何問題或建議，也歡迎各位在評論區內留言，下一章見 🙌

---

PS：🔊若是你對該專題感興趣，別忘了訂閱本專欄，確保及時收到更新通知。記得點擊下方👇的各個按鈕，讓我知道你承認個人付出，這是激勵我持續產出的動力和源泉 😎。

下個章節見 🎉 🙌 👋！