React Native组件的生命周期及回调函数
来源:互联网 发布:puppy linux 安装软件 编辑:程序博客网 时间:2024/05/16 04:44
RN 的生命周期说明:
1、object getDefaultProps()在组件类创建的时候调用一次,然后返回值被缓存下来。
2、object getInitialState()在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
3、componentWillMount ()在初始化渲染执行之前立刻调用。
4、ReactComponent render()这个方法是必须的,对视图进行渲染,你也可以返回 null 或者 false 来表明不需要渲染任何东西。
5、componentDidMount()在初始化渲染执行之后立刻调用一次。
6、componentWillReceiveProps(object nextProps)在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。可以用于更新 state 来响应某个 prop 的改变。
7、boolean shouldComponentUpdate(object nextProps, object nextState)在接收到新的 props 或者 state,将要渲染之前调用,如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。返回true将进行渲染。
8、componentWillUpdate(object nextProps, object nextState)在接收到新的 props 或者 state 并且shouldComponentUpdate返回true时调用。
9、componentDidUpdate(object prevProps, object prevState)在组件的更新已经同步到 DOM 中之后立刻被调用。
10、componentWillUnmount()在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。
不多说,下面我们一起来看看测试代码:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
} = React;
var AwesomeProject = React.createClass({
//在组件类创建的时候调用一次,然后返回值被缓存下来。
getDefaultProps:function(){
console.log("getDefaultProps");
return null;
},
//初始化状态,在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
getInitialState:function(){
console.log("getInitialState");
return null;
//必须有返回值,可以是NULL或者一个对象。
},
//组件将要被渲染
componentWillMount:function(){
console.log("componentWillmount");
},
//渲染视图
render:function(){
console.log("render");
return (
<View>
</View>
);
//你也可以返回 null 或者 false 来表明不需要渲染任何东西
},
//渲染视图完成后
componentDidMount:function(){
console.log("componentDidMount");
this.loadDataToSetState();
},
//组件接收到新属性,在初始化渲染的时候,该方法不会调用。
componentWillReceiveProps:function(nextProps){
console.log("componentWillReceiveProps");
//console.log(nextProps);
},
//组件是否需要更新
shouldComponentUpdate:function(nextProps,nextState){
console.log("shouldComponentUpdate");
//console.log(nextProps+"|"+nextState);
return true;
},
//组件将要被更新
componentWillUpdate:function(nextProps,nextState){
console.log("componentWillUpdate");
//console.log(nextProps+"|"+nextState);
},
//组件更新完毕
componentDidUpdate:function(prevProps,prevState){
console.log("conponentDidUpdate");
//console.log(prevProps+"|"+prevState);
},
//组件被销毁之前,做清理操作
componentWillUnmount:function(){
console.log("componentWillUnmount");
},
loadDataToSetState:function(){
console.log("loadDataToSetState");
this.setState({
name : "RN"
})
},
});
var styles = StyleSheet.create({
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
最后的输出如下,我们再 componentDidMount 中调用了 loadDataToSetState 函数,该函数中通过了setState函数对state进行了设置,这时候就会回调shouldComponentUpdate,如果返回true,则会继续调用 componentWillUpdate , render , conponentDidUpdate ,之后按返回键退出应用,则会进行销毁操作,回调
componentWillUnmount
getDefaultProps
getInitialState
componentWillmount
render
componentDidMount
loadDataToSetState
shouldComponentUpdate
componentWillUpdate
render
conponentDidUpdate
componentWillUnmount
转载地址:http://www.cnblogs.com/gaobig/p/4978455.html
- React Native组件的生命周期及回调函数
- react-native组件的生命周期
- React Native 组件的生命周期
- React Native组件的生命周期
- React Native组件的生命周期
- react-native组件的生命周期
- React Native 组件的生命周期
- React Native组件的生命周期及属性props
- 【React Native从入门到精通】React Native的组件构成及生命周期分析
- React Native 组件生命周期
- react native 组件生命周期
- React Native组件生命周期
- React Native组件生命周期
- react-native 组件生命周期
- React-Native 组件 生命周期
- React Native组件生命周期
- Android React Native组件的生命周期
- React Native 中组件的生命周期
- Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '+[.....报错的问题
- Vue使用echarts数据动态更新,Y轴刻度固定或者自适应
- SQL查询的艺术学习笔记--连接符数值运算函数
- angularJS路由跳转
- openstack-dashboard安装
- React Native组件的生命周期及回调函数
- linux 基于alsa 使用libmad 解码库实现MP3文件的播放
- socket阻塞与非阻塞,同步与异步
- 【转载】Bash 脚本进阶,经典用法及其案例
- SQL查询的艺术学习笔记--数据插入操作
- LeetCode-78. Subsets
- 码率、分辨率、帧率
- 设置TabLayout框架和侧拉,注意必须导 design包
- 将word文档转换为html、PDF等