react-native学习小结

Posted 2020-10-03 ZpandaZ

目录

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