Hi 各位，歡迎來到 React 回憶錄！? 在本章中，我將介紹 React 框架的五大特點：虛擬DOM，元件化，宣告式程式碼，單向資料流和純粹的JavaScript語法。但在介紹這五大特點之前，讓我們先簡要說明一下 React 出現的時代背景。
01. React 出現的時代背景
世界上的事情都有因才有果，一個框架的出現也必然離不開特定的時代背景。而對於 React 而言，不得不提的時代背景主要有這麼兩條：
- 大量業務邏輯由後端實現改為前端實現：AJAX技術的出現促使人們追求更流暢的Web互動體驗，使得大量複雜的業務邏輯從後端開發改為由前端開發實現，這使得前端程式碼量呈幾何式增加，量變引起質變，如何組織管理這種量級的前端程式碼？如何更好的提升應用效能？借鑑幾十年來後端開發的經驗，毫不意外，答案是使用大型前端框架。
- 對於邏輯複雜的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. 什麼是元件化？
元件化是一種程式碼設計模式，它表現為你能夠將一些簡單的函式構建為一個更加複雜的函式加以使用。
元件化有兩個顯著的特點：
- 封裝：一個元件所需的資料封裝於元件內部；
- 組合：一個元件可以與其他元件通過組合的方式實現更加複雜的業務邏輯；
而 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 的五大特點：
- 虛擬 DOM；
- 元件化；
- 宣告式程式碼；
- 單向資料流；
- 純粹的 JavaScript 語法；
希望各位有所收穫，如果有任何問題或建議，也歡迎各位在評論區內留言，下一章見 ?
PS：?如果你對該專題感興趣，別忘了訂閱本專欄，確保及時收到更新通知。記得點選下方?的各個按鈕，讓我知道你認可我的付出，這是激勵我持續產出的動力和源泉 ?。
下個章節見 ? ? ?！