由于最近在学校React/React Native 在网上搜索发现一会代码是ES5,一会是ES6,那么ES5和ES6的区别在哪,在这根据React/React Native 整理了一些ES5和ES6的写法对照表
模块
1.引用
在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样:
//ES5
var React = require("react");
var {
Component,
PropTypes
} = React; //引用React抽象组件
var ReactNative = require("react-native");
var {
Image,
Text,
} = ReactNative; //引用具体的React Native组件
在ES6里,import写法更为标准
//ES6
import React from 'react';
import {
Image,
Text
} from 'react-native'
2.导出模块
在ES5里,要导出一个类给别的模块用,一般通过module.exports来导出
//ES5
var MyComponent = React.createClass({
...
});
module.exports = MyComponent;
在ES6里,通常用export default来实现相同的功能:
//ES6
export default class MyComponent extends Component{
...
}
3.定义组件
在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} />
);
}
}
4.定义方法
给组件定义方法不再用 名字: function()的写法,而是直接用名字(),在方法的最后也不能有逗号了。
//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} />
);
}
}