RN生命周期
来源:互联网 发布:cs手机扫描软件 编辑:程序博客网 时间:2024/04/30 08:37
概述
在Android开发中,每个View都有它自己的一个生命周期。同样在React Native中组件也有它自己的一个生命周期。(我们可以这样认为Android中的View跟React Native组件类似)。下面我们看下React Native的生命周期是怎样的。
如下:
我们也可以理解成三个阶段:
创建阶段:也就是生命周期中的getInitalState到componetDidMout这个阶段,在这阶段完成的组件的加载和一些数值的初始化。
刷新阶段:也就是第一个图中左下角虚线框内的生命周期,这个阶段是组件运行和交互阶段,通过改变属性(props)或者状态(state)来处理组件界面的交互和刷新。
销毁阶段:也就是生命周期中componetWillUnmpunt这个阶段,这个阶段是组件被销毁。
理解完上面生命周期执行顺序后,我们尝试写一个组件,并把每个生命周期并打印出来。
这里我做了个这样的操作初始化显示一个Text组件,然后按下去改变state中的一个值。
生命周期
getDefaultProps
在这个函数中,会去初始化一些默认的属性,一般都会把固定的内容放在这个过程中,并且全局只调用一次,属性内容无法再次修改。通过 this.props.属性 来获取属性值
在ES5中初始化属性是这样调用的
getDefaultProps() { return{ ... }}
在ES6中可以这样去写
//第一种组件名称.defaultProps = { ...}//第二种static defaultProps = { ...}
getInitialState
在这里是对一些状态(State)进行初始化,跟getDefaultProps不同的是,state中的内容是可以修改的,可以通过 this.state.状态 来获取状态值,并且通过 this.setState 来修改状态值。如下
function(){ this.setState({ //状态:状态值 ... });}
注意
在ES5语法中是这样写getInitialState。
getInitialState(){ return{ ... };}
在ES6中
state = { ...}
当我们调用了this.setState,就是刷新组件的时候。
componentWillMount
在加载组件(render)前,回调用的一个生命周期函数。
render
这个方法就像Android中Activity中的onCreate方法,在这去加载布局。
注意的一个地方就是,return里面编写的是一个xml,并且只能有一个顶级元素
使用如下:
//正确写法render() { return ( <View style={styles.container}> </View> );}//错误写法render() { return ( <View style={styles.container}> </View> <View style={styles.container}> </View> );}
componentDidMount
这个方法在render执行之后调用,一般会将网络请求、设置延时或者定时等操作,放在这里进行。
componentWillReceiveProps
这个方法是父元素修改组件属性(props)时,会调用的方法。
shouldComponentUpdate
在这方法是在调用this.setState或者父元素修改组件props时调用的方法,可以返回false或true来控制是否往下执行,如果返回false就不会刷新组件。
componentWillUpdate
这个方法类似componentWillMount,组件刷新前调用。执行完调用render刷新组件。
componentDidUpdate
组件刷新完成调用的方法。
componentWillUnmount
组件销毁时调用
- RN生命周期
- React / RN组件的生命周期
- React Native(RN)-组件生命周期
- RN
- RN
- RN
- RN
- 【RN基础02】React Native生命周期完全解析
- RN(react native)入坑指南-10,组件的生命周期
- Beautiful RN
- RN入门
- RN学习
- RN备忘
- RN填坑记
- RN颜色
- RN stylesheet
- RN Navigator
- RN-Init
- 发生内存警告时的讨论
- [转]简析STM32启动过程
- 走进官方手册系列 --- InnoDB Recovery
- RetroScope工具:下载,编译,启动 (MD)
- vue.js学习笔记-2
- RN生命周期
- 软件测试之谷歌测试定律
- Android实现下拉框(Spinner)
- 1.登陆接口
- 学院学习总结
- springmvc(四) springmvc的数据校验的实现
- 用caffe训练测试自己的图片
- C++const对象 常量数据 常量成员函数 const指针 const引用
- B