React生命周期

每個(gè)組件都有幾個(gè)“生命周期方法”，您可以在此過(guò)程中的特定時(shí)間覆蓋運(yùn)行代碼。前綴是will的方法在事情發(fā)生之前被調(diào)用，前綴的為did的方法在事情發(fā)生之后被調(diào)用。

• Mounting 當(dāng)創(chuàng)建組件的實(shí)例并將其插入到DOM中時(shí)，將調(diào)用這些方法：

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

• Updating 更新可能是傳入的參數(shù)或狀態(tài)的改變引起的。當(dāng)重新呈現(xiàn)組件時(shí)，將調(diào)用這些方法：

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

• Unmounting 當(dāng)從DOM中刪除組件時(shí)調(diào)用此方法：

  • componentWillUnmount()

我們將每個(gè)狀態(tài)的方法歸納一下可能會(huì)方便我們的記憶

三個(gè)狀態(tài)

• Mounting：已插入真實(shí) DOM
• Updating：正在被重新渲染
• Unmounting：已移出真實(shí) DOM

五種方法

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

兩種特殊狀態(tài)

• componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用
• shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用

那么我們插入節(jié)點(diǎn)的時(shí)候，組件都做了什么呢？

• constructor()
  • 構(gòu)造函數(shù)，是用來(lái)初始化這個(gè)組件的，可以讓組件的state根據(jù)傳入的props的值不同而不同，如果你的組件是一個(gè)靜態(tài)的，就可以不適用這個(gè)函數(shù)，下面是官網(wǎng)的例子

    constructor(props) {
        super(props);
        this.state = {
            color: props.initialColor
        };
    }
    

  • 注意這里面代碼的第二行到第五行只能在第一次初始化的時(shí)候調(diào)用，千萬(wàn)別指望這種寫(xiě)法能夠讓你時(shí)時(shí)的更新你的組件
• componentWillMount()
  • 當(dāng)你的組件要?插入DOM時(shí)立刻被調(diào)用，render()將在他的后面被調(diào)用
  • 這個(gè)方法?不會(huì)同步更新state
  • 這是唯一一個(gè)在服務(wù)器上調(diào)用的方法，?應(yīng)該使用constructor代替這個(gè)方法
• render()
  • 這個(gè)是必須出現(xiàn)在你的組件中的方法，也是我們最經(jīng)常用的方法
  • 在調(diào)用的時(shí)候應(yīng)該檢查this.state和this.props并且返回一個(gè)元素
  • 在這個(gè)組件中，不要更改組件的狀態(tài)，不要與?瀏覽器發(fā)生交互
  • 如果你什么也不想讓任何元素插入DOM，請(qǐng)reture false或return null
• componentDidMount()
  • 盡可能多的將網(wǎng)絡(luò)請(qǐng)求寫(xiě)在這里
  • 此方法中的設(shè)置狀態(tài)將觸發(fā)重新渲染。

接下來(lái)是更新節(jié)點(diǎn)

• componentWillReceiveProps()
  • 在組件接收到新的props前被調(diào)用，
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()
  //未完待續(xù)