React中ES5与ES6写法的区别总结

前言

相信很多React的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component)，然而网上搜到的很多教程和例子都是ES5版本的，所以很多人在学习的时候连照猫画虎都不知道怎么做。所以这篇文章就整理了一些ES5和ES6的写法对照表，希望大家以后读到ES5的代码，也能通过对照，在ES6下实现相同的功能。下面话不多说了，来看看详细的介绍吧。

模块

引用

在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：

//ES5var React = require("react");var { Component, PropTypes} = React; //引用React抽象组件var ReactNative = require("react-native");var { Image, Text,} = ReactNative; //引用具体的React Native组件

在ES6里，import写法更为标准

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

导出单个类

在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出

//ES5var MyComponent = React.createClass({ ...});module.exports = MyComponent;

在ES6里，通常用export default来实现相同的功能：

//ES6export default class MyComponent extends Component{ ...}

引用的时候也类似：

//ES5var MyComponent = require('./MyComponent');//ES6import MyComponent from './MyComponent';

注意：导入和导出的写法必须配套，不能混用！

定义组件

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

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

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

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

给组件定义方法

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

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

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

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

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