截止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};
