精华内容
下载资源
问答
  • react生命周期

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

    react生命周期

    在这里插入图片描述

    展开全文
  • react 生命周期

    2019-10-10 10:55:26
    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(){}

     

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,170
精华内容 13,668
关键字:

react生命周期