白话 React 生命周期

效果如下图所示：

React 生命周期一般分为三个重要阶段，当然大家也要熟悉其中的几个重要方法，并了解他们之间的先后顺序，总结下来如下所示：

React官方文档：https://zh-hans.reactjs.org/

react的生命周期图谱https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

1> 第一次初始化渲染显示：ReactDOM.render()
.constructor():创建对象初始化state
.componentWillUnmount():将要插入回调
.render() ：用于插入虚拟DOM 回调
.componentDidMount()：已经插入回调
.组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

2>每次更新state ：this.setState()
.componmentWillUpdate()：将要更新回调
.render() ：更新（重新渲染)
.componmentDidUpdate()：已经更新回调
3> 移除组件：ReactDOM.unmountComponentAtNode(containerDom)
.componentWillUnmount():组件将要被移除回调
.在此处完成组件的卸载和数据的销毁。
.clear你在组建中所有的setTimeout,setInterval
.移除所有组建中的监听 removeEventListener
.有时候我们会碰到这个warning

老规矩，不多BB 先上代码，大牛请绕道，跟我一样的小白请仔细读代码研究

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';


class Life extends React.Component {
  constructor(props) {
    super(props)
   
    //初始化状态
    this.state = {
      opacity: 1
    }
  }

  //执行一次，该方法为组件的自身方法  初始化方法
  componentDidMount(){
    //启动循环定时器
    this.IntervalId = setInterval(function(){
      let {opacity} = this.state
      opacity -= 0.1
      if(opacity<=0){
        opacity=1
      }
      this.setState({opacity})
    }.bind(this),200)
  }


 //  一般前端有两种定时器    延时定时器  循环定时器  本次使用的是循环定时器
  //也是调用一次，销毁定时器的方法
  componentWillUnmount=()=>{
    //清理定时器
    clearInterval(this.IntervalId)
  }

  //卸载定时器
  distroyComponment=()=>{
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }


  render() {
    const {opacity}=this.state
    // 此时如果不清除定时器，容易造成内存泄露
    console.log("定时器在执行了......."); 
    return (
      <div>
       <h2 style={{opacity: opacity}}>{this.props.msg}</h2>
       <button onClick={this.distroyComponment}>不活了</button>
      </div>
    )
  }
}

ReactDOM.render(
  <Life msg="react太难了!"/>,
  document.getElementById('root')
);

你懂的越多，你不懂的就越多，希望对同样学习的小伙伴有所帮助
本Demo来自B站尚硅谷 有需要学习的请移步：
https://www.bilibili.com/video/BV184411x7F9?p=15