React基础之常见生命周期

1.constructor
执行时机：初始化组件时执行
作用：初始化state，为事件绑定this
2.render
执行时机：页面渲染时
作用：渲染页面
3.componentDidMount
执行时机：页面渲染完毕
作用：在页面渲染完毕时执行各种操作（例如请求固定数据）
4.componentDidUpdate
执行时机：组件更新时执行
例如：setState，props，forceUpdate()
5.componentWillUnmount
执行时机：组件卸载时执行
作用：执行清理工作(例如清除定时器)
6.执行顺序

贴下代码大家可以自己研究下

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
  state={
    count:0
  }
 constructor(){
   super()
   console.log("constructor");
 }
 componentDidMount(){
   console.log("componentDidMount");
 }
 componentDidUpdate(){
   console.log("componentDidUpdate");
 }
 addOne(){
   this.setState({
     count:this.state.count+1
   })
 }
  render(){
    console.log("render");
    return(
      <div>
        {this.state.count>=1?this.state.count:<Boom></Boom>}
        <button onClick={this.addOne.bind(this)}>+1</button>
      </div>
    )
  }
}
class Boom extends React.Component{
  componentDidMount(){
    this.time=setInterval(()=>{
      console.log(123);
    },500)
  }
  componentWillUnmount(){
    clearInterval(this.time)
    console.log("componentWillUnmount");
  }
  render(){
    return(
      <div>咔！</div>
    )
  }
}
ReactDOM.render(
<App></App>,
  document.getElementById('root')
);