模块引用
ES5 使用CommonJS 标准, 使用 require
var React = require('react');
var { Component, PropTypes) = React;
var ReactNative = require('react-native');
var {Image, View } = ReactNative
ES6 import 写法
import React, { Component, PropTypes } from 'react';
import {Image, Text} from 'react-native'
导出类
ES5 使用module.exports
var MyComponent = React.createClass({});
module.exxports = MyComponent;
引用=》
var MyComponent = require(./MyComponent)
ES6 使用 export default
export default class MyComponent extends Component {
}
引用=》
import MyComponent from './MyComponent'
定义组件、方法、属性类型 默认属性、初始化state、方法回调
ES5
属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现
初始化state getInitialState
var MyComponent = React.createClass({
getInitialState:function(){
return {
name:"xxx",
};
}
getDefaultProps:function(){
return {
name:'xxx',
number:10,
show:true,
}
},
propTypes:{
name:React.PropTypes.string.isRequired,
number:React.PropTypes.number.isRequired,
show:React.PropTypes.bool.isRequired,
},
componentWillMount:function(){
},
render:function(){
return (
<Image source={this.props.source}>
<TouchableHighlight onPress={this.handleClick}>
</TouchableHighlight>
);
},
// 事件绑定函数
handleClick:function(e){
},
});
ES6
属性类型和默认属性统一使用static成员来实现
state 在构造函数中初始化
calss MyComponent extends Component {
static propTypes = {
name:'xxx',
number:10,
show:true,
}; //有分号
static propType = {
name:React.PropTypes.string.isRequired,
number:React.PropTypes.number.isRequired,
show:React.PropTypes.bool.isRequired,
};
constructor(props){
super(props);
this.state = {
name:"xxx",
};
}
componentWillMount (){
}
render(){
return (
<Image source={this.props.source}>
<TouchableHighlight
onPress={this.handleClick.bind(this)}
onPress={e=>this.handleClick(e)}
>
</TouchableHighlight>
);
}
handleClick(e){
}
}