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

我們一起看下MV*和Flux應用架構下的資料流向關係圖：

MV*

Flux

Flux

變得可預測和可追踪，能夠很方便地達到以下目標：

易測試性、可重現性

基於時間旅行的診斷調試

撤銷與重播功能

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