React組件生命周期

mgckid 發(fā)布于2019-08-20 10:42 / 1745人閱讀

摘要：組件生命周期此文章適合之前的版本，，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。每個(gè)生命周期階段調(diào)用的鉤子函數(shù)會(huì)略有不同。

React組件生命周期

此文章適合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。所有如果在React@17 發(fā)布之前，這篇文章還是適用的。
新的生命周期請(qǐng)看官網(wǎng) blog 文章 React v16.3.0: New lifecycles and context API。

前言

組件會(huì)隨著組件的 props 和 state 改變而發(fā)生變化，它的 DOM 也會(huì)有相應(yīng)的變化。

一個(gè)組件就是一個(gè)狀態(tài)機(jī)：對(duì)于特定的輸入，它總會(huì)返回一致的輸出。

React組件提供了生命周期的鉤子函數(shù)去響應(yīng)組件不同時(shí)刻的狀態(tài)，組件的生命周期如下：

實(shí)例化

存在期

銷毀期

鉤子函數(shù)是我們重點(diǎn)關(guān)注的地方，下面來詳細(xì)了解下生命周期下的鉤子函數(shù)調(diào)用順序和作用。每個(gè)生命周期階段調(diào)用的鉤子函數(shù)會(huì)略有不同。下面的圖片或許對(duì)你有幫助。

可以查看 CodePen 在線 Demo React 生命周期

實(shí)例化

首次調(diào)用組件時(shí)，有以下方法會(huì)被調(diào)用（注意順序，從上到下先后執(zhí)行）：

getDefaultProps

這個(gè)方法是用來設(shè)置組件默認(rèn)的 props，組件生命周期只會(huì)調(diào)用一次。但是只適合 React.createClass 直接創(chuàng)建的組件，使用 ES6/ES7 創(chuàng)建的這個(gè)方法不可使用， ES6/ES7 可以使用下面方式：

// es7
class Component {
  static defaultProps = {}
}
// 或者也可以在外面定義es6
// Compnent.defaultProps

getInitialState

設(shè)置state初始值，在這個(gè)方法中你已經(jīng)可以訪問到 this.props。 getInitialState 只適合 React.createClass 使用。使用 ES6 初始化state方法如下：

class Component extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      render: true,
    }
  }
}

或者這樣

class Component extends React.Component{
  state = {
      render: true
  }
  render(){return false;}
}

componentWillMount

改方法會(huì)在組件首次渲染之前調(diào)用，這個(gè)是在 render 方法調(diào)用前可修改 state 的最后一次機(jī)會(huì)。這個(gè)方法很少用到。

render

這個(gè)方法以后大家都應(yīng)該會(huì)很熟悉，JSX 通過這里，解析成對(duì)應(yīng)的虛擬 DOM，渲染成最終效果。格式大致如下：

class Component extends React.Component{
  render(){
    return (
       
    )
  }
}

componentDidMount

這個(gè)方法在首次真實(shí)的 DOM 渲染后調(diào)用（僅此一次）當(dāng)我們需要訪問真實(shí)的 DOM 時(shí)，這個(gè)方法就經(jīng)常用到。如何訪問真實(shí)的 DOM 這里就不想說了。當(dāng)我們需要請(qǐng)求外部接口數(shù)據(jù)，一般都在這里處理。

存在期

實(shí)例化后，當(dāng)props或者state發(fā)生變化時(shí)，下面方法依次被調(diào)用：

componentWillReceiveProps

沒當(dāng)我們通過父組件更新子組件 props 時(shí)（這個(gè)也是唯一途徑），這個(gè)方法就會(huì)被調(diào)用。

componentWillReceiveProps(nextProps){}

shouldComponentUpdate

字面意思，是否應(yīng)該更新組件，默認(rèn)返回 true。當(dāng)返回 false 時(shí)，后期函數(shù)就不會(huì)調(diào)用，組件不會(huì)在次渲染。

shouldComponentUpdate(nextProps,nextState){}

componentWillUpdate

字面意思組件將會(huì)更新，props 和 state 改變后必調(diào)用。

render

跟實(shí)例化時(shí)的render一樣，不多說

componentDidUpdate

這個(gè)方法在更新真實(shí)的 DOM 成功后調(diào)用，當(dāng)我們需要訪問真實(shí)的 DOM 時(shí)，這個(gè)方法就也經(jīng)常用到。

銷毀期

銷毀階段，只有一個(gè)函數(shù)被調(diào)用：

componentWillUnmount

沒當(dāng)組件使用完成，這個(gè)組件就必須從DOM中銷毀，此時(shí)該方法就會(huì)被調(diào)用。當(dāng)我們?cè)诮M件中使用了 setInterval，那我們就需要在這個(gè)方法中調(diào)用 clearInterval。如果手動(dòng)使用了 addEventListener 綁定了事件，也需要解綁事件。

參考文章

An Introduction to Life Cycle Events in?React.js