React組件生命周期

anquan 發(fā)布于2019-08-20 11:03 / 3369人閱讀

摘要：組件的生命周期包含三個(gè)主要部分掛載組件被插入到中。更新組件被重新渲染，查明是否應(yīng)該刷新。提供生命周期方法，你可以在這些方法中放入自己的代碼。完整實(shí)例展示總結(jié)生命周期調(diào)用次數(shù)能否使用全局調(diào)用一次否否是否是是否否否否

組件的生命周期包含三個(gè)主要部分：

掛載：組件被插入到DOM中。

更新：組件被重新渲染，查明DOM是否應(yīng)該刷新。

移除：組件從DOM中移除。

React提供生命周期方法，你可以在這些方法中放入自己的代碼。我們提供will方法，會(huì)在某些行為發(fā)生之前調(diào)用，和did方法，會(huì)在某些行為發(fā)生之后調(diào)用。

裝載組件觸發(fā)

getInitialState

object在組件被掛載之前調(diào)用。狀態(tài)化的組件應(yīng)該實(shí)現(xiàn)這個(gè)方法，返回初始的state數(shù)據(jù)。

初始化 this.state 的值，只在組件裝載之前調(diào)用一次。

如果是使用 ES6 的語(yǔ)法，你也可以在構(gòu)造函數(shù)中初始化狀態(tài)，比如：

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: props.initialCount };
  }

  render() {
    // ...
  }
}

getDefaultProps

只在組件創(chuàng)建時(shí)調(diào)用一次并緩存返回的對(duì)象（即在 React.createClass 之后就會(huì)調(diào)用）。

因?yàn)檫@個(gè)方法在實(shí)例初始化之前調(diào)用，所以在這個(gè)方法里面不能依賴 this 獲取到這個(gè)組件的實(shí)例。
在組件裝載之后，這個(gè)方法緩存的結(jié)果會(huì)用來(lái)保證訪問(wèn) this.props 的屬性時(shí)，當(dāng)這個(gè)屬性沒(méi)有在父組件中傳入（在這個(gè)組件的 JSX 屬性里設(shè)置），也總是有值的。

如果是使用 ES6 語(yǔ)法，可以直接定義 defaultProps 這個(gè)類屬性來(lái)替代，這樣能更直觀的知道 default props 是預(yù)先定義好的對(duì)象值：

Counter.defaultProps = { initialCount: 0 };

componentWillMount()

componentWillMount()只會(huì)在裝載之前調(diào)用一次，在 render 之前調(diào)用，你可以在這個(gè)方法里面調(diào)用 setState 改變狀態(tài)，并且不會(huì)導(dǎo)致額外調(diào)用一次 render。

render()

組裝生成這個(gè)組件的 HTML 結(jié)構(gòu)（使用原生 HTML 標(biāo)簽或者子組件），也可以返回 null或者 false，這時(shí)候 ReactDOM.findDOMNode(this) 會(huì)返回 null。

componentDidMount()

componentDidMount()在掛載結(jié)束之后馬上被調(diào)用。只會(huì)在裝載完成之后調(diào)用一次，在 render 之后調(diào)用，從這里開始可以通過(guò) ReactDOM.findDOMNode(this) 獲取到組件的 DOM 節(jié)點(diǎn)。

更新組件觸發(fā)

componentWillReceiveProps(object nextProps)

當(dāng)一個(gè)掛載的組件接收到新的props的時(shí)候被調(diào)用。該方法應(yīng)該用于比較this.props和nextProps，然后使用this.setState()來(lái)改變state。

在初始化渲染的時(shí)候，該方法不會(huì)調(diào)用。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

shouldComponentUpdate(object nextProps, object nextState): boolean

當(dāng)組件做出是否要更新DOM的決定的時(shí)候被調(diào)用。

在接收到新的 props或者 state，將要渲染之前調(diào)用。該方法在初始化渲染的時(shí)候不會(huì)調(diào)用，在使用 forceUpdate 方法的時(shí)候也不會(huì)。

如果確定新的 props 和 state 不會(huì)導(dǎo)致組件更新，則此處應(yīng)該返回 false。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

如果 shouldComponentUpdate 返回 false，則 render() 將不會(huì)執(zhí)行，直到下一次 state 改變。

componentWillUpdate(object nextProps, object nextState)

在更新發(fā)生之前被調(diào)用。你可以在這里調(diào)用this.setState()。

componentDidUpdate(object prevProps, object prevState)

在更新發(fā)生之后調(diào)用。

卸載組件觸發(fā)

componentWillUnmount()

在組件移除和銷毀之前被調(diào)用。清理工作應(yīng)該放在這里。比如無(wú)效的定時(shí)器，或者清除在 componentDidMount 中創(chuàng)建的 DOM 元素。

裝載的方法

getDOMNode()

DOMElement可以在任何掛載的組件上面調(diào)用，用于獲取一個(gè)指向它的渲染DOM節(jié)點(diǎn)的引用。

forceUpdate()

當(dāng)你知道一些很深的組件state已經(jīng)改變了的時(shí)候，可以在該組件上面調(diào)用，而不是使用this.setState()。

完整實(shí)例展示

var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         
            
            
         
      );
    }
})

var Content = React.createClass({
  componentWillMount:function() {
      console.log("Component WILL MOUNT!")
  },
  componentDidMount:function() {
       console.log("Component DID MOUNT!")
  },
  componentWillReceiveProps:function(newProps) {
        console.log("Component WILL RECIEVE PROPS!")
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log("Component WILL UPDATE!");
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log("Component DID UPDATE!")
  },
  componentWillUnmount:function() {
         console.log("Component WILL UNMOUNT!")
  },
  render: function () {
    return (
      
        {this.props.myNumber}
      
    );
  }
});

ReactDOM.render(
   
      ,
  document.getElementById("example")
);

總結(jié)

生命周期	調(diào)用次數(shù)	能否使用setSate()
getDefaultProps	1(全局調(diào)用一次)	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	>=0	否
componentWillUnmount	1	否

云服務(wù)器 GPU云服務(wù)器生命周期軟件生命周期生命周期理論頁(yè)面生命周期

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/80371.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

anquan

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

torch轉(zhuǎn)tensorflow

閱讀 1768·2023-04-26 01:44
POSTMAN自動(dòng)化接口測(cè)試個(gè)人學(xué)習(xí)記錄

閱讀 1211·2021-11-12 10:34
追風(fēng)零隊(duì)2021硬件總結(jié)

閱讀 1578·2021-09-09 09:33
前端面試每日3+1——第117天

閱讀 1729·2019-08-30 15:44
嗶哩嗶哩2018校招前端筆試

閱讀 2892·2019-08-30 13:49
前端面試常見題型

閱讀 2190·2019-08-29 15:26
一文掌握前端面試瀏覽器相關(guān)知識(shí)點(diǎn)

閱讀 943·2019-08-26 13:30
使用apache的HttpClient進(jìn)行http通訊，隱藏的HTTP請(qǐng)求頭部字段是如何自動(dòng)被添加的

閱讀 1409·2019-08-23 18:15

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！