React08-生命周期函数（重点）

React08-生命周期函数（重点）

一、生命周期介绍

生命周期指的就是组件从创建到销毁的过程。

不管是Vue还是React都给我们提供了很多钩子函数。在不同阶段系统会执行某些函数。

如果你需要在指定的过程执行你想要的代码，用到生命周期钩子函数。

react的生命周期主要分为三个阶段

1. 组件的挂载阶段：组件数据初始化，以及组件里数据渲染
2. 组件运行阶段：这个整个生命周期最长的阶段，数据更新页面更新的过程
3. 组件卸载阶段：组件卸载销毁。执行一些资源的清理工作

完整的生命周期图列

二、组件的挂载阶段

1. 执行构造函数。
2. 执行render进行页面加载
3. 挂载完毕后执行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:组件内容挂载完毕。

挂载成功后，我们可以执行一下的操作

1. 获取DOM节点。
2. 发送异步请求。将数据赋值state
3. 设置定时器、延时器等功能
4. 绑定一些全局的事件。比如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>        )    }}

内存泄漏：当你的组件都已经销毁了，但是内存里面的某些变量依赖再运行。无法销毁。