react生命週期es6

基本函數有

import React from 'react'

export default class MyClass extends React.Component {
  constructor(props){
    super(props)
    /**
     * 在這裏生命當前頁面的state
     */
    this.state = {

    }
  }
  /**
   * 第一次渲染前調用
   * 客戶端和服務的都調用
   * 只調用一次
   * 能夠調用this.setState
   */
  componentWillMount(){

  }
  /**
   * 在第一次渲染成功後調用
   * 能夠獲得dom節點 this.getDOMNode()
   * 客戶端調用
   * 服務端不調用
   * 只調用一次
   */
  componentDidMount(){

  }
  /**
   * 組件將要接收新的props執行
   * @param {*} nextProps 
   */
  componentWillReceiveProps(nextProps){

  }
  /**
   * 判斷組件是否應該從新渲染，默認是true
   * 通常返回true，這樣在更新props或state才能從新渲染、
   * 返回false將不能從新渲染
   */
  shouldComponentUpdate(nextProps, nextState){
    return true
  }
  /**
   * 組件將要從新渲染
   */
  componentWillUpdate(){

  }
  /**
   * 組件從新渲染完成
   * 客戶端有今生命週期方法
   * 服務器端沒有
   * 
   */
  componentDidUpdate(){

  }
  /**
   * 卸載組件
   * 把一些監聽事件卸載
   */
  componentWillUnmount(){

  }
  /**
   * 渲染組件
   * 必須有
   * 不能夠用this.setState方法
   */
  render(){
    return (
      <div></div>
    )
  }
}

 

import React from 'react'

export default class MyClass extends React. Component {

constructor( props){

super( props)

/**

* 在這裏生命當前頁面的state

*/

this. state = {

}

}

/**

* 第一次渲染前調用

* 客戶端和服務的都調用

* 只調用一次

* 能夠調用this.setState

*/

componentWillMount(){

}

/**

* 在第一次渲染成功後調用

* 能夠獲得dom節點 this.getDOMNode()

* 客戶端調用

* 服務端不調用

* 只調用一次

*/

componentDidMount(){

}

/**

* 組件將要接收新的props執行

* @param {*} nextProps

*/

componentWillReceiveProps( nextProps){

}

/**

* 判斷組件是否應該從新渲染，默認是true

* 通常返回true，這樣在更新props或state才能從新渲染、

* 返回false將不能從新渲染

*/

shouldComponentUpdate( nextProps, nextState){

return true

}

/**

* 組件將要從新渲染

*/

componentWillUpdate(){

}

/**

* 組件從新渲染完成

* 客戶端有今生命週期方法

* 服務器端沒有

*

*/

componentDidUpdate(){

}

/**

* 卸載組件

* 把一些監聽事件卸載

*/

componentWillUnmount(){

}

/**

* 渲染組件

* 必須有

* 不能夠用this.setState方法

*/

render(){

return (

< div ></ div >

)

}

}