React08-生命周期函数（重点）
一、生命周期介绍
生命周期指的就是组件从创建到销毁的过程。
不管是Vue还是React都给我们提供了很多钩子函数。在不同阶段系统会执行某些函数。
如果你需要在指定的过程执行你想要的代码，用到生命周期钩子函数。
react的生命周期主要分为三个阶段
组件的挂载阶段：组件数据初始化，以及组件里数据渲染
组件运行阶段：这个整个生命周期最长的阶段，数据更新页面更新的过程
组件卸载阶段：组件卸载销毁。执行一些资源的清理工作
完整的生命周期图列
二、组件的挂载阶段
执行构造函数。
执行render进行页面加载
挂载完毕后执行componentDidMount通知你的代码
export default class LifeComp extends Component { // 组件正在初始化数据 constructor() { super(); console.log("step1:constructor"); } componentDidMount(){ console.log("step3:componentDidMount"); } render() { console.log("step2:render执行"); return ( <div>LifeComp</div> ) }} 复制代码componentDidMount:组件内容挂载完毕。
挂载成功后，我们可以执行一下的操作
获取DOM节点。
发送异步请求。将数据赋值state
设置定时器、延时器等功能
绑定一些全局的事件。比如eventbus，可以在这个地方开始绑定事件函数
三、组件运行阶段
提供了两个生命周期函数
shouldComponentUpdate:必须要提供返回值，true和false。
true：让当前页面 更新数据，render方法会执行
false：阻止当前的操作去更新页面。
import React, { Component } from 'react'export default class LifeComp extends Component { shouldComponentUpdate(){ console.log("step4:shouldComponentUpdate"); return false } render() { console.log("step2:render执行"); return ( <div> <p>{this.state.username}</p> <button onClick={()=>this.setState({username:'xiaozhang'})}>点击修改</button> </div> ) }} 复制代码componentDidUpdate:当页面的数据更新完毕后再执行这个函数。
import React, { Component } from 'react'export default class LifeComp extends Component { // 更新完成后执行 componentDidUpdate(){ console.log("componentDidUpdate"); } render() { console.log("step2:render执行"); return ( <div> <p>{this.state.username}</p> <button onClick={()=>this.setState({username:'xiaozhang'})}>点击修改</button> </div> ) }} 复制代码四、组件卸载阶段
componentWillUnmount: 当组件卸载的时候默认就会执行这个钩子函数。
你可以再这个钩子函数中执行一些清理工作
import React, { Component } from 'react'export default class LifeParent extends Component { componentDidMount(){ console.log("LifeParent:componentDidMount"); } componentWillUnmount() { console.log("LifeParent:componentWillUnmount"); } render() { return ( <div>LifeParent</div> ) }} 复制代码销毁组件的时候，你可以再销毁函数里面关闭定时器
export default class LifeParent extends Component { componentDidMount(){ console.log("LifeParent:componentDidMount"); // 内存泄漏:代码中不用的变量,一直再内存里面无法被销毁. // 内存溢出:写了一个死循环,内存空间已经放不下数据.溢出 this.timmer = setInterval(()=>{ console.log(123); },1000) } componentWillUnmount() { console.log("LifeParent:componentWillUnmount"); clearInterval(this.timmer) } render() { return ( <div>LifeParent</div> ) }} 复制代码内存泄漏：当你的组件都已经销毁了，但是内存里面的某些变量依赖再运行。无法销毁。
作者：凯撒i
链接：https://juejin.cn/post/7169945104860971045