zoukankan      html  css  js  c++  java
  • 从零学React Native之12 组件的生命周期

    一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。

    ES6语法和之前的ES5语法有所变化,本篇文章是根据ES6语法写的。

    这里写图片描述

    在ES5语法中,有getDefaultPropTypes这个函数,这个函数在组件被创建时,调用一次,它的返回值成为了this.props的初始值。

    而ES6语法中,属性的类型和默认值声明不像ES5语法那样在组件定义内部声明,而是在组件定义的外部声明,所以声明周期函数没有了getDefaultPropTypes了,但是声明DefaultPropTypes也是在组件创建的时候调用一次。具体可以参考我的另一篇文章React Native声明属性和属性确认

    constructor 构造方法

    这个方法会在组件创建的时候调用一次。 这个方法中可以通过this.state初始化状态机(ES5是通过getInitialState方法初始化的)。 一般还在该方法中进行方法的bind(this)的操作。

          constructor(props) {
            super(props);
            // 初始状态
            this.state = {
                content: 'Content will appear here'
            };
              console.log("constructor")
          }

    componentWillMount

    在React Native组件的生命周期中,这个函数只会被执行一次。 它在初始渲染(render函数被React Native矿建调用执行)前被执行,当它执行完后,render函数会马上被React Native框架调用执行。

    如果在这个函数中通过setState函数修改状态机变量,RN框架不会额外执行渲染。

    如果子组件也有componentWillMount函数,会在父组件之后调用。

    如果需要从本地存储中读取数据用于显示,这个函数是一个不错的选择。

    componentDidMount

    在React Native组件的生命周期中,这个函数只会被执行一次,它在初始渲染完成后会马上被调用。在这之后开发者可以通过子组件的引用来访问,操作任何子组件。

    如果RN组件的子组件也有componentDidMount函数,并会在父组件的componentDidMount函数之前被调用。

    一般情况在这个方法中请求网络数据是一个不错的选择。

    componentWillReceiveProps

    这个函数原型是:

    componentWillReceiveProps(object nextProps)

    在React Native组件的初始渲染完成后,当React Native组件接收到新的props时,这个函数将被调用。 参数就是新的props。

    再次强电下,初次渲染时不会调用该方法,是故意设计这种机制的

    如果新的props会导致界面重新渲染,这个函数将在渲染前执行。如果函数中修改状态机,框架不会立刻执行状态机改变的渲染而是等函数执行完了一起渲染。

    shouldComponentUpdate

    这个函数的原型是:

    boolean shouldComponentUpdate(object nextProps, object nextState) 

    React Native组件的初始渲染执行完成后, RN组件接收到新的state或者props时这个函数会调用。

    函数需要返回一个布尔值,告诉React Native框架针对这次改变是否重新渲染, 如果返回false,不会渲染,相应的下面两个方法 componentWillUpdatecomponentDidUpdate函数不会调用。

    通过这个函数阻止无必要的重新渲染,是提高React Native应用程序性能的一大技巧。

    componentWillUpdate

    这个函数的原型是:

    componentWillUpdate(object nextProps, object nextState)

    初始渲染完成后,重新渲染前会调用这个函数。但是这个函数不能通过this.setState再次改变状态机变量的值。

    componentDidUpdate

    其函数原型是:

    componentDidUpdate(object preProps,object prevState)

    RN组件初始渲染完成后,RN框架在重新渲染RN组件完成后调用。
    参数是渲染前的props和 state

    componentWillUnmount

    函数原型:

    componentWillUnmount()

    在RN组件被卸载前,这个函数将被执行。

    更多精彩请关注微信公众账号likeDev
    这里写图片描述

  • 相关阅读:
    JVM总结-java基本类型
    JVM总结-虚拟机怎么执行字节码
    spring-BeanDefinition流程源码分析
    spring-BeanFactory源码解析
    linux文件基本权限-基本权限的修改
    Spring-IoC容器初始化流程源码分析
    spring-AOP
    JavaScript笔记 第十六章 匿名函数和闭包
    C# 指针(unsafe与fixed的使用)
    devenv.exe
  • 原文地址:https://www.cnblogs.com/hehe520/p/6329873.html
Copyright © 2011-2022 走看看