資訊專欄INFORMATION COLUMN
摘要：各個組件維護(hù)自己的狀態(tài)和，當(dāng)狀態(tài)變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創(chuàng)建的組件的，是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會取代形式相對于可以更好實現(xiàn)代碼復(fù)用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。
目前在前端開發(fā)領(lǐng)域，框架Angular、react和vue占據(jù)著主流的地位而且可能會持續(xù)比較長的一段時間。三門框架中，從數(shù)據(jù)綁定機制來看，vue和angular采用了雙向數(shù)據(jù)綁定的MVVM模式，而react虛擬Dom沒有雙向數(shù)據(jù)綁定機制，需要通過API來實現(xiàn)input的雙向場景。下面主要對react的一些特性和使用進(jìn)行分析。
一、 一切都是組件
1 組件本質(zhì)
React 的核心思想是：封裝組件。各個組件維護(hù)自己的狀態(tài)和 UI，當(dāng)狀態(tài)變更，自動重新渲染整個組件。
基于這種方式的一個直觀感受就是我們不再需要不厭其煩地來回查找某個 DOM 元素，然后操作 DOM 去更改 UI。
2 創(chuàng)建組件方式
(1)函數(shù)式定義的無狀態(tài)組件
function HelloComponent(props, / context /) { return
二、react的生命周期
在react中觸發(fā)render的四種方式為：
? 首次渲染Initial Render
? 調(diào)用this.setState （并不是一次setState會觸發(fā)一次render，React可能會合并操作，再一次性進(jìn)行render）
? 父組件發(fā)生更新（一般就是props發(fā)生改變，但是就算props沒有改變或者父子組件之間沒有數(shù)據(jù)交換也會觸發(fā)render）
? 調(diào)用this.forceUpdate
三、react虛擬Dom技術(shù)
1 傳統(tǒng)的頁面開發(fā)，或多或少會牽扯到dom操作，而進(jìn)行dom操作時，就會有相應(yīng)的各種優(yōu)化策略來盡可能地減少頁面重新布局和重繪的次數(shù)。
2 比如下面dom批量更新的優(yōu)化就主要有三種：
1 使用documentFragment進(jìn)行dom批量更新，然后一次性更新到document上
2 克隆你將要更新的node，在克隆的node上進(jìn)行dom批量更新，然后克隆的node和原始的node進(jìn)行交換
3 先隱藏將要更新的node,然后進(jìn)行dom批量更新，最后重新顯示隱藏的node
傳統(tǒng)的這種手工的批量更新復(fù)雜且易錯，而React的虛擬DOM技術(shù)讓我們遠(yuǎn)離了這種復(fù)雜，我們無需再時刻考慮何時以及如何做DOM性能調(diào)優(yōu)。
基于React進(jìn)行開發(fā)時所有的DOM構(gòu)造都是通過虛擬DOM進(jìn)行，每當(dāng)數(shù)據(jù)變化時，React會產(chǎn)生以下情況：觸發(fā)相應(yīng)組件render方法；重新構(gòu)建新的虛擬DOM樹；將當(dāng)前新的虛擬DOM樹和上一次的舊樹進(jìn)行對比；得到DOM結(jié)構(gòu)的區(qū)別，計算出最小變化集，進(jìn)行實際的瀏覽器DOM更新（批量更新）。
盡管每一次都需要構(gòu)造完整的虛擬DOM樹，但是因為虛擬DOM是內(nèi)存數(shù)據(jù)，性能是極高的，而對實際DOM進(jìn)行操作的僅僅是Diff部分，因而能達(dá)到提高性能的目的。這樣，在保證性能的同時，開發(fā)者將不再需要因某個數(shù)據(jù)的變化而考慮如何更新到一個或多個具體的DOM元素，無需再寫額外的代碼來做性能優(yōu)化，將之完全交給React類庫來做，而我們只需要關(guān)心在相應(yīng)數(shù)據(jù)狀態(tài)下如何實現(xiàn)相應(yīng)組件的render方法即可，使得開發(fā)簡單。
那么使用了虛擬DOM技術(shù)的React性能到底如何呢，到底是徒有虛名還是貨真價實呢，接下來我們來看看React和其他一些流行框架的性能比較。
四、React小結(jié)
1 ReactJs是基于組件化的開發(fā)，所以最終你的頁面應(yīng)該是由若干個小組件組成的大組件。
2 可以通過屬性，將值傳遞到組件內(nèi)部，同理也可以通過屬性將內(nèi)部的結(jié)果傳遞到父級組件(留給大家研究)；要對某些值的變化做DOM操作的，要把這些值放到state中。
3 為組件添加外部css樣式時，類名應(yīng)該寫成className而不是class;添加內(nèi)部樣式時，應(yīng)該是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
4 組件名稱首字母必須大寫。
5 變量名用{}包裹，且不能加雙引號。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87427.html
摘要：前言的基本概念組件的構(gòu)建方法以及高級用法這背后的一切如何運轉(zhuǎn)深入內(nèi)部的實現(xiàn)機制和原理初探源碼代碼組織結(jié)構(gòu)包含一系列的工具方法插件包含一系列同構(gòu)方法包含一些公用或常用方法如等包含一些測試方法等包含一些邊界錯誤的測試用例是代碼的核心部分它包含了 前言 React的基本概念,API,組件的構(gòu)建方法以及高級用法,這背后的一切如何運轉(zhuǎn),深入Virtual DOM內(nèi)部的實現(xiàn)機制和原理. 初探Rea...
摘要：各個組件維護(hù)自己的狀態(tài)和，當(dāng)狀態(tài)變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創(chuàng)建的組件的，是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會取代形式相對于可以更好實現(xiàn)代碼復(fù)用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。 目前在前端開發(fā)領(lǐng)域，框架Angular、react和vue占據(jù)著主流的地位而且可能會持續(xù)比較長的一段時間。三門框架中，從數(shù)據(jù)綁定機制來看，vue和an...
摘要：它的作用就是像它的名字那樣，建立一個從外部的對象到組件的對象的映射關(guān)系。比如表示從整個的表示當(dāng)前組件容器的用來建立組件的參數(shù)到方法的映射比如表示它定義了哪些用戶的操作應(yīng)該當(dāng)作，傳給。 最近做的項目加入了react-redux,對react-redux一直沒理解透徹，最近有時間把react-redux梳理了一番，希望能夠幫助到大家， 首先有這幾個文件，action,reducer,sag...
摘要：相信用的同學(xué)也不少找到函數(shù)在其中中添加啟用編譯。。。react 最近已經(jīng)開始使用react技術(shù)棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個 $ npm or c...
react 最近已經(jīng)開始使用react技術(shù)棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個 $ npm or cnpm $ npm install create-react...
閱讀 3035·2021-11-24 09:39
閱讀 2273·2021-10-08 10:05
閱讀 2764·2021-09-24 13:52
閱讀 1582·2021-09-22 15:07
閱讀 601·2019-08-30 15:55
閱讀 1819·2019-08-30 15:53
閱讀 699·2019-08-30 15:44
閱讀 3128·2019-08-30 11:20
