标签：render ports idm 之间 exports alt 学习小结 port 2.3
目录
一、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
（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‘;
标签：render ports idm 之间 exports alt 学习小结 port 2.3
原文地址：http://www.cnblogs.com/ZpandaZ/p/7396925.html
