目录
一、prop，state，ref
二、React组件思想
三、react-native的两种写法：ES5（有时会遇到）、ES6（推荐写法）
一、prop，state，ref
1.ref：引用一个组件(是从render中返回该组件实例)
2.props：组件中的属性，
2.1常用于跳转页面的传值：this.props.navigator.push({component:xxx,id:this.props.id})
2.2不同组件之间传值
2.3子组件向父组件传值
3.state：组件中的状态
父组件向子组件传值
二、react-native组件思想
react-native的组件其实是采用的react的组件思想，所以强烈推荐先把react给看了
react-native组件，最重要的就是组件生命周期（安卓开发的View也有生命周期一说）：
（这里是网上盗图，要不要负责的呢- -！）
生命周期函数：
（1）getDefaultProps 实例化调用，以后不再调用，确定默认属性props
（2）getInitialState初始化状态state，常用于改变组件状态
（3）componentWillMount组件将被加载前，可最后一次初始化状态
（4）componentDidMount组件被加载后，常用于交互，如设置计时setTimetou或者setInterval，或者发起网络请求
（5）componentWillUpdate组件刷新前调用
（6）componentDidUpdate组件刷新后
（7）componentWillUnMount组件卸载，用于清除计时，监听
（8）componentWillReceiveProps重新渲染时，调用此此组件，可对子组件props或state进行修改
（9）shouldComponentUpdate判定是否需要重新渲染组件
运行经过：
这里梳理一下运行经过，组件一开始由（1）确定默认属性this.props，由（2）初始化this.state，到组件加载前即（3）时，一般在这时加入监听addListener，以及加入过场动画，然后render进行渲染，到（4）表示组件加载完成，接着组件进入运行状态
组件在运行中，有以下几种情况：
1.直接结束，到达（7）表示组件即将卸载销毁，一般这时候销毁监听removeAllListeners
2.状态state改变，到达（9）组件判断是否重新渲染时调用，是根据你的state状态有没有改变页面判定（有兴趣可深入了解（9）提高组件判定效率从而提升组件效率）
2.1不重新渲染，回到组件运行状态
2.2重新渲染，进入（5）组件即将更新，然后render渲染，所有state更新并改变界面，进入（6）组件更新完毕然后进入运行状态
3.又或者默认属性props改变，和状态state改变一样的流程，进行判定
三、react-native的两种写法
1.ES 5（类似commonJS的模块导入）
//导入React包
var React = require ("react");
var {Component, PropTypes} = React;
//导入ReactNative包
var ReactNative = require ("react-native");
var { Image, Text,} from ‘react-native‘;
//导入其他组件
var MyComponent = require(‘./MyComponent‘);
//定义组件
var TestComponent = React.creatClass({
//ES5组件内的函数都是XXX:function(){}形式
//默认属性
getDefaultProps:function(){
return (
testProp1: 123,
testProp2: false,
);
},//ES5 函数以逗号结尾
//属性类型
propTypes:{
testProp1: React.PropTypes.number.isRequired,
testProp2: React.PropTypes.bool,
testProp3: React.PropTypes.array,
},
//初始化状态
getInitialState:function(){
return {
stateValue: this.props.stateValue,
},//ES5 函数以逗号结尾
componentWillMount:function(){},
componentWillUnmount:function(){},
//渲染
render:function(){
return(
<View></View>
);
}//结尾函数既没有分号也没有逗号});
};
//表示组件可引用
module.exports = TestComponent;
2.ES 6
//导入React包
import React,{Component,PropTypes} from ‘react‘;
//导入ReactNative包
import {
Image,
Text,
} from ‘react-native‘;
//调用其他组件
import MyComponent from ‘./MyComponent‘;
//定义组件(export default表示可引用)
(export default) class TestComponent extends Component{
//默认属性
static defaultProps = {
testProp1: 123,
testProp2: false,
};//分号结尾
//属性类型
static propTypes = {
testProp1: React.PropTypes.string.isRequired,
testProp2: React.PropTypes.object,
testProp3: React.PropTypes.func,
};//以分号结尾
//初始化状态
constructor(props){
super(props);
this.state = {
stateValue: this.props.stateValue,
};
}//ES6 函数结尾既没有分号也没有逗号
componentWillMount(){}
componentWillUnmount{}
//渲染
render:function(){
return(
<View></View>
);
}
};
//表示可引用组件
import TestComponent from ‘./TestComponent‘;