React 初探

levy9527 發布于2019-08-21 12:05 / 1432人閱讀

摘要：各個組件維護自己的狀態和，當狀態變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創建的組件的，是目前極為推薦的創建有狀態組件的方式，最終會取代形式相對于可以更好實現代碼復用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。

目前在前端開發領域，框架Angular、react和vue占據著主流的地位而且可能會持續比較長的一段時間。三門框架中，從數據綁定機制來看，vue和angular采用了雙向數據綁定的MVVM模式，而react虛擬Dom沒有雙向數據綁定機制，需要通過API來實現input的雙向場景。下面主要對react的一些特性和使用進行分析。
一、一切都是組件

1 組件本質
React 的核心思想是：封裝組件。各個組件維護自己的狀態和 UI，當狀態變更，自動重新渲染整個組件。
基于這種方式的一個直觀感受就是我們不再需要不厭其煩地來回查找某個 DOM 元素，然后操作 DOM 去更改 UI。

2 創建組件方式
(1)函數式定義的無狀態組件
function HelloComponent(props, / context /) { return

Hello {props.name}

} ReactDOM.render(, mountNode)
(2)es5原生方式React.createClass定義的組件
React.createClass是react剛開始推薦的創建組件的方式，這是ES5的原生的JavaScript來實現的React組件。
(3)es6形式的extends React.Component定義的組件
React.Component是以ES6的形式來創建react的組件的，是React目前極為推薦的創建有狀態組件的方式，最終會取代React.createClass形式；相對于React.createClass可以更好實現代碼復用。

二、react的生命周期
在react中觸發render的四種方式為：
? 首次渲染Initial Render
? 調用this.setState （并不是一次setState會觸發一次render，React可能會合并操作，再一次性進行render）
? 父組件發生更新（一般就是props發生改變，但是就算props沒有改變或者父子組件之間沒有數據交換也會觸發render）
? 調用this.forceUpdate

三、react虛擬Dom技術
1 傳統的頁面開發，或多或少會牽扯到dom操作，而進行dom操作時，就會有相應的各種優化策略來盡可能地減少頁面重新布局和重繪的次數。
2 比如下面dom批量更新的優化就主要有三種：
1 使用documentFragment進行dom批量更新，然后一次性更新到document上
2 克隆你將要更新的node，在克隆的node上進行dom批量更新，然后克隆的node和原始的node進行交換
3 先隱藏將要更新的node,然后進行dom批量更新，最后重新顯示隱藏的node
傳統的這種手工的批量更新復雜且易錯，而React的虛擬DOM技術讓我們遠離了這種復雜，我們無需再時刻考慮何時以及如何做DOM性能調優。

基于React進行開發時所有的DOM構造都是通過虛擬DOM進行，每當數據變化時，React會產生以下情況：觸發相應組件render方法；重新構建新的虛擬DOM樹；將當前新的虛擬DOM樹和上一次的舊樹進行對比；得到DOM結構的區別，計算出最小變化集，進行實際的瀏覽器DOM更新（批量更新）。
盡管每一次都需要構造完整的虛擬DOM樹，但是因為虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操作的僅僅是Diff部分，因而能達到提高性能的目的。這樣，在保證性能的同時，開發者將不再需要因某個數據的變化而考慮如何更新到一個或多個具體的DOM元素，無需再寫額外的代碼來做性能優化，將之完全交給React類庫來做，而我們只需要關心在相應數據狀態下如何實現相應組件的render方法即可，使得開發簡單。
那么使用了虛擬DOM技術的React性能到底如何呢，到底是徒有虛名還是貨真價實呢，接下來我們來看看React和其他一些流行框架的性能比較。

四、React小結
1 ReactJs是基于組件化的開發，所以最終你的頁面應該是由若干個小組件組成的大組件。
2 可以通過屬性，將值傳遞到組件內部，同理也可以通過屬性將內部的結果傳遞到父級組件(留給大家研究)；要對某些值的變化做DOM操作的，要把這些值放到state中。
3 為組件添加外部css樣式時，類名應該寫成className而不是class;添加內部樣式時，應該是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
4 組件名稱首字母必須大寫。
5 變量名用{}包裹，且不能加雙引號。

GPU云服務器云服務器初探webrtc webrtc技術初探初探騰訊云存儲網關 SQL存儲過程初探

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

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

解讀React源碼(一):初探React源碼

摘要：前言的基本概念組件的構建方法以及高級用法這背后的一切如何運轉深入內部的實現機制和原理初探源碼代碼組織結構包含一系列的工具方法插件包含一系列同構方法包含一些公用或常用方法如等包含一些測試方法等包含一些邊界錯誤的測試用例是代碼的核心部分它包含了前言 React的基本概念,API,組件的構建方法以及高級用法,這背后的一切如何運轉,深入Virtual DOM內部的實現機制和原理. 初探Rea...

Eminjannn 2019-08-20 18:31 評論0 收藏0
React 初探

摘要：各個組件維護自己的狀態和，當狀態變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創建的組件的，是目前極為推薦的創建有狀態組件的方式，最終會取代形式相對于可以更好實現代碼復用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。目前在前端開發領域，框架Angular、react和vue占據著主流的地位而且可能會持續比較長的一段時間。三門框架中，從數據綁定機制來看，vue和an...

trilever 2019-08-01 17:32 評論0 收藏0
react-redux初探理解

摘要：它的作用就是像它的名字那樣，建立一個從外部的對象到組件的對象的映射關系。比如表示從整個的表示當前組件容器的用來建立組件的參數到方法的映射比如表示它定義了哪些用戶的操作應該當作，傳給。最近做的項目加入了react-redux,對react-redux一直沒理解透徹，最近有時間把react-redux梳理了一番，希望能夠幫助到大家，首先有這幾個文件，action,reducer,sag...

ziwenxie 2019-08-22 16:47 評論0 收藏0
初探react技術棧（一）

摘要：相信用的同學也不少找到函數在其中中添加啟用編譯。。。react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or c...

劉玉平 2019-05-23 16:23 評論0 收藏0
初探React技術棧（一）

react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 評論0 收藏0