React 18 系统精讲（六）类组件生命周期详解

react生命周期仅限于类组件使用（函数组件没有生命周期，引入的是hooks钩子），常见声明周期主要分为初始化、更新和销毁

初始化

在组件创建好dom元素，挂载进页面时调用 componentDidMount

比如案例：

componentDidMount() { //组件初始化完成挂在到页面时执行的钩子
    fetch ("https://jsonplaceholder.typicode.com/users")  //获取api假数据  此时获取到的数据是promise格式，需转化成json格式
    .then (response => response.json())   //将promise格式转换成json格式
    .then ((data) => this.setState( {robotGallery: data} )) //将data值赋值给robotGallery
}

componentWillMount()
时机：组件被挂载到浏览器前，这时DOM树（html模板）已经创建完成（但没有渲染，这是DOM树中只有{}占位符）
作用：此时可以访问this.state和方法，当DOM树创建完毕后，会触发这个函数
对创建好的DOM树进行渲染，将数据或方法渲染上去

compontDidMount()
时机：组件被挂载到浏览器后，这是DOM树已经创建完成
作用：此时可以访问this.state和方法（那么以下的钩子函数都可以访问this.state和方法），当DOM树渲染完毕后，会触发这个函数
将DOM树挂载到浏览器上

componentWillReceiveProps()
时机：组件接收props数据前
作用：在接收到props数据更新后触发

shouldComponentUpdate()
时机：组件接收到新的state或props，判断是否更新
作用：在新的state或props改变后，会触发这个函数，此时已经在内存中新建了一个虚拟DOM树，但访问的还是浏览器上的旧DOM树，只有return true才会将新建一个新的DOM树
根据返回值判断是否将新的DOM树进行渲染

componentWillUpdate()
时机：新的组件更新到浏览器前
作用：在新的DOM树渲染完毕后，会触发这个函数
对新的DOM树进行渲染

componentDidUpdate()
时机：新的组件更新到浏览器后
作用：新的DOM树已经挂载到浏览器上后，会触发这个函数，将新的DOM树挂载到浏览器上，这里可能用到diff算法
将新的DOM树挂载到浏览器上

componentWillUnmount()
时机：组件销毁前
作用：在组件被销毁前会触发这个函数，
做好被销毁的准备