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 >

)

}

}