从零学React Native之12 组件的生命周期

简介: 一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。ES6语法和之前的ES5语法有所变化,本篇文章是根据ES6语法写的。在ES5语法中,有getDefaultPropTypes这个函数,这个函数在组件被创建时,调用一次,它的返回值成为了this

一个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
这里写图片描述

相关文章
|
12月前
|
前端开发 JavaScript
React 组件生命周期
React 组件生命周期
103 0
|
11月前
|
前端开发 JavaScript
react 组件的生命周期
React组件的生命周期包括从创建到销毁的各个阶段,如挂载(mounting)、更新(updating)和卸载(unmounting)。每个阶段都有特定的方法,用于控制组件的行为和状态,确保高效、有序地渲染和管理UI。
|
前端开发 JavaScript 开发者
介绍一下React生命周期
介绍一下React生命周期
208 9
|
前端开发 JavaScript
React 组件的生命周期阶段详解
【8月更文挑战第30天】
187 7
|
前端开发 API UED
React组件生命周期详解
【9月更文挑战第4天】在React应用开发中,掌握组件生命周期对于管理状态和属性至关重要,并能有效提升应用性能。本文详细介绍了React组件生命周期的三个阶段:挂载、更新和卸载,并通过代码示例展示了如何避免状态更新导致的死循环及优化网络请求等问题,帮助开发者构建更高效、可维护的应用。
262 3
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
246 5
|
12月前
|
存储 前端开发 JavaScript
深入理解React组件的生命周期与Hooks
【10月更文挑战第7天】深入理解React组件的生命周期与Hooks
498 0
|
前端开发 JavaScript 开发者
React生命周期方法完全指南:深入理解并高效应用每个阶段的钩子——从初始化到卸载的全方位解析
【8月更文挑战第31天】本文详细介绍了React组件生命周期方法,包括初始化、挂载、更新和卸载四个阶段的关键钩子。通过探讨每个阶段的方法,如`componentDidMount`和`componentWillUnmount`,帮助开发者在正确时机执行所需操作,提升应用性能。文章还提供了最佳实践,指导如何避免常见错误并充分利用最新钩子。
314 0
|
前端开发 JavaScript 开发者
React 中的生命周期方法是什么?
【8月更文挑战第31天】
189 0
|
前端开发 JavaScript 开发者
React 组件生命周期的详细描述
【8月更文挑战第24天】
171 0