1.1　React簡介

前端UI的本質問題是如何將來源于服務器端的動態數據和用戶的交互行為高效地反映到復雜的用戶界面上。React另辟蹊徑，通過引入虛擬DOM、狀態、單向數據流等設計理念，形成以組件為核心，用組件搭建UI的開發模式，理順了UI的開發過程，完美地將數據、組件狀態和UI映射到一起，極大地提高了開發大型Web應用的效率。

React的特點可以歸結為以下4點：

（1）聲明式的視圖層。使用React再也不需要擔心數據、狀態和視圖層交錯縱橫在一起了。React的視圖層是聲明式的，基于視圖狀態聲明視圖形式。但React的視圖層又不同于一般的HTML模板，它采用的是JavaScript（JSX）語法來聲明視圖層，因此可以在視圖層中隨意使用各種狀態數據。

（2）簡單的更新流程。React聲明式的視圖定義方式有助于簡化視圖層的更新流程。你只需要定義UI狀態，React便會負責把它渲染成最終的UI。當狀態數據發生變化時，React也會根據最新的狀態渲染出最新的UI。從狀態到UI這一單向數據流讓React組件的更新流程清晰簡潔。

（3）靈活的渲染實現。React并不是把視圖直接渲染成最終的終端界面，而是先把它們渲染成虛擬DOM。虛擬DOM只是普通的JavaScript對象，你可以結合其他依賴庫把這個對象渲染成不同終端上的UI。例如，使用react-dom在瀏覽器上渲染，使用Node在服務器端渲染，使用React Native在手機上渲染。本書主要以React在瀏覽器上的渲染為例介紹React的使用，但你依然可以很容易地把本書的知識應用到React在其他終端的渲染上。

（4）高效的DOM操作。我們已經知道虛擬DOM是普通的JavaScript對象，正是有了虛擬DOM這一隔離層，我們再也不需要直接操作又笨又慢的真實DOM了。想象一下，操作一個JavaScript對象比直接操作一個真實DOM在效率上有多么巨大的提升。而且，基于React優異的差異比較算法，React可以盡量減少虛擬DOM到真實DOM的渲染次數，以及每次渲染需要改變的真實DOM節點數。

雖然React有這么多強大的特性，但它并不是一個MVC框架。從MVC的分層來看，React相對于V這一層，它關注的是如何根據狀態創建可復用的UI組件，如何根據組件創建可組合的UI。當應用很復雜時，React依然需要結合其他庫（如Redux、MobX等）使用才能發揮最大作用。