React Native 之 ES2015(ES6) 写法参照

初探 React Native 时对 ES2015 (即：ES6) 语法开始了更加深入的了解与使用，如下总结一些常用写法的简要举例便于日常开发中更佳高效的查询与实现

模块导入

导入与导出均需配套使用，不能单独调用其一，类似于 object-c 的语法模式，有声明则需对应实现

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

单个类导出

用来实现相同的一些功能，导入与导出均需配套使用，不能单独调用其一，类似于 object-c 的语法模式，有声明则需对应实现

export default class MyComponent extends Component{
    ...
}

自定义组件

通过继承于 React.Component 的类来自定义一个组件类

class Photo extends React.Component {
    render() { // 注：组件本身结构可以非常简单，但唯一必须的就是在 render 方法中返回一些用于渲染结构的 JSX 语句
        return (
            <Image source={this.props.source} />
        );
    }
}

为组件定义方法

为组件定义方法无需使用 方法名: function() 的写法，直接使用 自定义名字() 即可，在方法的最后也不需再有逗号

class Photo extends React.Component {
    componentWillMount() { // 自定义方法名

    }
    render() { // 注：组件本身结构可以非常简单，但唯一必须的就是在 render 方法中返回一些用于渲染结构的 JSX 语句
        return (
            <Image source={this.props.source} />
        );
    }
}

定义组件的属性类型 & 默认属性

此处定义统一使用 static 来实现

class Video extends React.Component {
    static defaultProps = { // 统一使用 static 
        autoPlayer: false,
        minLoops: 10,
    };  // 注：此处需有分号隔开
    static propTypes = { // 统一使用 static 
        autoPlayer: React.PropTypes.bool.isRequired,
        minLoops: React.PropTypes.number.isRequired,
        posterFramePath: React.PropTypes.string.isRequired,
    };  // 注意这里有分号
    render() {
        return (
            <View />
        );
    } // 注意这里既没有分号也没有逗号
}

初始化 state

class Video extends React.Component { // 表达方式一
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

class Video extends React.Component { // 表达方式二
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

将方法作为回调提供

需通过绑定 bing 的方式来引用 this 或者通过箭头函数(即：定义一个临时函数)来调用；
箭头左边代表一个空括号、单个参数名或括号括起来的多个参数；
箭头右边代表一个表达式作为函数的回调参数或是一个函数体(花括号)通过return的方式返回值，反之则返回为 undefined；
该种方式调用每次返回的值都是一个新的函数引用，若仍需要函数的引用则需自行保存当前引用。

class PostInfo extends React.Component
{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            <TouchableHighlight 
                onPress={this.handleOptionsButtonClick.bind(this)} // bing 绑定 this 方式
                onPress={e=>this.handleOptionsButtonClick(e)} // 箭头函数方式
                >
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
}

class PauseMenu extends React.Component{ // 方式一
    constructor(props){
        super(props);
        this._onAppPaused = this.onAppPaused.bind(this);
    }
    componentWillMount(){
        AppStateIOS.addEventListener('change', this._onAppPaused);
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this._onAppPaused);
    }
    onAppPaused(event){
    }
}

class PauseMenu extends React.Component{ // 方式二
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
        // 将方法直接作为一个 arrow function 的属性来定义，初始化的时候就绑定好了this指针
    }
}

Mixins

官方已不推荐使用，尽量选用其它方式实现

//Enhance.js
import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
    constructor() {
        this.state = { data: null };
    }
    componentDidMount() {
        this.setState({ data: 'Hello' });
    }
    render() {
        return <ComposedComponent {...this.props} data={this.state.data} />;
    }
};
//HigherOrderComponent.js
import { Enhance } from "./Enhance";

class MyComponent {
    render() {
        if (!this.data) return <div>Waiting...</div>;
        return <div>{this.data}</div>;
    }
}

export default Enhance(MyComponent); // Enhanced component
// 用一个“增强函数”，来某个类增加一些方法，并且返回一个新类，这无疑能实现mixin所实现的大部分需求

以上便是此次分享的全部内容，希望能对大家有所帮助！