react-native 组件生命周期

react-native 组件生命周期:

1、生成模块代码:
根据编译时指定的模块目标参数,编译器会生成相应的供Node.js (CommonJS),Require.js (AMD),isomorphic (UMD), SystemJS或ECMAScript 2015 native modules (ES6)模块加载系统使用的代码

react-native组件导入的两种写法:
ES5(Native ECMAScript 2015 modules) (类似commonJS的模块导入)

//导入React ReactNative包  
var React = require ("react");  
var {Component, PropTypes} = React;  
var ReactNative = require ("react-native");  
var { Image, Text,} from 'react-native';  
//导入其他组件  
var MyComponent = require('./MyComponent');  
//定义组件  
var TestComponent = React.creatClass({  });
module.exports = TestComponent;  

ES6

//导入React ReactNative包     
import React,{ Component,PropTypes }  from 'react';  
import {  } from 'react-native';  
//导入其他组件  
import MyComponent from './MyComponent'; 
//定义组件  
export default class TestComponent extends Component{ }

2、组件的特性
props:组件中的属性,
常用于跳转页面的传值:this.props.navigator.push({component:xxx, id: this.props.id})
不同组件之间传值
子组件向父组件传值
state:组件中的状态
父组件向子组件传值

this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
this.props 和 this.state 都用于描述组件的特性:
this.props 表示那些一旦定义,就不再改变的特性,
this.state 是会随着用户互动而产生变化的特性

3、react-native组件生命周期
react-native是基于react的组件框架,
如Android中的View一样,react native中的组件也有生命周期(就是一个对象从开始生成到最后消亡所经历的状态)

生命周期:
Mount阶段
(1)getDefaultProps 实例化调用(调用一次),初始化默认属性props
(2)getInitialState 初始化状态state,常用于改变组件状态
(3)componentWillMount组件将被加载前,可最后一次初始化状态
(5)render 渲染组件
(4)componentDidMount 组件被加载后,常用于交互,如设置计时setTimetou或者setInterval,或者发起网络请求

Update阶段:处理与用户的交互,如:点击、触摸事件
(8)componentWillReceiveProps 指父元素对组件的props或state进行了修改
(9)shouldComponentUpdate 一般用于优化,返回false或true来控制是否进行渲染
不重新渲染:回到组件运行状态
重新渲染(则进行如下操作)
(5)componentWillUpdate 组件刷新前调用
(6)componentDidUpdate 组件刷新hook

Unmount阶段
(7)componentWillUnMount组件卸载,用于清除计时,监听removeAllListeners

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值