从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。
ES6语法和之前的ES5语法有所变化,本篇文章是根据ES6语法写的。
在ES5语法中,有getDefaultPropTypes这个函数,这个函数在组件被创建时,调用一次,它的返回值成为了this.props的初始值。
而ES6语法中,属性的类型和默认值声明不像ES5语法那样在组件定义内部声明,而是在组件定义的外部声明,所以声明周期函数没有了getDefaultPropTypes了,但是声明DefaultPropTypes也是在组件创建的时候调用一次。具体可以参考我的另一篇文章React Native声明属性和属性确认
这个方法会在组件创建的时候调用一次。 这个方法中可以通过this.state初始化状态机(ES5是通过getInitialState方法初始化的)。 一般还在该方法中进行方法的bind(this)的操作。
constructor(props) { super(props); // 初始状态 this.state = { content: Content will appear here console.log("constructor") }
在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会导致界面重新渲染,这个函数将在渲染前执行。如果函数中修改状态机,框架不会立刻执行状态机改变的渲染而是等函数执行完了一起渲染。
React Native组件的初始渲染执行完成后, RN组件接收到新的state或者props时这个函数会调用。
函数需要返回一个布尔值,告诉React Native框架针对这次改变是否重新渲染, 如果返回false,不会渲染,相应的下面两个方法 componentWillUpdate和componentDidUpdate函数不会调用。
通过这个函数阻止无必要的重新渲染,是提高React Native应用程序性能的一大技巧。
初始渲染完成后,重新渲染前会调用这个函数。但是这个函数不能通过this.setState再次改变状态机变量的值。
RN组件初始渲染完成后,RN框架在重新渲染RN组件完成后调用。
参数是渲染前的props和 state
掌握React中的生命周期方法 React生命周期方法是React组件中非常重要的一部分,通过对React生命周期方法的掌握,我们可以更好地了解组件的生命周期,进而更好地管理组件的状态和行为。本文将介绍React生命周期方法的基本概念。
react组件的生命周期 生命周期:组件从诞生到销毁会经历一系列的过程,该过程就叫做生命周期。React在组件的生命周期中提供了一系列的`钩子函数``(类似于事件),可以让开发者在函数中注入代码,这些代码会在适当的时候运行。
于连林520wcf 【爱上Android】作者,从事Android开发和教育多年,担当多个重点项目的负责人,项目涉及办公类、O2O、医疗等多元化类型,曾在培训机构从事Android教育多年,有上千课时讲课经验。
相关文章
- Unity 基于LineRenderer组件实现连线功能
- 030.Kubernetes核心组件-Scheduler
- React中函数组件与类组件的两种使用
- React非父子组件之间的事件传递
- react native 调用原生UI组件
- React-Native组件之 Navigator和NavigatorIOS
- Angular 复习与进阶系列 – Component 组件 の Lifecycle Hooks
- NTLite 为windows8+做 精简:最最必要的组件:不可裁减掉,否则肯定有问题
- 基于 vue-element 组件实现音乐播放器功能
- 从零学React Native之08Image组件
- 小程序textarea组件的坑
- 是时候更新手里的武器了—Jetpack架构组件简析(下)
- vue2实现组件props双向绑定
- Bootstrap-table一个表格组件神器(学习一)使用详情
- Full-featured Vue 评分组件
- Vue动态组件&异步组件
- JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能:彻底解决高度问题
- react:父子组件传值
- 基于react-markdown组件自定义一个Markdown显示器
- [译] 为多个品牌和应用构建 React 组件
- 编写 React 组件的最佳实践
- 开源一个vue2的tree组件
- 懒加载组件
- React之组件化
- 带着三个问题深入浅出React高阶组件
- ReactJS学习笔记 父子组件间的通信
- react-narive-picker+ sectionList高性能的分组列表组件+webview
- React Native 使用原生 UI 组件
- 《React-Native系列》40、刨根问底Picker组件