一、什么是组件的⽣命周期?

1. 组件从创建到死亡它会经历⼀些特定的阶段。
2. React组件中包含⼀系列勾⼦函数(⽣命周期回调函数), 会在特定的时刻调⽤。
3. 我们在定义组件时，会在特定的⽣命周期回调函数中，做特定的⼯作。

二、React中的生命周期函数

 一. 挂载阶段：由ReactDOM.render触发--->初次渲染
  1)constructor()
  2)componentWillMount()
  3)render()
  4)componentDidMount()
  
  二.更新阶段：由组件内部this.setState()或父组件render触发
  1)componentWillReceiveProps() --- 组件第一次接收props不会触发，只有接收到新的改变才会触发
  2)shouldComponentUpdate()
  3)componentWillUpdate()
  4)render()    ---必须用到的
  5)componentDidUpdate()
   
  三.卸载组件：由ReactDOM.unmountComponent()触发
  1).componentWillMount()  ---一般在这个钩子中做收尾的事，例如：关闭定时器，取消订阅
  
  注：钩子函数执行顺序，按照上述排序自上而下执行。
 
  常用的生命周期钩子：
  1.render()    ---必须用到的
  2.componentDidMount() ---一般在这个钩子中做一些初始化的事，例如开启定时器，发送网络数据请求，订阅消息
  3.componentWillMount()  ---一般在这个钩子中做收尾的事，例如：关闭定时器，取消订阅
  

根据上面所述，生命周期可以分为三个阶段：挂载阶段、更新阶段、卸载阶段。下面将按照这三个阶段进行代码演示。
组件加载/卸载时调用的钩子函数:

class Demo extends React.Component {
    constructor(props){
      super(props)
      console.log('constructor');
    }
    state = {
      sum: 0
    }
    // 组件挂载之前的钩子
    componentWillMount(){
      console.log('componentWillMount');
    }
    // 组件挂载之后的钩子
    componentDidMount(){
      console.log('componentDidMount');
    }
    // 组件卸载之前的钩子
    componentWillUnmount(){
      console.log('componentWillUnmount');
    }
    removeNode = () => {
      ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    render() {
      console.log('render');
      const {sum} = this.state
      return (
        <div>
          <button onClick={this.removeNode}>点我卸载</button>
        </div>
      );
    }
}
ReactDOM.render(<Demo/>, document.getElementById('test'))

组件更新时调用的钩子函数:

class Demo extends React.Component {
    constructor(props){
      super(props)
      console.log('constructor');
    }
    state = {
      sum: 0
    }
    // 组件将要接收新的props的钩子 --- 第一次接收props的时候不会执行, 只有后来props更新了, 才会触发
    componentWillReceiveProps(props) {
        console.log('B --- componentWillReceiveProps', props)
    }
    // 控制组件更新的开关执行
    shouldComponentUpdate(){
      console.log('shouldComponentUpdate');
      return true
    }
    // 组件将要更新之前执行
    componentWillUpdate(){
      console.log('componentWillUpdate');
    }

    // 组件更新之后执行
    componentDidUpdate(){
      console.log('componentDidUpdate');
    }
    addNumber = () => {
        this.setState({num: ++this.state.sum})
    }
    render() {
      console.log('render');
      const {sum} = this.state
      return (
        <div>
          <h2>和为：{sum}</h2>
          <button onClick={this.addNumber}>点我+1</button>
        </div>
      );
   }
}
ReactDOM.render(<Demo/>, document.getElementById('test'))

三、其他相关操作

1.forceUpdate 强制更新

// 强制更新按钮的回调
force = () => {
    this.forceUpdate()
}

使用该函数强制更新组件时，将不触发-shouldComponentUpdate钩子函数

2.卸载组件

ReactDOM.unmountComponentAtNode(document.getElementById('test'))

使用ReactDOM提供的unmountComponentAtNode函数可以卸载组件