语法对照表ES5VSES6

Posted 2020-11-01 谢玉胜的技术文章

模块

导入
在ES5里面，如果使用CommonJS的标准，引入包一般是使用require来的
//ES5
js var React = require("react") var { Component, ProTypes } = React //引入React的抽象类 var ReactNative = require("react-native"); var { Image, Text }=ReactNative //引入具体的RN组件
在ES6里，采用import来引入
js ES6 import React,{ Component, ProTypes } from ‘react‘ import { Image, Text } from ‘react-native‘

类的导出导入
在ES里面 要导出一个类给别的模块用，一般是采用module.exports 来的
js //ES5 var MyComponent = React.createClass({ ... }) module.exports = MyComponent
在ES6 采用export default
js export default class MyComponet extends Component{ ... }
引用的时候也类似：

//ES5
var MyComponent = require(‘./MyComponent‘);

//ES6
import MyComponent from ‘./MyComponent‘;

定义组件

在ES5里，通常通过React.createClass来定义一个组件类，像这样：

//ES5
var Photo = React.createClass({
    render: function() {
        return (
            <Image source={this.props.source} />
        );
    },
});

在ES6里，我们通过定义一个继承自React.Component的class来定义一个组件类，像这样：

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

给组件定义方法

从上面的例子里可以看到，给组件定义方法不再用 名字: function()的写法，而是直接用名字()，在方法的最后也不能有逗号了

```js
//ES5
var Photo = React.createClass({
componentWillMount: function(){

},
render: function() {
    return (
        <Image source={this.props.source} />
    );
},

});
//ES6
class Photo extends React.Component {
componentWillMount() {

}
render() {
    return (
        <Image source={this.props.source} />
    );
}

}

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

在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现

//ES5 
var Video = React.createClass({
    getDefaultProps: function() {
        return {
            autoPlay: false,
            maxLoops: 10,
        };
    },
    propTypes: {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    },
    render: function() {
        return (
            <View />
        );
    },
});

//ES6
class Video extends React.Component {
    static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
    };  // 注意这里有分号
    static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    };  // 注意这里有分号
    render() {
        return (
            <View />
        );
    } // 注意这里既没有分号也没有逗号
}

方法的回调

//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>
        )
    },
}

其他

// 正确的做法
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){
    }
}

ES6+带来的其它好处

解构&属性延展

结合使用ES6+的解构和属性延展，我们给孩子传递一批属性更为方便了。这个例子把className以外的所有属性传递给div标签：

class AutoloadingPostsGrid extends React.Component {
    render() {
        var {
            className,
            ...others,  // contains all properties of this.props except for className
        } = this.props;
        return (
            <div className={className}>
                <PostsGrid {...others} />
                <button onClick={this.handleLoadMoreClick}>Load more</button>
            </div>
        );
    }
}
下面这种写法，则是传递所有属性的同时，用覆盖新的className值：

<div {...this.props} className="override">
    …
</div>
这个例子则相反，如果属性中没有包含className，则提供默认的值，而如果属性中已经包含了，则使用属性中的值

<div className="base" {...this.props}>
    …
</div>