React Native ES6写法整理

谁借莪１个温暖的怀抱￠ 2022-06-16 08:09 182阅读 0赞

本篇博文主要整理ES6标准写法。

*  模块引用
 *  导出单个类
 *  定义组件
 *  给组件定义方法
 *  定义组件的属性类型和默认属性
 *  初始化State
 *  把方法作为回调提供

--------------------

*  模块引用ES6写法

//ES6
    import React, { Component,PropTypes,} from 'react';
    import {Image,Text} from 'react-native'

*  导出单个类ES6写法  
    在ES6里，通常用export default来实现相同的功能：

//ES6
    export default class MyComponent extends Component{ 
        ...
    }

引用的时候是这样子引用的：

//ES6
    import MyComponent from './MyComponent';

*  定义组件  
    我们通过定义一个继承自React.Component的class来定义一个组件类

//ES6
    class Photo extends React.Component { 
        render() {
            return (
                <Image source={
       this.props.source} />
            );
        }
    }

*  给组件定义方法

//ES6
    class Photo extends React.Component { 
        componentWillMount() {
    
        }
        render() {
            return (
                <Image source={
       this.props.source} />
            );
        }
    }

*  定义组件的属性类型和默认属性

//ES6
    class Video extends React.Component { 
        render() {
            return (
                <View />
            );
        }
    }
    Video.defaultProps = {
        autoPlay: false,
        maxLoops: 10,
    };
    Video.propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    };

*  初始化State

//ES6
    class Video extends React.Component { 
        constructor(props){
            super(props);
            this.state = {
                loopsRemaining: this.props.maxLoops,
            };
        }
    }

*  把方法作为回调提供  
    这里要声明一下，在ES5下，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但官方现在逐步认为这反而是不标准、不易理解的。  
    在ES6下，你需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）来调用

//ES6
    class PostInfo extends React.Component { 
        handleOptionsButtonClick(e){
            this.setState({showOptionsModal: true});
        }
        render(){
            return (
                <TouchableHighlight 
                    onPress={
       this.handleOptionsButtonClick.bind(this)}
                    onPress={e=>this.handleOptionsButtonClick(e)}
                    >
                    <Text>{
       this.props.label}</Text>
                </TouchableHighlight>
            )
        },
    }

最后附上参考资料：[参考资料][Link 1]

[Link 1]: https://babeljs.io/blog/2015/06/07/react-on-es6-plus