ES5與ES6對比
1. 模塊引用
1.在ES5里,引入React包基本通過require進行,代碼類似這樣:
// ES5 var React = require('react'); var { Component, PropTypes } = React; console.log(Component);
在ES6里,import寫法更為標准.
// ES6 import React, { Component, PropTypes } from 'react'; console.log(Component);
2. 導出單個類
// 在ES5里面,要導出一個類別的模塊用,一般通過module.exports來導出。 var React = require('react'); var MyComponents = React.createClass({ render: function() { return (<div>1111</div>) } }); module.exports = MyComponents; // 引用如下: var c1 = require('./MyComponents'); // 在ES6里面 通過export default來導出類 // es6 export default class MyComponent extends Component { render() { } } // 引用如下: import MyComponent from './MyComponent';
3. 定義組件
// ES5里面, 通過React.createClass來定義一個組件類 // es5 var React = require('react'); var C1 = React.createClass({ render: function() { return ( <C2 url='' /> ) } }); // 在ES6里,通過定義一個繼承自React.Component的class來定義一個組件類,像這樣: var React = require('react'); class C1 extends React.Component { render() { return ( <C2 url={ this.props.url }/> ) } }
4. 給組件定義方法
// ES5的寫法 var React = require('react'); var C1 = React.createClass({ componentWillMount: function() { }, render: function() { return ( <C2 url={ this.props.url } /> ) } }) // ES6 var React = require('react'); class C1 extends React.Component { componentWillMount() { } render() { return ( <div>222</div> ) } }
5. 定義組件的屬性類型 和 默認屬性
// 在ES5里,屬性類型和默認屬性分別通過propTypes成員和getDefaultProps方法來實現 var React = require('react'); var A = React.createClass({ getDefaultProps: function() { return { a: false, b: 10, }; }, propTypes: { a: React.PropTypes.bool.isRequired, b: React.PropTypes.number.isRequired, c: React.PropTypes.string.isRequired, d: React.PropTypes.string.isRequired, }, render: function() { return ( <C /> ); } }); // 在ES6里,可以統一使用static成員來實現 var React = require('react'); //ES6 class A extends React.Component { static defaultProps = { a: false, b: 10, }; static propTypes = { a: React.PropTypes.bool.isRequired, b: React.PropTypes.number.isRequired, c: React.PropTypes.string.isRequired, d: React.PropTypes.string.isRequired, }; // 注意這里有分號 render() { return ( <C /> ); } // 注意這里既沒有分號也沒有逗號 }
6. 初始化STATE
//ES5 var React = require('react'); var A = React.createClass({ getInitialState: function() { return { loopsRemaining: this.props.maxLoops, }; } }) //ES6 var React = require('react'); class A extends React.Component { constructor(props){ super(props); this.state = { loopsRemaining: this.props.maxLoops, }; } }
7. 把方法作為回調提供
//ES5 var React = require('react'); var A = React.createClass({ handleOptionsButtonClick: function(e) { this.setState({showOptionsModal: true}); }, render: function(){ return ( <TouchableHighlight onClick={this.handleOptionsButtonClick}> <Text>{this.props.label}</Text> </TouchableHighlight> ) } }); // 在ES6下,你需要通過bind來綁定this引用,或者使用箭頭函數(它會綁定當前scope的this引用)來調用 //ES6 var React = require('react'); class PostInfo extends React.Component{ handleOptionsButtonClick(e){ this.setState({showOptionsModal: true}); } render(){ return ( <TouchableHighlight onPress={this.handleOptionsButtonClick.bind(this)} onPress={e=>this.handleOptionsButtonClick(e)} > <Text>{this.props.label}</Text> </TouchableHighlight> ) } }