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