欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React 中的生命周期函数

程序员文章站 2022-06-28 18:22:48
生命周期函数指的是组件在某一时刻会自动执行的函数 constructor可以看成一个类的普通生命周期函数,但不是react独有的生命周期函数 render() 是数据发生变化时会自动执行的函数,因此属于react的生命周期函数 mounting只在第一次渲染时会执行 import React,{Co ......

生命周期函数指的是组件在某一时刻会自动执行的函数

constructor可以看成一个类的普通生命周期函数,但不是react独有的生命周期函数

render() 是数据发生变化时会自动执行的函数,因此属于react的生命周期函数

React 中的生命周期函数

 

 

mounting只在第一次渲染时会执行

import react,{component} from 'react';

class counter extends component{

    constructor(props){
        super(props);
        console.log('constructor');
    }

    componentwillmount(){
        console.log('componentwillmount');
    }

    componentdidmount(){
        console.log('componentdidmount');
    }

    render(){
        console.log('render');
        return(
            <div>hello react</div>
        )
    }
}

export default counter;

React 中的生命周期函数

 

 

可以看到代码有提示:componentwillmount has been renamed, and is not recommended for use.

这是因为react 16.9包含了一些新特性、bug修复以及新的弃用警告

unsafe 生命周期方法重命名为:

componentwillmount → unsafe_componentwillmount

componentwillreceiveprops → unsafe_componentwillreceiveprops

componentwillupdate → unsafe_componentwillupdate

在这种情况下,建议运行一个自动重命名它们的 codemod 脚本:

cd your_project
npx react-codemod rename-unsafe-lifecycles
(注意:这里使用的是 npx,不是 npm ,npx 是 node 6+ 默认提供的实用程序。)

运行 codemod 将会替换旧的生命周期,如 componentwillmount 将会替换为 unsafe_componentwillmount :

新命名的生命周期(例如:unsafe_componentwillmount)在 react 16.9 和 react 17.x 继续使用,但是,新的 unsafe_ 前缀将帮助具有问题的组件在代码 review 和 debugging 期间脱颖而出。(如果你不喜欢,你可以引入 严格模式(strict mode)来进一步阻止开发人员使用它 。)

当然按照上述操作完之后,我发现依然会报提示。于是目前能用的方法还是修改react版本

 

数据发生改变会触发updation

import react,{component} from 'react';

class counter extends component{

    constructor(props){
        super(props);
        this.updatenum=this.updatenum.bind(this);
        console.log('constructor');
        this.state={
            num:0
        }
    }

    updatenum(){
        this.setstate({
            num:this.state.num+1
        })
    }

    componentwillmount(){
        console.log('componentwillmount');
    }

    componentdidmount(){
        console.log('componentdidmount');
    }

    shouldcomponentupdate(){
        console.log('shouldcomponentupdate');
        return true;
    }

    componentwillupdate(){
        console.log('componentwillupdate');
    }

    componentdidupdate(){
        console.log('componentdidupdate');
    }

    render(){
        console.log('render');
        return(
            <div onclick={this.updatenum}>hello react</div>
        )
    }
}

export default counter;

React 中的生命周期函数

 

 

当shouldcomponentupdate返回值设置为false时,不会再触发updation

import react,{component} from 'react';

class counter extends component{

    constructor(props){
        super(props);
        this.updatenum=this.updatenum.bind(this);
        console.log('constructor');
        this.state={
            num:0
        }
    }

    updatenum(){
        this.setstate({
            num:this.state.num+1
        })
    }

    componentwillmount(){
        console.log('componentwillmount');
    }

    componentdidmount(){
        console.log('componentdidmount');
    }

    shouldcomponentupdate(){
        console.log('shouldcomponentupdate');
        return false;
    }

    componentwillupdate(){
        console.log('componentwillupdate');
    }

    componentdidupdate(){
        console.log('componentdidupdate');
    }

    render(){
        console.log('render');
        return(
            <div onclick={this.updatenum}>hello react</div>
        )
    }
}

export default counter;

React 中的生命周期函数

 

 

生命周期函数,也可以叫做钩子函数

props相关生命周期函数是针对子组件的

新建number.js

import react,{component} from 'react';

class number extends component{
    componentwillreceiveprops(){
        console.log('    child componentwillreceiveprops');
    }

    shouldcomponentupdate(){
        console.log('    child shouldcomponentupdate');
        return true;
    }

    componentwillupdate(){
        console.log('    child componentwillupdate');
    }

    componentdidupdate(){
        console.log('    child componentdidupdate');
    }

    render(){
        return(
            <div>{this.props.num}</div>
        )
    }
}

export default number;

React 中的生命周期函数

 

 

生命周期函数使用实例

给全局对象绑定事件

import react,{component} from 'react';

class counter extends component{

    clickfn(){
        console.log('window click');
    }

    componentdidmount(){
        window.addeventlistener("click",this.clickfn);
    }

    componentwillunmount(){
        window.removeeventlistener("click",this.clickfn);
    }

    render(){
        console.log('render');
        return(
            <div>
                <div>hello react</div>
            </div>
        )
    }
}

export default counter;

React 中的生命周期函数

 

 

接下来演示ajax请求

需要先安装axios

npm install axios --save

如果是只在开发环境运行,则使用--save-dev

 

然后引入axios

import axios from 'axios';

 

import react,{component} from 'react';
import axios from 'axios';

class counter extends component{

    componentdidmount(){
        axios.get("http://www.dell-lee.com/react/api/demo.json")
        .then(res=>{
            console.log(res.data);
        })
    }

    render(){
        console.log('render');
        return(
            <div>
                <div>hello react</div>
            </div>
        )
    }
}

export default counter;

React 中的生命周期函数