文档章节

ReactNative组件的生命周期

最牛逼的代码搬运工
 最牛逼的代码搬运工
发布于 2016/05/04 16:56
字数 981
阅读 78
收藏 1

与iOS手机开发类似,一个ReactNative组件的生命周期分为实例化,存在期和销毁期,这几个周期也是由对应的几个方法来控制的。

I.组件的实例化期

  1. getDefaultProps:实例化的时候会调用该方法,以后便不在调用。

  2. getInitialState:初始化状态值,用来改变组件的状态。

  3. componentWillMount:组件将要被加载的时候调用该方法。(类比viewWillAppear)

  4. render:渲染组件的时候会调用该方法,这个是必须得有的方法。

  5. componentDidMount:组件加载完并且渲染完成的时候会调用该方法。

    注:以上的方法,在实例化一个对象的时候会依次调用,如果该对象没有被销毁,再次被调用的时候是不会调用第一步的方法,而是从第二步开始依次调用上面的方法。

这里,我来整理一下没个方法的具体作用。

getDefaultProps:在这里会初始化一些默认的属性,通常会将固定的内容放在这个过程中进行初始化和赋值,一个控件可以利用this.props获取在这里初始化的属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps方法,所以组件自己不可以修改props,只可有其他组件调用它的时候在外部修改。

getInitialState:在这里是对控件的一些状态进行初始化,由于该方法跟getDefaultProps不一样,如果该控件未销毁,下次调用该控件的时候还会调用这个方法。所以可以将控制控件的状态的一些变量放在这里初始化。比如控件上面显示的文字,可以通过this.state来获取值,通过this.setState来修改state值。在这里要注意,一旦调用了this.setState方法,控件必将调用render方法,对控件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。

componentWillMount:对比viewWillAppear,这个方法在组件将要被加载在视图上之前调用,也就是说,render一个组件前最后一次修改state的机会。

render:render是一个组件必须有的方法,形式为一个函数,并返回JSX或其他组件来构成DOM,和安卓的XML布局,WPF的SAML布局类似,只能返回一个顶级元素。同时,在render函数中,只可通过this.state和this.props来访问在之前函数中初始化的数据值。

componentDidMount:即调用了render方法后,组件加载成功并被成功渲染出来以后所执行的hook函数,一般会将网络请求等加载数据的操作,放在这个函数里进行,来保证不会出现UI上的错误

II.组件的存在期

存在期主要是用来处理与用户的交互,如:点击事件,具体有以下几个过程:

componentWillReceiveProps:指父元素对组件的props或state进行了修改

shouldComponentUpdate:一般用于优化。可以返回false或true来控制是否进行渲染。

componentWillUpdate:组件刷新前调用,类似componentWillMount

componentDidUpdatae:更新后的hook

III.销毁期

用于清理一些无用的内容,如:点击事件Listener,只有一个过程:componentWillUnmount

以上这些是我看了一些资料自己总结出来的,肯定会有不完善的地方,如果各位看官想了解更多,可以点击下面的链接。

http://blog.csdn.net/daleiwang/article/details/50669260

http://www.oschina.net/translate/getting-started-with-react

 

 

 

 

 

 

 

 

 

 

本文转载自:http://blog.csdn.net/daleiwang/article/details/50669260

下一篇: Xcode打包集锦
最牛逼的代码搬运工
粉丝 5
博文 42
码字总数 23329
作品 0
六安
程序员
私信 提问
ReactNative从零开始笔记2-组件的生命周期

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、ReactNative提供了哪些组件 基础组件 View 基础组件 Text 文本组件 Image 图片...

摸着石头过河_崖边树
01/18
0
0
ReactNative从零开始笔记3-state(状态)与props(属性)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、 props(属性) ReactNative(React)使用两种数据来控制一个组件:props 和 stat...

摸着石头过河_崖边树
01/18
0
0
详解ReactNative组件生命周期

了解一个组件的生命周期,很重要,在一些细节处理上,生命周期不同阶段,调用的方法很不相同。 对于ReactNative 所有的生命周期,可以看图: 文章可参考ReactNative组件生命周期 我在本问主要...

Jesse1949
08/08
0
0
ReactNative从零开始笔记5-组件传值(父子组件/兄弟组件)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、父子组件传值 2.1 父组件传值到子组件(顺传) props 属性传值 通过定义子组件的...

摸着石头过河_崖边树
01/18
0
0
ReactNative从零开始笔记4-PropTypes使用

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、PropTypes的简介 1.自定义组件的时候暴露属性到外界时候,外界调用组件具有属性...

摸着石头过河_崖边树
01/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vps管理程序win和Linux都有啥推荐?

如果你的手上有多台Windows的vps推荐您用iis7远程桌面管理工具,但是今天着重说一下linux vps需要管理,那有没有一个免费的工具监控在线率、CPU、内存、网络等使用情况并以网页的形式反馈出来...

1717197346
11分钟前
1
0
Java调用以太坊智能合约

Web3j让Java开发者可以轻松地访问以太坊区块链并调用区块链上的智能合约的方法,在本教程中,我们将学习如何创建一个简单的命令行应用来访问区块链上的合约。 1、什么是web3j Web3j是一个开发...

汇智网教程
15分钟前
1
0
从零开始入门 K8s| 阿里技术专家详解 K8s 核心概念

作者| 阿里巴巴资深技术专家、CNCF 9个 TCO 之一 李响 一、什么是 Kubernetes Kubernetes,从官方网站上可以看到,它是一个工业级的容器编排平台。Kubernetes 这个单词是希腊语,它的中文翻译...

阿里云官方博客
18分钟前
1
0
微信加好友 通过初始wxid,恢复好友聊天记录

一、聊天记录恢复以及怎么获得用户的wxid 聊天记录网上很多方法、前提是你没有点击微信设置里面的清除聊天记录 单单是删除了与这个人对话 记录还是会存在的 之前我用的是楼月的微信聊天恢复助...

青峰Jun19er
20分钟前
2
0
鲲鹏发力,神秘中国架构现世,ZStack搭上了国产化的高铁?

以下文字来自ZStack社区用户,ZStack作为国产自研的开源云平台,感谢在国产化道路上大家一直以来的支持,接下来也请大家继续指教,ZStack也会坚持初心,抗好国产化的大旗。 鲲鹏这两天挺火的...

ZStack社区版
26分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部