React生命周期

React生命周期:
       在react中,生命周期函数指的是组件在某一时刻会自动执行的函数。
       constructor虽然也会自动执行,但不是react所独有的,可以理解成普通的类的生命周期函数
       render当数据发生变化时,render函数会被自动执行,他就是一个react生命周期函数
Initialization: 组件初始化的过程,设置属性和数据,没有用到任何生命周期函数

Mounting: 依次执行接下来的三个函数

  • componentWillMount(挂载前自动执行)
  • render(渲染时自动执行;组件更新之前 componentWillUpdate后 自动执行)
  • componentDidMount(挂载后自动执行)

       页面挂载的阶段,也就是说你有了数据之后,需要把数据对应的页面展示到html上面
       数据发生变化时,页面也会跟着变
       数据发生变化了,不会重新执行Mounting这个过程。React中,只有当你的组件第一次渲染到页面的时候,才会执行Mounting这个过程
Updation
当数据发生了变化,react会执行updation更新过程,即props和state更新生命周期

  • componentWillReceiveProps(props独有的props变化时执行。子组件接收父组件参数,父组件render重新执行那么子组件中的这个生命周期就会执行!)
  • shouldConpomentUpdate(组件更新前,必须要返回一个布尔值。当为false时,数据发生变化,页面不变,后面的生命周期函数不会执行,可以提高组件更新的性能,为true更新)
  • componentWillUpdate(组件更新之前 shouldComponentUpdate后 自动执行)
    render
    componentDidUpdate(组件更新前 render后 自动执行)

Unmounting

  • componentWillUnmount(组件从页面中移除前自动执行)

总结:
       首先,生命周期函数是针对组件来说的,不管是子组件还是父组件,都会有自己组件内部的生命函数。
       当组件第一次被渲染的时候,这个过程叫做Mounting(挂载的过程)会依次执行constructor–>componentWillMount–>render–>componentDidMount
       接着,如果你改变了一个组件的数据,假设改变的是父组件的数据,那么会依次执行shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate,假设子组件接收到的外部的props属性发生了变化,子组件会多执行一个生命函数componentWillReceiveProps
       最后,当一个组件从页面中,即将被移除的时候,componentWillUnmount会自动执行
父组件:

import React, { Component,Fragment } from 'react';
import Number from './number';
//在React中,生命周期函数指的是组件在某一时刻会自动执行的函数
//当数据发生变化时,render函数会被自动执行,他就是一个react生命周期函数
class Counter extends Component{
    handleClick(){
        const newNumber = this.state.number+1;
        this.setState({
            number:newNumber
        })
    }
    //可以理解成普通的类的生命周期函数
    constructor(props){
        console.log('constructor');
        super(props);
        this.handleClick=this.handleClick.bind(this);
        this.state={
            number:1
        }
    }
    
    // 挂载前自动执行
    componentWillMount(){
        console.log('componentWillMount')
    }

    //渲染时自动执行
    //组件更新之前 componentWillUpdate后 自动执行
    render(){
        console.log('render');
        return(
            <div>
                <div onClick={this.handleClick}>hello world</div>
                <Number count={this.state.number}/>
            </div>
            
        )
    }

    //挂载后自动执行
    componentDidMount(){
        console.log('componentDidMount');
    }

    //组件更新前 自动执行
    //存在的意义:假设有的时候数据发生变化,页面不需要改变,设置return为false
    //即数据发生变化,页面不变,,后面的生命周期函数都不会执行可以提高组件更新的性能
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        // 需要自动返回一个布尔值
        return true;
    }

    //组件更新之前 shouldComponentUpdate之后 自动执行
    componentWillUpdate(){
        console.log('componentWillUpdate');
    }
    
    //组件更新前 render后 自动执行
    componentDidUpdate(){
        console.log('componentDidUpdate');
    }

    //组件从页面中移除前自动执行
    componentWillUnmount(){
        console.log('componentWillUnmount');
    }
}
export default Counter;

子组件

import React,{Component} from 'react';

class Number extends Component{

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

    componentWillMount(){
        console.log('child componentWillMount');
    }
    render(){
        console.log('child render');
        return <div>{this.props.count}</div>
    }
    componentDidMount(){
        console.log('child componentDidMount');
    }
}
export default Number;
发布了32 篇原创文章 · 获赞 0 · 访问量 581
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览