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
<h3>Hello Edureka!</h3>;
}
});
// ES6
class MyComponent extends React.Component {
render() {
return
<h3>Hello Edureka!</h3>;
}
}
|
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
<h3>Hello, { this .props.name}!</h3>;
}
});
// ES6
class App extends React.Component {
render() {
return
<h3>Hello, { this .props.name}!</h3>;
}
}
|
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
<h3>Hello, { this .state.name}!</h3>;
}
});
// ES6
class App extends React.Component {
constructor() {
super ();
this .state = { name: 'world' };
}
render() {
return
<h3>Hello, { this .state.name}!</h3>;
}
}
|
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。