关于React ES5和ES6用法的不同

发布网友发布时间：2022-04-22 05:24

共1个回答

热心网友时间：2022-04-20 12:09

1，引入与导出方式不同
//ES5
var React = require("react");
//ES6
import React, { Component, PropTypes } from 'react

�0�2 �0�2导入： ES5使用require导入，而ES6使用了import
//ES5
mole.exports = Test;

�0�2
//ES6
export default Test;

�0�2
2，创建组件的方式不同
//ES5
var Test = React.createClass( {
..........
} );
//ES6
class Test extends Component {
..........
}

�0�2ES5使用React.createClass() �0�2小括号里面需要大括号。
�0�2ES6定义组件时继承自React框架的Component(需要导入)，只需要一个大括号。
�0�2
3，初始化组件属性的方式以及*组件属性类型的方式不同
//ES5
var Test = React.createClass({
getDefaultProps: function() {
return {
myPro: 10
};
},
propTypes: {
myPro: React.PropTypes.number. isRequired
}
});

//ES6
class Test extends Component {
static defaultProps = {
myPro: 10
};

static propTypes = {
myPro: React.PropTypes.number. isRequired
};
}

�0�2 ES5通常使用propTypes成员和getDefaultProps方法来实现。
�0�2 ES6可以统一使用static成员。（也可以用ES5方法）。
�0�2
4，初始化方法不同
//ES5
getInitialState: function() {
...........
return {
myState: 10
}
}

//ES6
state = {
myState: 10
}

�0�2 �0�2因为ES6直接使用state初始化不能进行一些其它的运算，所以也经常这样：
constructor(props){
super(props);
this.state = {
myState: 10
};
}

�0�2
5，ES5中每个方法之后都需要加上一个逗号，而且需要用 render: function()这样的写法。而ES6不需要加逗号，方法也可以直接用render()，直接在名字后加括号和形参。