這篇文章主要介紹了React中的render什么時候執(zhí)行過程，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
我們都知道Render在組件實例化和存在期時都會被執(zhí)行。實例化在componentWillMount執(zhí)行完成后就會被執(zhí)行，這個沒什么好說的。在這里我們主要分析存在期組件更新時的執(zhí)行。
存在期的方法包含：
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
這些方法會在組件的狀態(tài)或者屬性發(fā)生發(fā)生變化時被執(zhí)行，如果我們使用了Redux，那么就只有當(dāng)屬性發(fā)生變化時被執(zhí)行。下面我們將從幾個場景來分析屬性的變化。
首先我們創(chuàng)建了HelloWorldComponent，代碼如下所示：
重慶分公司
重慶分公司
import * as React from "react";
class HelloWorldComponent extends React.Component {
constructor(props) {
super(props);
}
componentWillReceiveProps(nextProps) {
console.log('hello world componentWillReceiveProps');
}
render() {
console.log('hello world render');
const { onClick, text } = this.props;
return (
{text}
);
}
}
HelloWorldComponent.propTypes = {
onClick: React.PropTypes.func,
};
export default HelloWorldComponent; AppComponent組件的代碼如下：
class MyApp extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick() {
console.log('button click');
this.props.addNumber();
}
render() {
return (
)
}
}
const mapStateToProps = (state) => {
return { count: state.count }
};
const mapDispatchToProps = {
addNumber
};
export default connect(mapStateToProps, mapDispatchToProps)(MyApp); 這里我們使用了Redux，但是代碼就不貼出來了，其中addNumber方法會每次點擊時將count加1。
這個時候當(dāng)我們點擊button時，你覺得子組HelloWorldComponent的render方法會被執(zhí)行嗎？
如圖所示，當(dāng)我們點擊button時，子組件的render方法被執(zhí)行了。可是從代碼來看，組件綁定的onClick和text都沒有發(fā)生改變啊，為何組件會更新呢？
如果在子組件的componentWillReceiveProps添加這個log：console.log(‘isEqual', nextProps === this.props); 輸出會是true還是false呢？
是的，你沒有看錯，輸出的是false。這也是為什么子組件會更新了，因為屬性值發(fā)生了變化，并不是說我們綁定在組件上的屬性值。每次點擊button時會觸發(fā)state發(fā)生變化，進而整個組件重新render了，但這并不是我們想要的，因為這不必要的渲染會極其影響我們應(yīng)用的性能。
在react中除了繼承Component創(chuàng)建組件之外，還有個PureComponent。通過該組件就可以避免這種情況。下面我們對代碼做點修改再來看效果。修改如下：
class HelloWorldComponent extends React.PureComponent
這次在點擊button時發(fā)生了什么呢？
雖然componentWillReceiveProps依然會執(zhí)行，但是這次組件沒有重新render。
所以，我們對于無狀態(tài)組件，我們應(yīng)該盡量使用PureComponent，需要注意的是PureComponent只關(guān)注屬性值，也就意味著對象和數(shù)組發(fā)生了變化是不會觸發(fā)render的。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“React中的render什么時候執(zhí)行過程”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
