這篇文章主要介紹了React中的render什么時(shí)候執(zhí)行過程，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)主營泰山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),泰山h5微信小程序開發(fā)搭建,泰山網(wǎng)站營銷推廣歡迎泰山等地區(qū)企業(yè)咨詢

我們都知道Render在組件實(shí)例化和存在期時(shí)都會(huì)被執(zhí)行。實(shí)例化在componentWillMount執(zhí)行完成后就會(huì)被執(zhí)行，這個(gè)沒什么好說的。在這里我們主要分析存在期組件更新時(shí)的執(zhí)行。

存在期的方法包含：

1. - componentWillReceiveProps

2. - shouldComponentUpdate

3. - componentWillUpdate

4. - render

5. - componentDidUpdate

這些方法會(huì)在組件的狀態(tài)或者屬性發(fā)生發(fā)生變化時(shí)被執(zhí)行，如果我們使用了Redux，那么就只有當(dāng)屬性發(fā)生變化時(shí)被執(zhí)行。下面我們將從幾個(gè)場景來分析屬性的變化。

首先我們創(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 (
      <button onClick={onClick}>
        {text}
      </button>
    );
  }
}

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 (
      <HelloWorld onClick={this.onClick} text="test"></HelloWorld>
    )
  }
}

const mapStateToProps = (state) => {
  return { count: state.count }
};

const mapDispatchToProps = {
  addNumber
};

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

這里我們使用了Redux，但是代碼就不貼出來了，其中addNumber方法會(huì)每次點(diǎn)擊時(shí)將count加1。

這個(gè)時(shí)候當(dāng)我們點(diǎn)擊button時(shí)，你覺得子組HelloWorldComponent的render方法會(huì)被執(zhí)行嗎？

 

如圖所示，當(dāng)我們點(diǎn)擊button時(shí)，子組件的render方法被執(zhí)行了。可是從代碼來看，組件綁定的onClick和text都沒有發(fā)生改變啊，為何組件會(huì)更新呢？

如果在子組件的componentWillReceiveProps添加這個(gè)log：console.log(‘isEqual', nextProps === this.props); 輸出會(huì)是true還是false呢？

 

是的，你沒有看錯(cuò)，輸出的是false。這也是為什么子組件會(huì)更新了，因?yàn)閷傩灾蛋l(fā)生了變化，并不是說我們綁定在組件上的屬性值。每次點(diǎn)擊button時(shí)會(huì)觸發(fā)state發(fā)生變化，進(jìn)而整個(gè)組件重新render了，但這并不是我們想要的，因?yàn)檫@不必要的渲染會(huì)極其影響我們應(yīng)用的性能。

在react中除了繼承Component創(chuàng)建組件之外，還有個(gè)PureComponent。通過該組件就可以避免這種情況。下面我們對(duì)代碼做點(diǎn)修改再來看效果。修改如下：

class HelloWorldComponent extends React.PureComponent

這次在點(diǎn)擊button時(shí)發(fā)生了什么呢？

　　

雖然componentWillReceiveProps依然會(huì)執(zhí)行，但是這次組件沒有重新render。

所以，我們對(duì)于無狀態(tài)組件，我們應(yīng)該盡量使用PureComponent，需要注意的是PureComponent只關(guān)注屬性值，也就意味著對(duì)象和數(shù)組發(fā)生了變化是不會(huì)觸發(fā)render的。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“React中的render什么時(shí)候執(zhí)行過程”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：React中的render什么時(shí)候執(zhí)行過程-創(chuàng)新互聯(lián)
分享路徑：http://aaarwkj.com/article36/hoepg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站排名、企業(yè)建站、云服務(wù)器、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)公司

廣告

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