資訊專欄INFORMATION COLUMN
摘要：初識依稀記得那年參加線下活動，第一次聽說這個詞語，當(dāng)時的主講人是郭達峰，他播放了一個關(guān)于及的性能對比視頻。合成事件會以事件委托的方式綁定到組件最上層，并且在組件卸載的時候自動銷毀綁定的事件。
初識React
依稀記得2015那年參加線下活動，第一次聽說React這個詞語，當(dāng)時的主講人是郭達峰，他播放了一個關(guān)于ember、angular及react的性能對比視頻： React.js Conf 2015。那時我主要從事angularjs開發(fā)，深知angular在頁面復(fù)雜時性能問題的疼，看到這個視頻的性能對比后瞬間被React折服。現(xiàn)在我們一起再回顧下React~
視圖庫React不同于AngularJS、Backbone等MVC框架，它是Facebook推出的一個用來構(gòu)建用戶界面的Javascript庫，只專注于view層（即MVC中的V），是一個用于構(gòu)建前端可復(fù)用UI組件的庫，同時，當(dāng)數(shù)據(jù)發(fā)生變化時，React會及時有效地更新和渲染相應(yīng)的組件。對于越來越復(fù)雜的前端界面，尤其是對于數(shù)據(jù)不斷變化的web應(yīng)用，React實現(xiàn)了將變化的數(shù)據(jù)高效無誤的反映在頁面上。
視圖狀態(tài)機在傳統(tǒng)Web應(yīng)用中，當(dāng)數(shù)據(jù)改變時需要同步DOM節(jié)點的改變，React
把界面看做一個狀態(tài)機：
UI = f(states)
當(dāng)界面狀態(tài)發(fā)生變化時，React會根據(jù)給定的狀態(tài)及時有效地更新和渲染相應(yīng)的組件，相同的狀態(tài)其渲染表現(xiàn)一致。
JSX在傳統(tǒng)的Web應(yīng)用中采用模板或HTML指令構(gòu)建用戶界面，但React采用了JSX（一種擴展了ECMAScript的類似XML語法）聲明式的寫法，它優(yōu)勢超過模板：
JavaScript是一種靈活的、擴展性高的編程語言
統(tǒng)一頁面標(biāo)記語言和視圖邏輯，使視圖更易于擴展和維護
沒有字符串的拼接，將視圖內(nèi)容融入JavaScript中，減少XSS漏洞的存在
高效更新當(dāng)應(yīng)用狀態(tài)發(fā)生改變時，React能高效地更新和渲染組件及界面：
虛擬DOM：通過Javascript在內(nèi)存中用輕量級的描述對象表示真實DOM節(jié)點的結(jié)構(gòu)和樣式
差量算法：高效快速地生成一個最小集的Diff樹
批量更新：將狀態(tài)的多次更新有效地合并為一次更新操作
React利用虛擬DOM來描述一個真實DOM，當(dāng)應(yīng)用狀態(tài)發(fā)生改變時，通過高效的差量算法生產(chǎn)一個最小集的Diff樹，同時合并多次更新操作為一次，減少了對實際DOM的直接操作，從而大大的提升了性能。
事件代理React采用了事件代理機制，它能夠保持事件冒泡的一致性，跨瀏覽器的執(zhí)行，甚至可以在IE8中使用HTML5的事件。React實現(xiàn)了一個“合成事件”層，這個事件層消除了IE與W3C標(biāo)準(zhǔn)實現(xiàn)之間的兼容問題，通過JSX這種方式綁定的事件都是綁定到“合成事件”。“合成事件”會以事件委托的方式綁定到組件最上層，并且在組件卸載的時候自動銷毀綁定的事件。
Flux單向流Flux是Facebook推出的一種應(yīng)用架構(gòu)，他推崇一種單向的數(shù)據(jù)流動：
| Name | Description |
|---|---|
| Views | 視圖層，React組件 |
| Actions | 行為動作層，視圖層觸發(fā)的動作，例如click event |
| Dispatcher | 分發(fā)中心，注冊/接受動作，調(diào)用數(shù)據(jù)流向中的回調(diào)函數(shù) |
| Stores | 數(shù)據(jù)層，管理應(yīng)用狀態(tài)，廣播通知Views狀態(tài)發(fā)生改變 |
我們一起看下MV*和Flux應(yīng)用架構(gòu)下的數(shù)據(jù)流向關(guān)系圖：
MV*
Flux
從上面圖中我們可以看到，F(xiàn)lux單向數(shù)據(jù)流使應(yīng)用狀態(tài)變得可預(yù)測和可追蹤，能夠很方便地達到以下目標(biāo)：
易測試性、可重現(xiàn)性
基于時間旅行的診斷調(diào)試
撤銷與重放功能
isomorphic/universalReact能在服務(wù)端中運行，以達到SEO優(yōu)化、體驗優(yōu)化和性能優(yōu)化等目的；同時我們只需學(xué)習(xí)React一次，就能夠在任何地方編寫，你可以使用它編寫Web、手機、VR等應(yīng)用。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88033.html
摘要：系列一初識系列二組件的和系列三組件的生命周期是推出的一個庫，它的口號就是用來創(chuàng)建用戶界面的庫，所以它只是和用戶界面打交道，可以把它看成中的視圖層。系列一初識系列二組件的和系列三組件的生命周期 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 showImg(https://...
摘要：屬性其實就是為了獲取節(jié)點，例如屬性利用屬性返回的回調(diào)函數(shù)獲取節(jié)點，從而讓頁面渲染完成之后，聚焦，除了可以綁定回調(diào)函數(shù)之外還能綁定字符串，但是在后期對字符串形式不再維護，這里就不具體說明了，就用回調(diào)函數(shù)獲取。 ref屬性其實就是為了獲取DOM節(jié)點，例如： import React from react class RefComponent extends React.Component...
摘要：父級向子級傳參父子組件通信主要用到，如下在父組件中父組件我是父級過來的內(nèi)容在子組件中子組件通過上面例子可以看出，在父組件中，我們引入子組件，通過給子組件添加屬性，來起到傳參的作用，子組件可以通過獲取父組件傳過來的參數(shù)子級向父級傳參在父組件中 父級向子級傳參 父子組件通信主要用到props，如下： 在父組件中： import React from react import ChildCo...
摘要：是中用來對參數(shù)進行類型檢測的，當(dāng)然要使用這個插件，得先安裝這個插件，如下但是如果你是直接用創(chuàng)建的項目，無需安裝，直接引入即可，如下上面那個例子中可以看出，要引入組件，必須得傳入?yún)?shù)類型為字符串的參數(shù)，否則會報錯常用的數(shù)據(jù)類型檢測如下 propTypes是react中用來對參數(shù)進行類型檢測的，當(dāng)然要使用這個插件，得先安裝這個插件，如下： npm install prop-types --...
摘要：也明確了大數(shù)據(jù)時代，前端所應(yīng)該具備的職業(yè)素養(yǎng)高階組件高階組件，高階組件就是一個組件包裹著另外一個組件中兩種的實現(xiàn)方法中兩種的實現(xiàn)方法返回的類繼承了。之所以被稱為是因為被繼承了，而不是繼承了。在這種方式中，它們的關(guān)系看上去被反轉(zhuǎn)了。 前言 最近一直再做數(shù)據(jù)可視化，業(yè)務(wù)的理解，數(shù)據(jù)的理解確實如數(shù)據(jù)可視化要求的一樣，有了更多的理解。但是技術(shù)上還停留在echart，Hchart, 畫圖上。正好...
閱讀 1784·2023-04-25 15:51
閱讀 2497·2021-10-13 09:40
閱讀 2134·2021-09-23 11:22
閱讀 3244·2019-08-30 14:16
閱讀 2652·2019-08-26 13:35
閱讀 1847·2019-08-26 13:31
閱讀 874·2019-08-26 11:39
閱讀 2732·2019-08-26 10:33
