与 ES5 相比，React 的 ES6 语法有何不同？
1.require 与 import
| 1 2 3 4 5 |
// ES5
var React = require('react');
// ES6
import React from 'react';
|
2.export 与 exports
| 1 2 3 4 5 |
// ES5
module.exports = Component;
// ES6
export default Component;
|
3.component 和 function
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// ES5
var MyComponent = React.createClass({
render: function() {
return
}
});
// ES6
class MyComponent extends React.Component {
render() {
return
}
}
|
4.props
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return
this.props.name}!;
}
});
// ES6
class App extends React.Component {
render() {
return
this.props.name}!;
}
}
|
5.state
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// ES5
var App = React.createClass({
getInitialState: function() {
return { name: 'world' };
},
render: function() {
return
this.state.name}!;
}
});
// ES6
class App extends React.Component {
constructor() {
super();
this.state = { name: 'world' };
}
render() {
return
this.state.name}!;
}
}
|