React 中的生命周期函数

前端开发作者： 2024-08-19 21:00:01

生命周期函数指的是组件在某一时刻会自动执行的函数 constructor可以看成一个类的普通生命周期函数，但不是react独有的生命周期函数 render() 是数据发生变化时会自动执行的函数，因此属

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;

import React,1)">;

class Counter extends Component{

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

    updateNum(){
        .setState({
            num:this.state.num+1
        })
    }

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

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

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

    componentDidUpdate(){
        console.log('componentDidUpdate'(
            <div onClick={this.updateNum}>hello react</div>
default Counter;

import React,1)">falsedefault Counter;

import React,1)">;

class Number extends Component{
    componentWillReceiveProps(){
        console.log('    child componentWillReceiveProps');
    }

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

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

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

    render(){
        (
            <div>{this.props.num}</div>
default Number;

import React,1)">;

class Counter extends Component{

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

    componentDidMount(){
        window.addEventListener("click",.clickFn);
    }

    componentWillUnmount(){
        window.removeEventListener("click",1)">.clickFn);
    }

    render(){
        console.log('render'(
            <div>
                <div>hello react</div>
            </div>
default Counter;

npm install axios --save

import axios from 'axios';

import React,1)">;
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'default Counter;