react知识（二） 组件的生命周期【装载过程】

react定义了组件的生命周期，分为如下三个阶段：

• 装载过程（Mount）组件第一次再dom里面渲染过程
• 更新过程 （Update） 组件被重新渲染的过程
• 卸载过程 （Unmount）组件从dom里面删除的过程。

这节我们来仔细分析下装载过程：依次调用函数顺序
ES6的写法执行顺序，React.createClass的调用顺序跟这个不一样，这里不分析了

1. constructor
2. componentWillMount
3. render
4. componentDidMount

例子代码如下：

import React,{Component} from 'react';

class ClickCounter extends Component{
  constructor(prop){
    super(prop);
    this._handleClick=this._handleClick.bind(this);
    this.state={count:0};
  }
  _handleClick(){
    console.log(this);
    console.log(this.state)
    this.setState({count:this.state.count+1});
  }
  componentWillMount(){
    console.log("------------componentWillMount----------------1")
  }
  componentDidMount(){
    console.log("------------componentDidMount------------3")
  }
  render(){
    console.log("-------------render--------------2")
    return (
      <div>
        <button onClick={this._handleClick}>click Me</button>
        <h1>click Count{this.state.count}</h1>
      </div>
    )
  }
}

export default ClickCounter;

可以看浏览器Console的输出，大概如下：