初識React

kuangcaibao 發布于2019-08-21 14:47 / 492人閱讀

摘要：初識依稀記得那年參加線下活動，第一次聽說這個詞語，當時的主講人是郭達峰，他播放了一個關于及的性能對比視頻。合成事件會以事件委托的方式綁定到組件最上層，并且在組件卸載的時候自動銷毀綁定的事件。

初識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等應用。

云服務器 GPU云服務器 docker初識初識關系數據庫 react _React

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88033.html

React系列---React（一）初識React

摘要：系列一初識系列二組件的和系列三組件的生命周期是推出的一個庫，它的口號就是用來創建用戶界面的庫，所以它只是和用戶界面打交道，可以把它看成中的視圖層。系列一初識系列二組件的和系列三組件的生命周期 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 showImg(https://...

lanffy 2019-08-20 17:27 評論0 收藏0
初識React(4)：ref屬性

摘要：屬性其實就是為了獲取節點，例如屬性利用屬性返回的回調函數獲取節點，從而讓頁面渲染完成之后，聚焦，除了可以綁定回調函數之外還能綁定字符串，但是在后期對字符串形式不再維護，這里就不具體說明了，就用回調函數獲取。 ref屬性其實就是為了獲取DOM節點，例如： import React from react class RefComponent extends React.Component...

curried 2019-08-23 11:28 評論0 收藏0
初識React(8)：父子組件傳參

摘要：父級向子級傳參父子組件通信主要用到，如下在父組件中父組件我是父級過來的內容在子組件中子組件通過上面例子可以看出，在父組件中，我們引入子組件，通過給子組件添加屬性，來起到傳參的作用，子組件可以通過獲取父組件傳過來的參數子級向父級傳參在父組件中父級向子級傳參父子組件通信主要用到props，如下：在父組件中： import React from react import ChildCo...

paulli3 2019-08-23 11:48 評論0 收藏0
初識React(6)：propTypes類型檢測

摘要：是中用來對參數進行類型檢測的，當然要使用這個插件，得先安裝這個插件，如下但是如果你是直接用創建的項目，無需安裝，直接引入即可，如下上面那個例子中可以看出，要引入組件，必須得傳入參數類型為字符串的參數，否則會報錯常用的數據類型檢測如下 propTypes是react中用來對參數進行類型檢測的，當然要使用這個插件，得先安裝這個插件，如下： npm install prop-types --...

Brenner 2019-08-23 11:33 評論0 收藏0
初識react高階組件

摘要：也明確了大數據時代，前端所應該具備的職業素養高階組件高階組件，高階組件就是一個組件包裹著另外一個組件中兩種的實現方法中兩種的實現方法返回的類繼承了。之所以被稱為是因為被繼承了，而不是繼承了。在這種方式中，它們的關系看上去被反轉了。前言最近一直再做數據可視化，業務的理解，數據的理解確實如數據可視化要求的一樣，有了更多的理解。但是技術上還停留在echart，Hchart, 畫圖上。正好...

IamDLY 2019-08-22 16:15 評論0 收藏0