精华内容
下载资源
问答
  • React、react生命周期react生命周期运行过程 1、创建阶段 constructor(){ super() console.log('执行构造函数') this.state={ num:1 } } UNSAFE_componentWillMount(){ co...

    React、react生命周期、react生命周期运行过程

    1、创建阶段

        constructor(){
            super()
            console.log('执行构造函数')
            this.state={
                num:1
            }
        }
        UNSAFE_componentWillMount(){
            console.log('即将渲染')
        }
        render(){
            console.log('渲染页面')
            return(
                <div>
                    <p>{this.state.num}</p>
                    <button onClick={()=>{
                        this.setState({
                            num:10
                        })
                    }}>按钮</button>
                </div>
            )
        }
        componentDidMount(){
            console.log('组件完成挂载,这个方法执行完,组件就开始运行了,可以在这里获取数据')
        }
    

    2、组件运行阶段:根据组件state跟props的改变,有选择性的触发0次或者多次

    componentWillReceiveProps(){
            console.log('此方法被触发,证明父组件为子组件传递了新的属性值(首次不会触发函数)')
        }
        shouldComponentUpdate(nextProps,nextState){//控制组件是否重新渲染
            console.log('组件是否需要被更新,此时,组件尚未被更新,但是,state 和 props 肯定是最新的')
            console.log(this.state.num)
            console.log(nextState)
            if(this.state.num===nextState.num){//性能优化,如果页面跟数据一致,就不更新了
                return false
            }else{
             return true
            }
        }
        componentWillUpdate(){
            console.log('组件将要被跟新,此时内存中的虚拟dom跟页面上的虚拟dom都是旧的')
        }
        //render:此时,又要重新根据最新的 state 和 props 重新渲染一颗内存中的虚拟 DOM 树,当 render 调用完毕,内存中的旧 DOM 树,已经被新 DOM 树替换了,此时页面还是旧的
        componentDidUpdate(){
            console.log('组件更新完毕,此时state跟内存dom页面dom都一致了')
        }
    

    3、组件销毁阶段,一辈子执行一次

    componentWillUnmount(){
            console.log('组件将要被销毁,此时还可以正常使用')
        }
    
    展开全文
  • react生命周期

    2020-04-09 17:55:38
    react生命周期

    react生命周期

    在这里插入图片描述

    展开全文
  • 主要介绍了react 生命周期,结合实例形式分析了react 生命周期基本原理、操作步骤与注意事项,需要的朋友可以参考下
  • React生命周期

    千次阅读 2015-11-26 13:15:14
    React生命周期

    React生命周期

    1.创建类

    当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其它的在这里描述的生命周期方法。

    var Lifecycle = React.createClass({})

    2.实例化

    在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

    getInitialState() 初始化state

    服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如果在这个方法内调用 setState,render() 将会感知到更新后的 state,将会执行仅一次,尽管 state 改变了。

    componentWillMount() 渲染之前处理业务

    render() 函数应该是纯粹的,也就是说该函数不修改组件 state,每次调用都返回相同的结果,不读写 DOM 信息,也不和浏览器交互。

    render() 渲染页面

    在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。在生命周期中的这个时间点,组件拥有一个 DOM 展现,你可以通过 this.getDOMNode() 来获取相应 DOM 节点。

    componentDidMount() 渲染之后执行,比如请求网络

    3.更新

    在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。
    用此函数可以作为 react 在 prop 传入之后, render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

    componentWillRecieveProps() props改变会回调

    在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。
    如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。

    shouldComponentUpdate() 是否执行更新周期

    在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。
    使用该方法做一些更新之前的准备工作。

    componentWillUpdate() 页面重新渲染之前处理逻辑

    渲染并返回一个虚拟DOM

    render: 渲染页面

    在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。
    使用该方法可以在组件更新之后操作 DOM 元素。

    componentDidUpdate: 重新渲染页面后执行

    4.销毁

    在DOM节点移除之后被调用,这里可以做一些相关的清理工作。

    componentWillUnmount() 销毁回调

    /**
     * 学习react生命周期
     * auth honaf
     */
    'use strict';
    
    var React = require('react-native');
    var {
      AppRegistry,
      StyleSheet,
      Text,
      View,
    } = React;
    var Util = require('ShopMall/views/Util');
    var className = 'Lifecycle==>';
    var Lifecycle = React.createClass({
      getDefaultProps(){
        Util.log(className+'getDefaultProps()');
      },
    
      getInitialState(){
        Util.log(className+'getInitialState()');
        return{
    
        }
      },
    
      componentWillMount(){
        Util.log(className+'componentWillMount()');
      },
    
      componentDidMount(){
        Util.log(className+'componentDidMount()');
      },
    
      componentWillReceiveProps(){
        Util.log(className+'componentWillReceiveProps()');
      },
    
      shouldComponentUpdate(){
        Util.log(className+'shouldComponentUpdate()');
      },
    
      componentWillUpdate(){
        Util.log(className+'componentWillUpdate()');
      },
    
      componentDidUpdate(){
        Util.log(className+'componentDidUpdate()');
      },
    
      render: function() {
        Util.log(className+'render');
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
          </View>
        );
      }
    });
    
    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
      }
    });
    
    module.exports = Lifecycle;

    *1直接运行之后我们可以看到,先创建后实例化
    打印结果:

    Lifecycle==>getDefaultProps()
    Lifecycle==>getInitialState()
    Lifecycle==>componentWillMount()
    Lifecycle==>render
    Lifecycle==>componentDidMount()

    *2当我们setState之后,这里强调一点,只要调用了setState,不管里面的值有没有更改,都会触发更新的生命周期(如下代码及打印)

    componentDidMount(){
        Util.log(className+'componentDidMount()');
        this.setState({loaded:true});
      },

    运行结果:

    Lifecycle==>getDefaultProps()
    Lifecycle==>getInitialState()
    Lifecycle==>componentWillMount()
    Lifecycle==>render
    Lifecycle==>componentDidMount()
    *Lifecycle==>shouldComponentUpdate()
    Lifecycle==>componentWillUpdate()
    Lifecycle==>render
    Lifecycle==>componentDidUpdate()*

    *3此时如果在shouldComponentUpdate中返回false,后续更新生命周期将不会执行,当然看自己需求,一般不建议这么干。(如下代码及打印)

    shouldComponentUpdate(){
        Util.log(className+'shouldComponentUpdate()');
        return false;
      },

    运行结果:

    Lifecycle==>getDefaultProps()
    Lifecycle==>getInitialState()
    Lifecycle==>componentWillMount()
    Lifecycle==>render
    Lifecycle==>componentDidMount()
    Lifecycle==>shouldComponentUpdate()

    *4我们添加一个子组件再来测试一下,现在头部导入子组件,然后再添加到view中,可以看到当头部require了子组件(LifecycleItem统称为子组件)时,子组件的getDefaultProps()执行了,然后就是当前组件创建,执行getDefaultProps,执行实例化周期,到render渲染之时再实例化子组件,然后再调用当前组件componentDidMount,其中有setState,必然会执行更新周期,由于shouldComponentUpdate中返回false,就终止了更新的周期。(如下代码及打印)

    var LifecycleItem = require('./LifecycleItem');
    
    render: function() {
        Util.log(className+'render');
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <LifecycleItem/>
          </View>
        );
      }

    ~~LifecycleItem==>getDefaultProps()
    Lifecycle==>getDefaultProps()
    Lifecycle==>getInitialState()
    Lifecycle==>componentWillMount()
    Lifecycle==>render
    ~~LifecycleItem==>getInitialState()
    ~~LifecycleItem==>componentWillMount()
    ~~LifecycleItem==>render
    ~~LifecycleItem==>componentDidMount()
    Lifecycle==>componentDidMount()
    Lifecycle==>shouldComponentUpdate()

    *5 此时我们将shouldComponentUpdate中返回true,可以看到当前组件更新render之时也触发了子组件的props change的周期,而实际上props我们没有做任何更改,这个大家一起讨论交流
    这里写图片描述

    shouldComponentUpdate(){
        Util.log(className+'shouldComponentUpdate()');
        return true;
    },

    打印结果:

    ~~LifecycleItem==>getDefaultProps()
    Lifecycle==>getDefaultProps()
    Lifecycle==>getInitialState()
    Lifecycle==>componentWillMount()
    Lifecycle==>render
    ~~LifecycleItem==>getInitialState()
    ~~LifecycleItem==>componentWillMount()
    ~~LifecycleItem==>render
    ~~LifecycleItem==>componentDidMount()
    Lifecycle==>componentDidMount()
    Lifecycle==>shouldComponentUpdate()
    Lifecycle==>componentWillUpdate()
    Lifecycle==>render
    ~~LifecycleItem==>componentWillReceiveProps()
    ~~LifecycleItem==>shouldComponentUpdate()
    ~~LifecycleItem==>componentWillUpdate()
    ~~LifecycleItem==>render
    ~~LifecycleItem==>componentDidUpdate()
    Lifecycle==>componentDidUpdate()

    展开全文
  • React 生命周期

    2019-04-16 23:06:45
    学习React生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 组件初始化时有渲染之前 开始渲染,渲染之后生命周期,当我们...

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

    学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助.

    React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 

    组件初始化时渲染之前 开始渲染渲染之后生命周期,当我们要修改组件时才会触发更新的生命周期,顺序依次为确认是否修改(true or false)修改之前开始渲染修改之后,最后为销毁的生命周期,在组件销毁时触发

    App.js组件

    import React, { Component } from 'react';
    
    //导入axios
    import Life from "./Life";
    
    class App extends Component {
      constructor(props){
        super(props)
        this.state={
          isshow:"true"
        }
      }
      showbtn=()=>{
      this.setState({
        isshow:!this.state.isshow
      })
      }
      render() {
        return (
          <div className="App">
           {
              this.state.isshow?<Life/>:""
            }
           <button onClick={this.showbtn}>isshow</button>
       
          </div>
        );
      }
    }
    
    export default App;
    

    Life.js组件 

    import React,{Component} from "react"
    class Life extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                msg:"我是修改之前的值"
             };
        }
        //修改值
        setmsg=()=>{
           this.setState({
               msg:"我是修改之后的值"
           })
        }
            //继承了组件的生命周期----就是方法
    
        //渲染之前
        componentWillMount(){
            console.log("渲染之前");
        }
        
        //渲染完成之后
        componentDidMount(){
            console.log("渲染之后");
        }
    
    
        // 确认是否修改
        shouldComponentUpdate(){
            return true
        }
    
        //修改之前 
        componentWillUpdate(){
            console.log("修改之前")
        }
     
        //修改之后
        componentDidUpdate(){
            console.log("修改之后")
        }
    
        //一个组件要从父组件接收值
        //如果这个组件是第一次存在于这个中,不会执行
        //如果这个组件之前已经存在父组件中,才会执行
        //卸载 生命周期
        componentWillUnmount(){
            console.log("卸载")
        }
    
    
        //props  的值放生改变的时候调用的
        componentWillReceiveProps(){        
        }
    
        //开始渲染
        render() {
            console.log("开始渲染")
            return (         
                <div>             
                    Life
                    <button onClick={this.setmsg}>开始修改值</button>
                </div>
            );
        }
    }
    
    export default Life;

    生命周期函数的使用场景

    1.提升性能,避免组件进行无用的render操作

    当父组件内容改变时,避免子组件一直进行无用的render操作

      shouldComponentUpdate(nextProps,nextState){
            if(nextProps.content!== this.props.content){
                return true
            }else{
                return false
            }
    
        }
      render() {
            const {content}=this.props;
            console.log("render")
            return (
              
                <div onClick={this.handleClick}>{content}</div>
            );
        }

    2.发送ajax请求,只渲染一次

    componentDidMount(){}

     

    展开全文
  • 本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 在最初学习react的过程中,我对react生命周期没有足够的重视,使得我在开发过程中遇到了很多问题。弄懂react的声明周期,可以让你的代码更加高效,更加优美。 什么是生命周期函数? 生命周期函数(钩子函数)...
  • React生命周期图示

    千次阅读 2016-09-02 09:42:19
    react 生命周期
  • React 生命周期.pdf

    2021-09-14 13:39:30
    React 生命周期.pdf
  • React生命周期详解

    千次阅读 2017-09-13 14:25:28
    React生命周期详解React严格定义了组件的生命周期会经历如下三个过程: 装载过程(Mount),组件第一次在DOM树渲染的过程。 更新过程(Update),当组件被重新渲染的过程。 卸载过程(Unmount),组件重DOM树中删除...
  • React 生命周期详解

    2019-08-11 22:39:29
    React 生命周期详解 https://www.jianshu.com/p/514fe21b9914该博客写的很详细,推荐阅读 这里只放里面的两张图,详情请看上面链接 React v16.0前的生命周期 React v16.4 的生命周期 ...
  • 主要介绍了React生命周期原理与用法,结合实例形式总结分析了react生命周期原理、用法及相关注意事项,需要的朋友可以参考下
  • 交互式React生命周期方法图
  • react 生命周期

    千次阅读 2018-09-04 17:35:56
    生命周期函数:到某一时刻组件会自动调用执行的函数。 上图的分析: (1):constructor 是第一个执行的,在里面执行的是初始化,例如state跟props的赋值,可以理解为一个周期函数,是es6语发中自带的一个函数,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,832
精华内容 14,332
关键字:

react生命周期最新