React基本概念(二)

1.組件的生命周期

創(chuàng)新互聯(lián)自2013年起，先為廣東等服務(wù)建站，廣東等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為廣東企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

實例化：

實例初次被創(chuàng)建，首次渲染時所調(diào)用的生命周期方法與其他各個后續(xù)實例被創(chuàng)建時所調(diào)用的方法略有不同。

在首次使用一個組件類時，下面方法依次調(diào)用順序：

--getDefaultProps

組件類的該方法只會被調(diào)用一次

任何復(fù)雜的值（如對象和數(shù)組），都會在所有實例中共享而不是復(fù)制或克隆

--getInitialState

每個實例都會且僅會調(diào)用一次該方法，初始化每個實例的state；

與getDefaultProps不同：每個實例創(chuàng)建都會調(diào)用一次改方法，在Initial法里已經(jīng)可以調(diào)用到this.props

--componentWillMount

該方法會在完成首次渲染之前被調(diào)用，是在render方法調(diào)用前修改組件state的最后一次機會

--render

在這里創(chuàng)建一個虛擬DOM，用來表示組件的輸出。

對于一個組件來說，這是唯一一個必須的方法。

render需要滿足以下幾點：

--只能通過this.state和this.props訪問數(shù)據(jù)；

--可以返回null, false或任何react組件；

--只能出現(xiàn)一個頂級組件（不能返回一組元素）；

--必須純凈，即不能改變組件的狀態(tài)或者修改DOM的輸出。

render方法返回的結(jié)果不是真正的DOM，而是一個虛擬的表現(xiàn)，React隨后會把他和真正的DOM（即內(nèi)存中的DOM）做對比，來判斷是否有必要做出修改。

--componentDidMount

render方法成功被調(diào)用并真正的DOM已經(jīng)被渲染之后，可以在componentDidMount內(nèi)部通過this.getDOMNode()方法訪問到它。

可以用來訪問原始DOM的生命周期鉤子函數(shù)；

當(dāng)React運行在服務(wù)端時，該方法不會被調(diào)用。

對于該組件的所有后續(xù)應(yīng)用，下面方法依次調(diào)用：

--getInitialState

--componentWillMount

--render

--componentDidMount

存在期：

此時，組件已經(jīng)渲染好，并且用戶可以與他進(jìn)行交互。

隨著用戶的操作，組件或者整個應(yīng)用的state逐漸受到影響，下面方法被依次調(diào)用：

--componentWillReceiveProps

任意時刻，組件的props都可以通過父輩組件來更改。出現(xiàn)這種情況時，該方法會被調(diào)用，將獲得更改props對象及更新state的機會。

--shouldComponentUpdate （一般不使用）

通過調(diào)用該方法在組件渲染時進(jìn)行精確優(yōu)化，即性能調(diào)優(yōu)。

若確定某個組件或者它的任何子組件不需要渲染新的props或者state，則該方法會返回false（在首次渲染期間或調(diào)用forceUpdate()之后，這個方法不會被調(diào)用）。返回false是在告訴React要跳過調(diào)用render方法，以及位于render前后的鉤子函數(shù)：componentWillUpdate和componentDidUpdate。

React插件提供PureRenderMixin方法進(jìn)行性能調(diào)優(yōu)。若組件純凈，對于相同的props和state，它總會渲染出一樣的DOM，那么這個mixin會自動調(diào)用shouldComponentUpdate 方法來比較props和state，如果比較結(jié)果一致則返回false。

--componentWillUpdate

和componentWillMount 方法類似，組件會在接收到新的props或state進(jìn)行渲染之前調(diào)用該方法。

注意：不可以在該方法中更新state或props。而應(yīng)借助componentWillReceiveProps 方法在運行時進(jìn)行更新state。

--render

--componentDidUpdate

和componentDidMount 方法類似，改方法給了我們更新已經(jīng)渲染好的DOM的機會。

銷毀/清理期：

當(dāng)組件被使用完成后，componentWillUnmount方法將會被調(diào)用，目的是給這個實例提供清理自身的機會。

該方法會將在componentDidMount方法添加的所有任務(wù)都在該方法中撤銷。

反模式：

即把計算后的值賦給state。

在getInitialState方法中，嘗試通過this.props來創(chuàng)建state的做法是一種反模式。

2.數(shù)據(jù)流

Props：

props是properties的縮寫，他可以把任意類型的數(shù)據(jù)傳遞給組件。

可以在掛載組件的時候（1）或通過調(diào)用組件實例的setProps方法（2）設(shè)置它的props：

eg1：

        var surveys = [{title: 'Superheroes'}];
        <ListSurveys surveys={surveys}/>

eg2：

var surveys = [{title: 'Superheroes'}];

var listSurveys = React.render(

<ListSurveys/>,

document.querySelector('body')

);

listSurveys.setProps({ surveys: surveys});

只能在組件（eg1）或者在組件樹外（eg2）通過調(diào)用setProps。不能調(diào)用this.setProps或者直接修改this.props，若真的需要，請使用state。一個組件不能修改自己的props。

PropTypes：

通過在組件中定義一個配置對象，React提供了一種驗證props的方式：

var SurveyTableRow = React.ceateClass({

propTypes: {

survey: React.PropTypes.shape({

id: React.PropTypes.number.isRequired

}).isRequired,

onClick: React.PropTypes.func

}

});

組件初始化時，如果傳遞的屬性和propTypes不匹配，則會打印一個console.warn日志。如果是可選的配置，則可去掉.isRequired。

getDefaultProps:

設(shè)置非必須屬性的默認(rèn)值。

var SurveyTable = React.createClass({

getDefaultProps: function () {

return {

surveys: []

};

}

});

getDefaultProps并不是在組件實例化時被調(diào)用的，而是在React.createClass調(diào)用時就被調(diào)用了，返回值會被緩存起來。所以不能在getDefaultProps中使用任何特定的實例數(shù)據(jù)。

State:

每個React組件都有自己的state，state與props的區(qū)別在于前者只存在于組件的內(nèi)部。

state可以通過setState來修改，也可以通過getInitialState方法提供一組默認(rèn)值。只要setState被調(diào)用，render就會被調(diào)用。如果render函數(shù)返回值有變化，虛擬DOM就會更新，真實的DOM也會被更新，最終用戶就會在瀏覽器中看到變化。

不能直接修改this.state，永遠(yuǎn)記得要通過this.setState方法修改。

state和props：

-- state中不保存計算出的值，值保存最簡單的數(shù)據(jù)，即組件正常工作時的必要數(shù)據(jù)；

-- 不要嘗試將props復(fù)制到state中。盡可能把props當(dāng)做數(shù)據(jù)源使用；

-- 使用props在整個組件樹中傳遞數(shù)據(jù)和配置；

-- 避免在組件內(nèi)部修改this.props或調(diào)用this.setProps，請把props當(dāng)做是只讀的；

-- 使用props來做事件處理器，與子件通信；

-- 使用state存儲簡單的視圖狀態(tài)，比如下拉框是否可見；

-- 使用this.setState來設(shè)置狀態(tài)，而不是this.state直接修改狀態(tài)。

3.事件處理

從用戶輸入到更新用戶界面：

-- 在React組件上綁定事件處理器；

-- 在事件處理器當(dāng)中更新組件內(nèi)部狀態(tài)。組件狀態(tài)的更新會觸發(fā)重繪；

-- 實現(xiàn)組件的render函數(shù)用來渲染this.state的數(shù)據(jù)。

React對各種事件類型提供支持，具體支持類型：https://reactjs.org/docs/events.html

其中絕大部分事件不需要額外處理就能工作，但是觸控事件需要通過調(diào)用：React.initializeTouchEvents(true)手動啟動。

下面例子中的onChange就是一個時間處理

4.組件的復(fù)合

在傳統(tǒng)HTML中，元素師構(gòu)成頁面的基礎(chǔ)單元。但在React中，React組件是構(gòu)成頁面的基礎(chǔ)單元。React組件可以看成混入了JavaScript表達(dá)能力的HTML元素。實際上寫React代碼主要就是構(gòu)建組件。

本質(zhì)上，一個組件就是一個JavaScript函數(shù)，它接受屬性props和狀態(tài)state作為參數(shù)，并輸出渲染好的HTML。組件一般被用來呈現(xiàn)和表達(dá)應(yīng)用的某部分?jǐn)?shù)據(jù)，因此React可以理解為HTML的擴展。

當(dāng)把表單渲染到屏幕上后，還沒有賦予組件獲取用戶的修改能力，子組件還沒有能力和它的父組件通信。

子組件和父組件通信的最簡單方式是通過使用屬性props。父組件需要通過屬性傳入一個回調(diào)函數(shù)，子組件在需要時進(jìn)行回調(diào)。

eg：這里handleChanged是回調(diào)函數(shù)

var AnswerRadioInput = React.createClass({

mixins: [PropsMethodMixin],

propTypes: {

id: React.PropTypes.string,

name: React.PropTypes.string.isRequired,

label: React.PropTypes.string.isRequired,

value: React.PropTypes.string.isRequired,

checked: React.PropTypes.bool

getDefaultProps: function () {

return {

id: uniqueId('radio-'),

checked: false

};

getInitialState: function () {

return {

checked: !!this.props.checked

};

componentWillReceiveProps: function (nextProps) {

if(nextProps.checked !== undefined) {

this.setState({

checked: nextProps.checked

});

}

handleChanged: function (e) {

var checked = e.target.checked;

this.setState({checked: checked});

if(checked) {

this.callMethodOnProps('onChanged', this.props.value);

}

render: function () {

return (

<label>

<input type="radio"

name={this.props.name}

id={this.props.id}

value={this.props.value}

checked={this.state.checked}

onChange={this.handleChanged} />

{this.props.label}

</label>

</div>

);

}

});

復(fù)合組件只是React提供的用于定制和特殊化組件的方式之一。React的mixin提供了另一種途徑，幫助我們可以在多組件之間共享的方法。

5.mixin

mixin解決代碼重復(fù)，同時能讓組件保持專注于自身的業(yè)務(wù)邏輯。mixin允許我們使用強大的抽象功能。

幾種用法：

-- 一個監(jiān)聽事件并修改state的mixin（如：flux store mixin）

-- 一個上傳mixin，它負(fù)責(zé)處理XHR上傳請求，同時將狀態(tài)以及上傳的進(jìn)度同步到state

-- 渲染層mixin，簡化在</body>之前渲染子元素的過程（如渲染模態(tài)對話框）

Mixins有點類似AOP。所謂的mixins就是將組件里的方法抽出來。實際上Mixins里的this是指向組件的，使用了Mixins以后，組件也可以調(diào)用Mixins里的方法。

Mixins里也可以編寫組件生命周期的方法，需要注意的是：Mixins里的方法并不會覆蓋組件的生命周期方法，會在先于組件生命周期方法執(zhí)行。

組件也可以使用多個Mixin，數(shù)組引入的順序，決定了Mxins里生命周期方法的執(zhí)行順序。

除了生命周期方法可以重復(fù)以外，其他的方法都不可以重復(fù)，否則會報錯。

eg：

var AMixin = {

componentWillMount: function () {

console.log('AMixin Will Mount');

}

};

var BMixin = {

componentWillMount: function () {

console.log('BMixin Will Mount');

}

};

var Component = React.createClass({

mixins: [AMixin,BMixin],

componentWillMount: function () {

console.log('Component Will Mount');

render: function () {

return (

<div>Component</div>

)

}

});

控制臺打印：

$ AMixin Will Mount

$ BMixin Will Mount

$ Component Will Mount

新聞標(biāo)題：React基本概念(二)
本文URL：http://muchs.cn/article22/ghjejc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、電子商務(wù)、企業(yè)建站、自適應(yīng)網(wǎng)站、網(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)

猜你還喜歡下面的內(nèi)容