精华内容
下载资源
问答
  • React生命周期函数

    2021-03-15 17:13:40
    React生命周期函数:在React中,生命周期函数指的是组件在某一时刻会自动执行的函数 React生命周期 基本上可以分为以下几个周期 Initialization:组件初始化过程 Mounting:页面挂载过程 Updating:更新过程 ...

    定义

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

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

    React生命周期

    基本上可以分为以下几个周期

    • Initialization:组件初始化过程
    • Mounting:页面挂载过程
    • Updating:更新过程
    • Unmounting:卸载过程

    React生命周期函数有哪些

    挂载:
    1.constructor():在初始化页面的过程中调用

    constructor(props) {
    	//...
    }
    

    2.componentWillMount():在组件已经被渲染到 DOM 前后运行

    // 挂在前自动执行
    	componentWillMount() {
    		console.log('componentWillMount');
    	}
    

    3.render():必须的钩子函数,不应该改变组件的状态

    // 渲染时自动执行
    	render() {
    		console.log('render')
    	}
    

    4.componentDidMount():在组件已经被渲染到 DOM 中后运行

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

    在这里插入图片描述

    组件更新:
    1.componentDidMount():挂载了的组件接收到新属性前调用。

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

    2.shouldComponentUpdate():在挂载了的组件属性变化和状态变化时调用,通过控制返回的boolean值告诉React是否重新渲染该组件。

    // 组件更新前 前自动执行
    	shouldComponentUpdate() {
    		console.log('shouldComponentUpdate');
    		return true;
    	}
    

    3.shouldComponentUpdate():接收到新属性或状态时在渲染shouldComponentUpdate后调用

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

    4.componentDidUpdate():在更新发生后立即被调用

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

    在这里插入图片描述
    卸载:
    1.componentWillUnmount():在组件从 DOM 中移除之前立刻被调用

    // 组件从页面中移除前自动执行
    	componentWillUnmount() {
    		console.log('componentWillUnmount');
    	}
    
    展开全文
  • react生命周期函数

    2018-11-16 17:45:32
    React生命周期函数: 组件加载之前,组件加载完成,以及组件更新数据,组件销毁。 触发的一系列的方法 ,这就是组件的生命周期函数 组件加载的时候触发的函数: constructor 、componentWillMount、 render ...

    React生命周期函数:

    组件加载之前,组件加载完成,以及组件更新数据,组件销毁。触发的一系列的方法 ,这就是组件的生命周期函数
    

    组件加载的时候触发的函数:

    constructor 、componentWillMount、 render 、componentDidMount
    

    组件数据更新的时候触发的生命周期函数:

    shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
    

    在父组件里面改变props传值的时候触发的:

    componentWillReceiveProps
    

    组件销毁的时候触发的:

    componentWillUnmount
    

    必须记住的生命周期函数:

    *加载的时候:
    componentWillMount、 render 、componentDidMount(dom操作)

    更新的时候:
    componentWillUpdate、render、componentDidUpdate

    *销毁的时候:
    componentWillUnmount

    以下是代码:

    import React, { Component } from 'react';
    
    class Lifecycle extends Component {
        constructor(props) {
    
            console.log('01构造函数');
            super(props);
            this.state = { 
    
                msg:'我是一个msg'
             };
        }  
    
        //组件将要挂载的时候触发的生命周期函数
        componentWillMount(){
    
            console.log('02组件将要挂载');
        }
        //组件挂载完成的时候触发的生命周期函数
        componentDidMount(){
    
            //dom操作放在这个里面    请求数据也放在这个里面
    
            console.log('04组件将要挂载');
        }
    
    
        //是否要更新数据  如果返回true才会执行更新数据的操作
        shouldComponentUpdate(nextProps, nextState){
            console.log('01是否要更新数据');
    
            console.log(nextProps);
    
            console.log(nextState);
    
            return true;
        }
    
        //将要更新数据的时候触发
    
        componentWillUpdate(){
            console.log('02组件将要更新');
        }
        //组件更新完成
        componentDidUpdate(){
            console.log('04组件数据更新完成');
        }
    
        // 你在父组件里面改变props传值的时候触发的
    
        componentWillReceiveProps(){
    
            console.log('父子组件传值,父组件里面改变了props的值触发的方法')
        }
    
        setMsg=()=>{
    
            this.setState({
    
                msg:'我是改变后的msg的数据'
            })
        }
    
        //组件销毁的时候触发的生命周期函数   用在组件销毁的时候执行操作
        componentWillUnmount(){
    
                console.log('组件销毁了');
        }
        render() {
            console.log('03数据渲染render');
           
            return (
                <div>
    
                    生命周期函数演示--- {this.state.msg}-----{this.props.title}
    
                    <br />
                    <br />
    
                    <button onClick={this.setMsg}>更新msg的数据</button>
                </div>
            );
        }
    }
    
    export default Lifecycle;
    
    展开全文
  • react 生命周期函数

    2019-06-21 15:14:26
    react 生命周期函数一共有三个阶段: Initialization:初始化阶段 Mounting: 挂载阶段 挂载阶段又包含三个阶段: componentWillMount : 在组件即将被挂载到页面的时刻执行。 render : 页面state或props发生变化时...

    react 生命周期函数一共有三个阶段:
    在这里插入图片描述

    Initialization:初始化阶段

    在这里插入图片描述

    Mounting: 挂载阶段

    挂载阶段又包含三个阶段:

    1. componentWillMount : 在组件即将被挂载到页面的时刻执行。
    2. render : 页面state或props发生变化时执行。
    3. componentDidMount : 组件挂载完成时被执行。

    在这里插入图片描述
    输出结果如下:
    在这里插入图片描述
    Updation: 更新阶段
    在这里插入图片描述
    输出的顺序:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    结果输出:
    在这里插入图片描述
    结论:
    凡是组件都有生命周期函数,所以子组件也是有的,并且子组件接收了props,这时候函数就可以被执行了。
    这个时候再预览,就会看到componentWillReceiveProps执行了。那现在可以总结一下它的执行时间了。

    子组件接收到父组件传递过来的参数,父组件render函数重新被执行,这个生命周期就会被执行。

    也就是说这个组件第一次存在于Dom中,函数是不会被执行的;
    如果已经存在于Dom中,函数才会被执行。

    Unmounting 消费阶段:
    组件删除掉的时候执行
    在这里插入图片描述

    展开全文
  • React 生命周期函数

    2018-10-16 11:56:16
    React 生命周期函数 Initialization (初始化) Mounting(挂载) Updation Unmounting setup componentWillMount props states componentWillUnmont props render co...

    React 生命周期函数

    Initialization (初始化) Mounting(挂载) Updation(更新)Unmounting()
    setupcomponentWillMountpropsstatescomponentWillUnmont(当这个组件即将被从页面中移除的时候,会被执行)
    propsrendercomponentWillReceivePropsshouldComponentUpdate
    statecomponentDidMount(组件被挂载到页面之后,自动被执行)shouldComponentUpdate(组件被更新之前,会自动被执行)componentWillUpdate
    \\componentWillUpdaterender\
    \\rendercomponentDidUpdate\
    \\componentDidUpdate(组件更新完之后,执行)\\

    componentWillReceiveProps

    1. 一个组件要从父组件接受参数
    2. 只要父组件的 render 函数被重新执行,子组件的这个生命周期函数就会被执行

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • vue生命周期函数 beforeCreate (创建前) created (创建后) ...react生命周期函数 初始化 1.getDefaultProps() getDefaultProps这种定义方式是用在你定义组件用的是React.createClass方式的 如果使用的是es6
  • react生命周期函数图详解 根据上图我们来说一下react中的生命周期函数 react中的生命周期函数主要分为三个阶段创建、更新、销毁 创建阶段 getDefaultProps() 此阶段为组件初始化,定义propTypes或者...
  • 关于react生命周期函数 本文均为小白总结,有错误欢迎大佬指出~ 生命周期函数是指在某一时刻组件自动执行 的函数 当state和props发生改变,render()函数执行;render函数实际上也是一种生命周期函数(因为自动被...
  • 13 React生命周期函数

    2020-06-12 00:26:25
    React生命周期函数: 组件加载之前,组件加载完成,组件更新数据,组件销毁 触发的一系列方法,这就是组件的生命周期函数 组件加载的时候触发的函数: constructor 、 componentWillMount 、 render 、 ...
  • 在学习react的过程中,生命周期函数是一个非常核心的概念,对react生命周期函数的了解就是对react工作机制的了解。而生命周期函数对于初学者而言不好记忆,故有此文作为理解和梳理生命周期函数这个知识点。 核心是...
  • 生命周期的三个阶段 ...常用的React生命周期函数 componentWillMount 第一次渲染之前 componentDidMount 第一次渲染之后 componentWillReceiveProps(nextProps){} 在组件接受新的props调用 componentWillReceive...
  • React中重要的部分就是生命周期函数。与其他框架不同,React生命周期函数不同阶段支持不同的状态和属性变化,从而进行重新渲染。不同周期执行不同的函数对于整个开发过程很重要。
  • react生命周期函数 生命周期函数是指在某一个时刻组件会自动执行的函数 1).初始化 Initialization 2) 挂载 Mounting 1.componentWillMount() 在组件即将被挂载到页面的时刻自动执行 2.render() 3.componentDidMount...
  • React生命周期函数 生命周期函数是指在某一个周期自动执行的函数。 React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 初始化...
  • 在使用React的时候, 我们的DOM...–React生命周期函数: –组件加载之前,组件加载王城,以及组件更新数据, 组件销毁 触发一些列的方法,这就是组件的生命周期函数 –组件加载完成的时候触发的函数: –construct...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,362
精华内容 10,144
关键字:

react生命周期函数