react-native学习小结

目录

一、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';