成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React 初探

trilever / 373人閱讀

摘要：各個(gè)組件維護(hù)自己的狀態(tài)和，當(dāng)狀態(tài)變更，自動(dòng)重新渲染整個(gè)組件。形式的定義的組件是以的形式來創(chuàng)建的組件的，是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會(huì)取代形式相對(duì)于可以更好實(shí)現(xiàn)代碼復(fù)用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號(hào)。

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

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

2 創(chuàng)建組件方式
(1)函數(shù)式定義的無狀態(tài)組件
function HelloComponent(props, / context /) { return

Hello {props.name}
} ReactDOM.render(, mountNode)
(2)es5原生方式React.createClass定義的組件
React.createClass是react剛開始推薦的創(chuàng)建組件的方式，這是ES5的原生的JavaScript來實(shí)現(xiàn)的React組件。
(3)es6形式的extends React.Component定義的組件
React.Component是以ES6的形式來創(chuàng)建react的組件的，是React目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會(huì)取代React.createClass形式；相對(duì)于React.createClass可以更好實(shí)現(xiàn)代碼復(fù)用。

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

三、react虛擬Dom技術(shù)
1 傳統(tǒng)的頁面開發(fā)，或多或少會(huì)牽扯到dom操作，而進(jìn)行dom操作時(shí)，就會(huì)有相應(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ù)雜且易錯(cuò)，而React的虛擬DOM技術(shù)讓我們遠(yuǎn)離了這種復(fù)雜，我們無需再時(shí)刻考慮何時(shí)以及如何做DOM性能調(diào)優(yōu)。

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51203.html

相關(guān)文章

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

    摘要：前言的基本概念組件的構(gòu)建方法以及高級(jí)用法這背后的一切如何運(yùn)轉(zhuǎn)深入內(nèi)部的實(shí)現(xiàn)機(jī)制和原理初探源碼代碼組織結(jié)構(gòu)包含一系列的工具方法插件包含一系列同構(gòu)方法包含一些公用或常用方法如等包含一些測(cè)試方法等包含一些邊界錯(cuò)誤的測(cè)試用例是代碼的核心部分它包含了 前言 React的基本概念,API,組件的構(gòu)建方法以及高級(jí)用法,這背后的一切如何運(yùn)轉(zhuǎn),深入Virtual DOM內(nèi)部的實(shí)現(xiàn)機(jī)制和原理. 初探Rea...

    Eminjannn 評(píng)論0 收藏0

  • React 初探

    摘要：各個(gè)組件維護(hù)自己的狀態(tài)和，當(dāng)狀態(tài)變更，自動(dòng)重新渲染整個(gè)組件。形式的定義的組件是以的形式來創(chuàng)建的組件的，是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會(huì)取代形式相對(duì)于可以更好實(shí)現(xiàn)代碼復(fù)用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號(hào)。 目前在前端開發(fā)領(lǐng)域，框架Angular、react和vue占據(jù)著主流的地位而且可能會(huì)持續(xù)比較長(zhǎng)的一段時(shí)間。三門框架中，從數(shù)據(jù)綁定機(jī)制來看，vue和an...

    levy9527 評(píng)論0 收藏0

  • react-redux初探理解

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

    ziwenxie 評(píng)論0 收藏0

  • 初探react技術(shù)棧（一）

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

    劉玉平 評(píng)論0 收藏0

  • 初探React技術(shù)棧（一）

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

    neroneroffy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<