News:三分天注定,七分靠打拼,爱拼才会赢!致力打造专业IT博客。如果你对本博客有任何意见或建议请联系作者,邮箱:blog@caokuan.cn

React Native 组件生命周期

逝水无痕 261 0 条

一个 React Native 组件从它被 React Native 框架加载,到最终被框架卸载,会经历一个完整的生命周期。这个生命周期大致可以分为3个阶段(实例化阶段、运行阶段、销毁阶段),其中最常接触的为实例化阶段,这个阶段负责组件的构建和展示的时间,需要我们根据几个函数的调用过程,控制好组件的展示和逻辑处理。

react-native.jpg

react-native.png

1. getDefaultProps

其函数原型为:

object getDefaultProps()

这个函数在组件被创建时调用一次。它的返回值会成为 this.props 的初始值。在这之后,如果父组件指定了组件的 props 中的某些值,这些值将会与 this.props 的初始值合并,如果有相同的键,父组件指定的键将覆盖初始值的键。

getDefaultProps() 返回的任何复杂对象都将会在组件的各个实例间共享,而不是每个实例拥有一个拷贝。

2. getInitialState

其函数原型为:

object getInitialState()

这个函数将在 React Native 组件被加载前调用一次。它的返回值会成为 this.state 的初始值。

3. componentWillMount

其函数原型为:

componentWillMount()

在 React Native 组件的生命周期中,这个函数只会被执行一次。它在初始渲染(render 函数被 React Native 框架调用执行)前被执行,当它执行之后,render 函数会马上被 React Native 框架调用执行。如果在这个函数里调用 setState 函数改变了某些状态机变量的值,React Native 框架不会执行渲染操作,而是等待这个函数执行完成后再执行初始渲染。

React Native 组件的子组件也有 componentWillMount 函数,并且会在父组件的 componentWillMount 函数之后被调用。

这个函数无参数并且不需要任何返回值。

如果开发者需要从本地存储中读取数据用于显示,那么在这个函数里进行读取是一个很好的时机。

4. componentDidMount

其函数原型为:

componentDidMount()

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

这个函数无参数并且不需要任何返回值。

如果 React Native 应用需要在程序启动显示初始界面后从网络侧获取数据,那么把从网络侧获取数据的代码放在这个函数里是一个不错的选择。

5. componentWillReceiveProps

其函数原型为:

componentWillReceiveProps(object nextProps)

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

如果新的 props 会导致界面重新渲染,这个函数将在渲染前被执行。在这个函数中,老的 props 可以通过 this.props 访问,新的 props 在传入的 object 中。如果在这个函数中通过调用 this.setState 函数改变某些状态机变量的值,React Native 框架不会执行对这些状态机变量改变的渲染,而是等 componentWillReceiveProps 函数执行完成后一起渲染。

6. shouldComponentUpdate

其函数原型为:

boolean shouldComponentUpdate(object nextProps, object nextState)

React Native 组件的初始渲染执行完成后,当 React Native 组件接收到新的 props 或者 state 时,这个函数将被调用。这个函数接收两个 object 参数,其中第一个是新的 props,第二个是新的 state。这个函数需要返回一个布尔值,告诉 React Native 框架针对这次改变,React Native 是否需要重新渲染本组件。如果次函数返回 false,React Native 将不会重新渲染本组件,相应的本组件的 componentWillUpdate 和 componentDidUpdate 函数也不会被调用。

React Native 组件默认的 shouldComponentUpdate 函数总是返回 true 值。如果开发者遵从了“视状态机变量为‘不可变的常量’”这个开发规则,那么开发者可以提供自己的 shouldComponentUpdate,在函数中比较新老版本的 state 和 props,判断是否需要进行重新渲染。

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

7. componentWillUpdate

其函数原型为:

componentWillUpdate(object nextProps, object nextState)

React Native 组件的初始渲染执行完成后,React Native 框架在重新渲染 React Native 组件前会调用这个函数。开发者可以在这个函数中为即将发生的重新渲染做一些准备工作,但开发者不能在这个函数中通过 this.setState 再次改变状态机变量的值。如果需要改变,则在 componentWillReceiveProps 函数中进行改变。

8. componentDidUpdate

其函数原型为:

componentDidUpdate(object preProps, object preState)

react Native 组件的初始渲染执行完成后,React Native 框架在重新渲染 React Native 组件后会调用这个函数。传入的两个参数是渲染前的 props 和 state。

9. componentWillUnmount

其函数原型为:

componentWillUnmount()

在 React Native 组件被卸载前,这个函数将被执行。这个函数没有参数。

如果 React Native 组件申请了某些资源或者订阅了某些消息,那么需要在这个函数中释放资源,取消订阅。

与本文相关的文章

发表我的评论
icon_mrgreen.gificon_neutral.gificon_twisted.gificon_arrow.gificon_eek.gificon_smile.gificon_confused.gificon_cool.gificon_evil.gificon_biggrin.gificon_idea.gificon_redface.gificon_razz.gificon_rolleyes.gificon_wink.gificon_cry.gificon_surprised.gificon_lol.gificon_mad.gificon_sad.gificon_exclaim.gificon_question.gif

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址