react開發教程(五)生命週期

在組件的整個生命週期中,隨着該組件的props或者state發生改變,其DOM表現也會有相應的變化。一個組件就是一個狀態機,對於特定地輸入,它總返回一致的輸出。react

一個React組件的生命週期分爲三個部分:實例化、存在期和銷燬時。es6

實例化

當組件在客戶端被實例化,第一次被建立時,如下方法依次被調用:segmentfault

  • getDefaultProps 設置屬性的默認值。 es6對應 deftaultProps
  • getInitialState 用來初始化每一個實例的state。 es6 對應 constructor函數中的this.state
  • componentWillMount 渲染前
  • render 渲染
  • componentDidMount 渲染後

當組件在服務端被實例化,首次被建立時,如下方法依次被調用:函數

一、getDefaultProps
二、getInitialState
三、componentWillMount
四、renderthis

componentDidMount 不會在服務端被渲染的過程當中調用。code

getDefaultProps

對於每一個組件實例來說,這個方法只會調用一次,該組件類的全部後續應用,getDefaultPops 將不會再被調用,其返回的對象能夠用於設置默認的 props(properties的縮寫) 值。component

getInitialState

對於組件的每一個實例來講,這個方法的調用有且只有一次,用來初始化每一個實例的 state,在這個方法裏,能夠訪問組件的 props。每個React組件都有本身的 state,其與 props 的區別在於 state只存在組件的內部,props 在全部實例中共享。對象

getInitialState 和 getDefaultPops 的調用是有區別的,getDefaultPops 是對於組件類來講只調用一次,後續該類的應用都不會被調用,而 getInitialState 是對於每一個組件實例來說都會調用,而且只調一次。教程

每次修改 state,都會從新渲染組件,實例化後經過 state 更新組件,會依次調用下列方法:
一、shouldComponentUpdate
二、componentWillUpdate
三、render
四、componentDidUpdate生命週期

可是不要直接修改 this.state,要經過 this.setState 方法來修改。

componentWillMount

該方法在首次渲染以前調用,也是再 render 方法調用以前修改 state 的最後一次機會。

render
該方法會建立一個虛擬DOM,用來表示組件的輸出。對於一個組件來說,render方法是惟一一個必需的方法。render方法須要知足下面幾點:

  • 只能經過 this.props 和 this.state 訪問數據(不能修改)
  • 能夠返回 null,false 或者任何React組件
  • 只能出現一個頂級組件,不能返回一組元素
  • 不能改變組件的狀態
  • 不能修改DOM的輸出

render方法返回的結果並非真正的DOM元素,而是一個虛擬的表現,相似於一個DOM tree的結構的對象。react之因此效率高,就是這個緣由。

componentDidMount

該方法不會在服務端被渲染的過程當中調用。該方法被調用時,已經渲染出真實的 DOM,能夠在該方法中經過 this.refs 訪問到真實的 DOM。

class App extends Component {
  static defaultProps = {
    name:"默認值"
  }

  constructor(props) {
    super(props);
    this.state = {
        num : 0
    };
    this.addNum = this.addNum.bind(this);
  }

  addNum(e) {
    e.preventDefault();
    var num = ++this.state.num;
    this.setState({
        num:num
    })
  }

  componentWillMount() {
    this.setState({
        num:10
    })
  }
  render() {

    return (
      <div className="App">
        <div className="App-header" ref="header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React{this.props.name}</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={this.addNum}>{this.state.num}</button>
      </div>
    );
  }

  componentDidMount() {
    console.log(this.refs.header)
  }
}

須要注意的是,因爲 this.refs.[refName] 屬性獲取的是真實 DOM ,因此必須等到虛擬 DOM 插入文檔之後,才能使用這個屬性,不然會報錯。

存在期

此時組件已經渲染好而且用戶能夠與它進行交互,好比鼠標點擊,手指點按,或者其它的一些事件,致使應用狀態的改變,你將會看到下面的方法依次被調用

  • componentWillReceiveProps props在父組件改變時執行
  • shouldComponentUpdate 若是你肯定組件的 props 或者 state 的改變不須要從新渲染,能夠經過在這個方法裏經過返回 false 來阻止組件的從新渲染,返回 `false 則不會執行 render 以及後面的 componentWillUpdate,componentDidUpdate 方法
  • componentWillUpdate 這個方法和 componentWillMount 相似,在組件接收到了新的 props 或者 state 即將進行從新渲染前,componentWillUpdate(object nextProps, object nextState) 會被調用,注意不要在此方面裏再去更新 props 或者 state。
  • render
  • componentDidUpdate 這個方法和 <kdb>componentDidMount</kdb> 相似,在組件從新被渲染以後,componentDidUpdate(object prevProps, object prevState) 會被調用。能夠在這裏訪問並修改 DOM。

銷燬時

componentWillUnmount

每當React使用完一個組件,這個組件必須從 DOM 中卸載後被銷燬,此時 componentWillUnmout 會被執行,完成全部的清理和銷燬工做,在 componentDidMount 中添加的任務都須要再該方法中撤銷,如建立的定時器或事件監聽器。

當再次裝載組件時,如下方法會被依次調用:

一、getInitialState
二、componentWillMount
三、render
四、componentDidMount

createClass和ES6的不一樣

ES6 class
static propTypes
static defaultProps
constructor (this.state)

對應createClass
propTypes
getDefaultProps
getInitialState

總體流程

ES6 class

static propTypes props值的類型檢查 static defaultProps 設置屬性的默認值
constructor ( this.state ) 初始化每一個實例的state

componentWillMount 該方法在首次渲染以前調用,也是再 render 方法調用以前修改 state 的最後一次機會。
componentDidMount 該方法被調用時,已經渲染出真實的 DOM,能夠在該方法中經過 this.refs 訪問到真實的
DOM。

componentWillUnmount 每當React使用完一個組件,這個組件必須從 DOM 中卸載後被銷燬,此時會被執行
componentWillReceiveProps props在父組件改變時執行 shouldComponentUpdate
若是你肯定組件的 props 或者 state 的改變不須要從新渲染,能夠經過在這個方法裏經過返回 false 來阻止組件的從新渲染,返回
`false 則不會執行 render 以及後面的 componentWillUpdate,componentDidUpdate 方法

componentWillUpdate 這個方法和 componentWillMount 相似,在組件接收到了新的 props 或者
state 即將進行從新渲染前, componentDidUpdate 這個方法和
<kdb>componentDidMount</kdb> 相似,在組件從新被渲染以後,會被調用。能夠在這裏訪問並修改 DOM。 render
渲染組件

上一篇:react開發教程(四)React數據流
下一篇:react開發教程(六)React與DOM

相關文章
相關標籤/搜索