初識React

依稀記得2015那年參加線下活動，第一次聽說React這個詞語，當時的主講人是郭達峰，他播放了一個關于ember、angular及react的性能對比視頻： React.js Conf 2015。那時我主要從事angularjs開發，深知angular在頁面復雜時性能問題的疼，看到這個視頻的性能對比后瞬間被React折服。現在我們一起再回顧下React~

視圖庫

React不同于AngularJS、Backbone等MVC框架，它是Facebook推出的一個用來構建用戶界面的Javascript庫，只專注于view層（即MVC中的V），是一個用于構建前端可復用UI組件的庫，同時，當數據發生變化時，React會及時有效地更新和渲染相應的組件。對于越來越復雜的前端界面，尤其是對于數據不斷變化的web應用，React實現了將變化的數據高效無誤的反映在頁面上。

視圖狀態機

在傳統Web應用中，當數據改變時需要同步DOM節點的改變，React
把界面看做一個狀態機：

UI = f(states)

當界面狀態發生變化時，React會根據給定的狀態及時有效地更新和渲染相應的組件，相同的狀態其渲染表現一致。

JSX

在傳統的Web應用中采用模板或HTML指令構建用戶界面，但React采用了JSX（一種擴展了ECMAScript的類似XML語法）聲明式的寫法，它優勢超過模板：

• JavaScript是一種靈活的、擴展性高的編程語言

• 統一頁面標記語言和視圖邏輯，使視圖更易于擴展和維護

• 沒有字符串的拼接，將視圖內容融入JavaScript中，減少XSS漏洞的存在

高效更新

當應用狀態發生改變時，React能高效地更新和渲染組件及界面：

• 虛擬DOM：通過Javascript在內存中用輕量級的描述對象表示真實DOM節點的結構和樣式

• 差量算法：高效快速地生成一個最小集的Diff樹

• 批量更新：將狀態的多次更新有效地合并為一次更新操作

React利用虛擬DOM來描述一個真實DOM，當應用狀態發生改變時，通過高效的差量算法生產一個最小集的Diff樹，同時合并多次更新操作為一次，減少了對實際DOM的直接操作，從而大大的提升了性能。

事件代理

React采用了事件代理機制，它能夠保持事件冒泡的一致性，跨瀏覽器的執行，甚至可以在IE8中使用HTML5的事件。React實現了一個“合成事件”層，這個事件層消除了IE與W3C標準實現之間的兼容問題，通過JSX這種方式綁定的事件都是綁定到“合成事件”。“合成事件”會以事件委托的方式綁定到組件最上層，并且在組件卸載的時候自動銷毀綁定的事件。

Flux單向流

Flux是Facebook推出的一種應用架構，他推崇一種單向的數據流動：

NameDescription

Views	視圖層，React組件
Actions	行為動作層，視圖層觸發的動作，例如click event
Dispatcher	分發中心，注冊/接受動作，調用數據流向中的回調函數
Stores	數據層，管理應用狀態，廣播通知Views狀態發生改變

我們一起看下MV*和Flux應用架構下的數據流向關系圖：

MV*

Flux

從上面圖中我們可以看到，Flux單向數據流使應用狀態變得可預測和可追蹤，能夠很方便地達到以下目標：

• 易測試性、可重現性

• 基于時間旅行的診斷調試

• 撤銷與重放功能

isomorphic/universal

React能在服務端中運行，以達到SEO優化、體驗優化和性能優化等目的；同時我們只需學習React一次，就能夠在任何地方編寫，你可以使用它編寫Web、手機、VR等應用。

總結

以上是生活随笔為你收集整理的初识React的全部內容，希望文章能夠幫你解決所遇到的問題。

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