資訊專欄INFORMATION COLUMN
摘要：組件加載當(dāng)組件被實(shí)例化并且插入時(shí)所執(zhí)行的方法，也會(huì)按照下的順序依次執(zhí)行。示例方法是在組件加載完后立即執(zhí)行，也就是當(dāng)該組件相關(guān)的節(jié)點(diǎn)插入到樹中時(shí)。該方法在組件生命中只執(zhí)行一次。注意一些監(jiān)聽需要在組件卸載時(shí)清理掉，否則會(huì)引起異常。
組件加載
當(dāng)組件被實(shí)例化并且插入Dom時(shí)所執(zhí)行的方法，也會(huì)按照下的順序依次執(zhí)行。
constructor()
構(gòu)造方法。
這個(gè)方法有兩個(gè)目的：
初始化一個(gè)本地state。
this.state = {color: "red"};
要避免將props參數(shù)直接賦值給state, this.state = {color: props.color}是不允許 的
綁定方法。
我們知道React Class中是不會(huì)繼承this的，如果在class的方法中使用this，那么我們需要將this綁定到方法中。
this.clickHandler = this.clickHandler.bind(this);
綁定this，將需要super(props),否則會(huì)提示找不到this.
示例：
constructor(props) {
super(props);
this.state = {color: "red"};
this.clickHandler = this.clickHandler.bind(this);
}
static getDerivedStateFromProps()
當(dāng)本地state需要根據(jù)props來(lái)改變的時(shí)候可調(diào)用此方法。
這個(gè)方法是在render()前會(huì)被執(zhí)行，只要執(zhí)行render()都會(huì)被在之前被觸發(fā)。
該方法有兩個(gè)參數(shù)props和state; 返回值為state對(duì)象, 不需要返回整體state，把需要改變的state返回即可。
示例：
static getDerivedStateFromProps(props, state) {
if(props.color !== state.color) {
return {color: props.color};
}
}
render()
這個(gè)方法是React組件中必須要提供的方法。當(dāng)state或者props任一數(shù)據(jù)有更新時(shí)都會(huì)執(zhí)行。
需要注意當(dāng)繼承PureComponent時(shí)，不會(huì)對(duì)對(duì)象進(jìn)行深度比較，也就是，不會(huì)根據(jù)對(duì)象內(nèi)的對(duì)象變化時(shí)執(zhí)行render().
render()是一個(gè)純函數(shù)，也就是不能在這個(gè)方法中有類似setState()這樣的行為。
返回的數(shù)據(jù)類型可以有：
null、String、Number、Array、Boolean。
React elements
Fragment
Portal
注意：不能返回undefined.
當(dāng)shouldComponentUpdate()返回false時(shí)，無(wú)論state和props有沒有變化，這個(gè)方法都不執(zhí)行。
示例：
render() {
return (
{this.state.color}
);
}
componentDidMount()
componentDidMount()方法是在組件加載完后立即執(zhí)行，也就是當(dāng)該組件相關(guān)的dom節(jié)點(diǎn)插入到dom樹中時(shí)。該方法在組件生命中只執(zhí)行一次。
一般情況，我們會(huì)在這里setState()根據(jù)props的值，也可以從這里調(diào)用接口，獲取服務(wù)端的數(shù)據(jù)，也可以在這里監(jiān)聽websocket、setInterval等操作。
注意：一些監(jiān)聽需要在組件卸載時(shí)清理掉，否則會(huì)引起異常。
示例：
componentDidMount() {
this.setState({color: this.props.color});
}
在線示例
推薦閱讀《React 手稿》
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99059.html
摘要：示例此方法有兩個(gè)參數(shù)返回值為或者默認(rèn)返回主要使用它來(lái)控制組件要不要渲然，常用作性能優(yōu)化。只能捕獲組件樹的異常，無(wú)法捕獲這個(gè)方法內(nèi)的異常。 組件更新 static getDerivedStateFromProps() 當(dāng)本地state需要根據(jù)props來(lái)改變的時(shí)候可調(diào)用此方法。 這個(gè)方法是在render()前會(huì)被執(zhí)行，只要執(zhí)行render()都會(huì)被在之前被觸發(fā)。 該方法有兩個(gè)參數(shù)pr...
摘要：創(chuàng)建組件創(chuàng)建組件之前要注意以下幾點(diǎn)組件創(chuàng)建的名稱首字母得大寫組件中返回的只能是一個(gè)根節(jié)點(diǎn)，所有的內(nèi)容得用一個(gè)元素都框起來(lái)無(wú)狀態(tài)函數(shù)式組件無(wú)狀態(tài)函數(shù)式組件可以理解成就是一個(gè)函數(shù)生成的，使得代碼的可讀性更好，并且精簡(jiǎn)便利，減少了冗余，無(wú)狀態(tài)組件 創(chuàng)建組件 創(chuàng)建組件之前要注意以下幾點(diǎn)： 組件創(chuàng)建的名稱首字母得大寫 組件中返回的JSX只能是一個(gè)根節(jié)點(diǎn)，所有的內(nèi)容得用一個(gè)元素都框起來(lái) 1.無(wú)...
摘要：本文主要介紹之后的生命周期。該方法有兩個(gè)參數(shù)和返回值為對(duì)象不需要返回整體，把需要改變的返回即可。必須有一個(gè)返回值，返回的數(shù)據(jù)類型可以有。此生命周期主要用于優(yōu)化性能。最后，說(shuō)明一點(diǎn)這三個(gè)生命周期在未來(lái)版本中會(huì)被廢棄。 React16.3.0開始，生命周期進(jìn)行了一些變化。本文主要介紹React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react組件的...
摘要：組件生命周期此文章適合之前的版本，，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。每個(gè)生命周期階段調(diào)用的鉤子函數(shù)會(huì)略有不同。 React組件生命周期 此文章適合 React@17 之前的版本，[email protected]，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。所有如果在React@17 發(fā)布之前，這篇文章還是適用的。新的生命周期請(qǐng)看官...
摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個(gè)鉤子函數(shù)這些方法會(huì)在組件初始化的時(shí)候被調(diào)用，只跟實(shí)例的創(chuàng)建有關(guān)。 前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現(xiàn)在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數(shù)混雜在一起，難免會(huì)讓許多新來(lái)者有很多困惑。所以這一篇我們來(lái)...
閱讀 3492·2023-04-25 22:45
閱讀 1294·2021-11-11 16:54
閱讀 2802·2019-08-30 15:44
閱讀 3199·2019-08-30 15:44
閱讀 1655·2019-08-30 13:55
閱讀 948·2019-08-29 18:45
閱讀 1207·2019-08-29 17:25
閱讀 1017·2019-08-29 12:59
