React Native组件(一)组件的生命周期

前言

React Native有很多组件比如Image、ListView等等,想要合理的使用组件,首先要先了解组件的生命周期。

1.概述

无论你是开发Android还是iOS,对于组件的生命周期一定不陌生,这是开发的基础。同样的React Native的组件也有生命周期,当应用启动,React Native在内存中维护着一个虚拟DOM,组件的生命周期就是指组件初始化并挂载到虚拟DOM为起始,到组件从虚拟DOM卸载为终结。生命周期的方法就是组件在虚拟DOM中不同状态的描述。

从上图所示,组件的生命周期分为三个阶段,分别是挂载(mounting)、更新(updating)和卸载(Unmounting),其中挂载和更新阶段都会调用rander方法进行绘制。下面对这三个阶段分别进行讲解。

2.挂载

挂载指的是组件的实例被创建并插入到DOM中,挂载会调用如下方法。

constructor

constructor是RN组件的构造方法,它在RN组件被加载前先被调用。当我们的组件继承自React.Component时,需要在构造方法中最先调用super(props)。如果不需要初始化state,则不需要实现构造方法。

在构造方法中初始化state,如下所示。

constructor(props) {super(props);this.state = {text: '构造方法'};}

componentWillMount

componentWillMount()

componentWillMount方法在挂载前被立即调用。它在render方法前被执行,因此,在componentWillMount方法中设置state并不会导致重新被渲染。它只会被执行一次,通常情况下,建议使用constructor方法来代替它。

rander

render()

该方法是必须的,一旦调用,则会去检查 this.props 和 this.state 的数据并返回一个 React 元素。render方法中不应该修改组件的props和state,因为render方法是“纯洁的”,这意味着每次调用该方法时都会返回相同的结果。render方法在更新阶段也会被调用,前提是shouldComponentUpdate方法返回true。

componentDidMount

componentDidMount()

componentDidMount方法在组件被挂载后立即调用,在render方法后被执行。开发者可以在这个方法中获取其中的元素或者子组件,需要注意的是,子组件的componentDidMount方法会在父组件的componentDidMount方法之前调用。如果需要从网络加载数据显示到界面上,在这里进行网络请求是一个不错的选择。在componentDidMount方法中设置state将会被重新渲染。

3.更新

改变props或者state时可以导致更新,当一个组件被重新渲染时,会调用如下方法。

componentWillReceiveProps

componentWillReceiveProps(nextProps)

componentWillReceiveProps方法会在挂载的组件接收到新的props时被调用,它接收一个Object类型参数nextProps,表示新的props。通常在这个方法中接收新的props值,并根据props的变化,通过调用 this.setState() 来更新组件state,this.setState()不会触发 render方法的调用。 在挂载的过程中,初始的props并不会触发调用componentWillReceiveProps方法,这个方法只会在组件中的props更新时被调用,另外,调用this.setState()也不会触发调用componentWillReceiveProps方法。

shouldComponentUpdate

boolean shouldComponentUpdate(nextProps, nextState)

当组件接收到新的props和state时,shouldComponentUpdate方法被调用,它接收两个Object参数,nextProps是新的props,nextState是新的state。 shouldComponentUpdate方法默认返回true,用来保证数据变化时,组件能够重新渲染。你也可以重载这个方法,通过检查变化前后props和state,来决定组件是否需要重新渲染。如果返回false,则组件不会被重新渲染,也不会调用本方法后面的componentWillUpdate和componentDidUpdate方法。

componentWillUpdate

componentWillUpdate(nextProps, nextState)

如果组件props或者state改变,并且此前的shouldComponentUpdate方法返回为 true,则会调用该方法。componentWillUpdate方法会在组件重新渲染前被调用,因此,可以在这个方法中为重新渲染做一些准备工作。需要注意的是,在这个方法中,不能使用 this.setState 来更改state,如果想要根据props来更改state,需要在componentWillReceiveProps方法中去实现,而不是在这里。

componentDidUpdate

componentDidUpdate(prevProps, prevState)

组件重新渲染完成后会调用componentDidUpdate方法。两个参数分别是渲染前的props和渲染前的state。这个方法也适合写网络请求,比如可以将当前的props和prevProps进行对比,发生变化则请求网络。

4.卸载

卸载就是从DOM中删除组件,会调用如下方法。

componentWillUnmount()

componentWillUnmount()

componentWillUnmount方法在组件卸载和销毁之前被立即调用。可以在这个方法中执行必要的清理工作,比如,关掉计时器、取消网络请求、清除组件装载中创建的DOM元素等等。组件的生命周期就讲到这里,这个系列的后续文章会介绍React Native的常用组件,敬请期待。

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2017-06-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

C#基础知识回顾--委托事件

在上一篇看到他我一下子就悟了---委托,被人狂喷。说写的太空,没有什么内容之类的。所以准备在这里重写下,不过还是按着以前的方式尽量简单的写。这里我们以打篮球为...

35940
来自专栏朱慕之的博客

UIWebView与JS的交互

要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的HTML。除此之外,还需要禁用获取的HTML...

12320
来自专栏移动端开发

iOS 转场动画探究(二)

这篇文章是接着第一篇写的,要是有同行刚看到的话建议从前面第一篇看,这是第一篇的地址:iOS 转场动画探究(一)

15740
来自专栏大前端_Web

Vue与React的异同—生命周期(一)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

48750
来自专栏iOSer成长记录

AlamofireImage 源码阅读

34760
来自专栏破晓之歌

React组件(推荐,差代码) 原

react官方教程:https://reactjs.org/tutorial/tutorial.html

8320
来自专栏IMWeb前端团队

react组件性能优化探索实践

React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制,也决定了在对组件进行更新时...

26870
来自专栏玄魂工作室

[翻译]整合鼠标、触摸 和触控笔事件的

Html5 Pointer Event Api 原文链接 https://mobiforge.com/design-development/html5-poin...

35960
来自专栏滕先生的博客

UIWebView 浏览器控件一、初始化与三种加载方式二、常用属性和方法三、代理方法 UIWebViewDelegate四、其它案例:

31260
来自专栏河湾欢儿的专栏

组件&生命周期

组件使你可以将 UI 划分为一个一个独立,可复用的小部件,并可以对每个部件进行单独的设计。

14210

扫码关注云+社区

领取腾讯云代金券