初識React

初識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推出的一種應用架構，他推崇一種單向的數據流動：

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

咱們一塊兒看下MV*和Flux應用架構下的數據流向關係圖：

MV*

Flux

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

• 易測試性、可重現性

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

• 撤銷與重放功能

isomorphic/universal

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