Reactjs 起源于Facebook內(nèi)部項目，是一個用來構(gòu)建用戶界面的 javascript 庫，相當(dāng)于MVC架構(gòu)中的V層框架，與市面上其他框架不同的是，React 把每一個組件當(dāng)成了一個狀態(tài)機(jī)，組件內(nèi)部通過state來維護(hù)組件狀態(tài)的變化，當(dāng)組件的狀態(tài)發(fā)生變化時，React通過虛擬DOM技術(shù)來增量并且高效的更新真實DOM。本文將對React 的這些特點進(jìn)行簡單的介紹。

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出鹽田免費做網(wǎng)站回饋大家。

一個簡單的React組件 —— HelloReact 

考慮到有的同學(xué)還不曾了解過React，我們先來寫一個簡單的React組件，讓大家一睹為快！

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 創(chuàng)建一個HelloReact組件 var HelloReact = React.createClass({     render:function(){         return (             <div>                  Hello React!             </div>         )     } }); // 使用HelloReact組件 ReactDOM.render(     <HelloReact />,     document.querySelector('body') )

這樣就定義了一個React組件，當(dāng)然要運行這段代碼是有條件的，需要引入React庫，還需要引入JSX語法轉(zhuǎn)換庫，這里不多說了，這些基礎(chǔ)的東西還需要各位親自實踐才好！

React 核心技術(shù) —— 虛擬DOM（Virtual DOM）

在前端開發(fā)的過程中，我們經(jīng)常會做的一件事就是將變化的數(shù)據(jù)實時更新到UI上，這時就需要對DOM進(jìn)行更新和重新渲染，而頻繁的DOM操作通常是性能瓶頸產(chǎn)生的原因之一，有時候我們會遇到這樣一種尷尬的情況：比如有一個列表數(shù)據(jù)，當(dāng)用戶執(zhí)行刷新操作時，Ajax會重新從后臺請求數(shù)據(jù)，即使新請求的數(shù)據(jù)和上次完全相同，DOM也會被全部更新一遍并進(jìn)行重新渲染，這樣就產(chǎn)生了不必要的性能開銷。

React為此引入了虛擬DOM（Virtual DOM）機(jī)制：對于每一個組件，React會在內(nèi)存中構(gòu)建一個相對應(yīng)的DOM樹，基于React開發(fā)時所有的DOM構(gòu)造都是通過虛擬DOM進(jìn)行，每當(dāng)組件的狀態(tài)發(fā)生變化時，React都會重新構(gòu)建整個DOM數(shù)據(jù)，然后將當(dāng)前的整個DOM樹和上一次的DOM樹進(jìn)行對比，得出DOM結(jié)構(gòu)變化的部分(Patchs)，然后將這些Patchs 再更新到真實DOM中。整個過程都是在內(nèi)存中進(jìn)行，因此是非常高效的。借用一張圖可以清晰的表示虛擬DOM的工作機(jī)制：

React 生命周期

React 把每個組件都當(dāng)作一個狀態(tài)機(jī)來維護(hù)和管理，因此每個組件都擁有一套完整的生命周期，大致可以分為三個過程：初始化、更新和銷毀。生命周期的每一個過程都明確的反映了組件的狀態(tài)變化。對于開發(fā)來說就能很容易的把握組件的每個狀態(tài)，不同的狀態(tài)時期做對應(yīng)的事情，互不干擾。以下是和組件生命周期相關(guān)的幾個方法：

1 2 3 4 5 6 7 8 9

getDefaultProps //創(chuàng)建組建 getInitialState  //實例化狀態(tài) componentWillMount  //掛載前 componentDidMount //掛載后 componentWillReceiveProps //屬性被改變時 shouldComponentUpdate //是否更新 componentWillUpdate //更新前 componentDidUpdate //更新后 componentWillUnmount //銷毀前

初始化

對于外部系統(tǒng)來說，組件是一個獨立存在的封閉系統(tǒng)，內(nèi)部的邏輯被隱藏，只對外暴露傳遞數(shù)據(jù)的接口，而React為我們提供了兩種方式來向組件傳遞數(shù)據(jù)，即 props 和 state。

props 是在調(diào)用 ReactDOM.render() 時通過標(biāo)簽屬性xxx傳遞，然后通過 this.props.xxx 來獲取，getDefaultProps 允許你為組件設(shè)置一個默認(rèn)的props值，在沒有傳遞props的情況下顯示默認(rèn)值。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// 創(chuàng)建HelloReact組件 var HelloReact = React.createClass({     /**      * 當(dāng)設(shè)置props的默認(rèn)值 當(dāng)沒有傳遞時顯示默認(rèn)值      * @return {}      */     getDefaultProps:function(){        return {            data:"暫無數(shù)據(jù)"        }     },     render:function(){         return (             <div>                //顯示data，當(dāng)props發(fā)生變化時會自動更新                {this.props.data}             </div>         )     } });//傳遞props屬性data ReactDOM.render(    <HelloReact data={"Hello React!"} />,    document.querySelector('body') )

和 props 不同的是，state不能通過外部傳遞，因此在使用state之前，需要在 getInitialState 中為state設(shè)置一個默認(rèn)值，然后才能通過 this.state.xxx 來訪問，當(dāng)組件被掛載完成時，觸發(fā) componentDidMount 方法，我們可以在這里通過Ajax請求服務(wù)器數(shù)據(jù)，然后再通過 setState() 把state的值設(shè)置為真實數(shù)據(jù)。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

// 創(chuàng)建HelloReact組件 var HelloReact = React.createClass({     /**      * 設(shè)置組件的初始值      * @returns {{data: Array, msg: string}}      */     getInitialState:function(){         return {             data:"數(shù)據(jù)加載中..." //初始值為[]         }     },     /**      * 掛載后首次加載數(shù)據(jù)      */     componentDidMount:function(){         this.requestData();//請求數(shù)據(jù)     },     /**      * 請求后臺數(shù)據(jù)      */     requestData:function(){         $.ajax({             url:'xxxx.ashx',             data:{},             success:function(data){                 this.setState({                     data:data  //通過setState()更新服務(wù)器數(shù)據(jù)                 })             }         }.bind(this))     },     render:function(){         return (             <div>                {this.state.data}             </div>         )     } }); ReactDOM.render(     <HelloReact  />,     document.querySelector('body') )

更新

props屬性是只讀的，如果想要改變props的值，只能通過重新調(diào)用render()來傳遞新的props，但要注意的是，重新執(zhí)行render()組件不會被重新掛載，而是通過虛擬DOM技術(shù)進(jìn)行增量更新和渲染，這時還會觸發(fā) componentWillReceiveProps 方法，并將新的props作為參數(shù)傳遞，你可以在這里對新的props進(jìn)行處理。

相比props，state天生就是用來反映組件狀態(tài)的，因此它的值是可以被改變的，當(dāng)state的值被改變時，通過setState就可以改變state的值，React同樣也是采用虛擬DOM技術(shù)來計算需要被更新的部分，而不是牽一發(fā)動全身的更新和渲染。

當(dāng) props 和 state 的狀態(tài)發(fā)生變化后，組件在即將更新之前還會觸發(fā)一個叫 shouldConponentUpdate 的方法，如果 shouldConponentUpdate 返回的是 true，不管props和state 的值和上一次相比有沒有變化，React 都會老老實實的進(jìn)行對比。此時，如果你確定以及肯定兩次數(shù)據(jù)沒有變化，那就讓 shouldConponentUpdate 返回 false，React就不會進(jìn)行diff了，更不會重新渲染了。瞬間省去了diff的時間。

銷毀

當(dāng)組件從DOM中被移除時，React會銷毀之。在銷毀之前，細(xì)心的React還觸發(fā) componentWillUnmount 來通知你，看你最后有沒有什么話想對這個即將銷毀的組件說，當(dāng)然你沒什么事就不用了。

什么時候用props,什么時候用state

我們已經(jīng)知道可以通過props和state兩種方式向組件傳遞數(shù)據(jù)，props是只讀的不能被改變，而 state 是用來反映一個組件的狀態(tài)，是可以改變的。因此，當(dāng)組件所需要的數(shù)據(jù)在調(diào)用時是已經(jīng)確定的，不頻繁發(fā)生變化的，就可以使用props來傳遞，相反，當(dāng)組件所需要的數(shù)據(jù)在調(diào)用時不能確定，需要等待異步回調(diào)時才能確定，比如ajax請求數(shù)據(jù)，input的onchange事件，這時就需要使用state來記錄和改變這些值得變化。

當(dāng)前標(biāo)題：淺談React工作原理
文章位置：http://www.rwnh.cn/article30/ipggpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、定制開發(fā)、網(wǎng)站設(shè)計公司、網(wǎng)站建設(shè)、建站公司、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)