React-Native的语法之ES5和ES6

截止16年7月,使用react-native init创建的项目,默认使用的是ES6的语法,此时要注意:不同版本的js语法不能混用,许多教程使用的是ES5的语法,如果照搬到现在的项目中就很有可能报错,一个文件内只用使用一种版本的js语法

ES5和ES6在react上的主要区别如下

1,依赖的导入方式:

ES5:

var React = require('react-native');

var {View,Text......} = React;

ES6:

import React, {Component} from 'react';

import {View,Text....} from 'react-native';

2,组件(类)的创建方式

ES5:

var ClassHello = React.createClass({........});

(注意末尾的分号)

ES6:

class ClassHello extends Component {......}

(末尾没有符号)

3,组件的生命周期方法

ES5:

getInitialState:function(){......},

ES6:

constructor(){.....} 

4,默认属性的设置

ES5:

getDefaultProps(){},

ES6:

在es6中defaultprops的设置不能再创建类的方法内部

//先创建组件(类)

class ClassHello extends Component {......}

//设置props的类型

ClassHello.propertyTypes = {

liked: React.ProperTypes.bool,

};

//设置props的值

ClassHello.defaultProps = {liked:true};