发布网友 发布时间:2022-04-23 02:17
共1个回答
热心网友 时间:2022-04-20 12:09
1,引入与导出方式不同//ES5varReact=require("react");//ES6importReact,{Component,PropTypes}from'react�0�2�0�2导入:ES5使用require导入,而ES6使用了import//ES5mole.exports=Test;�0�2//ES6exportdefaultTest;�0�22,创建组件的方式不同//ES5varTest=React.createClass({.});//ES6classTestextendsComponent{.}�0�2ES5使用React.createClass()�0�2小括号里面需要大括号。�0�2ES6定义组件时继承自React框架的Component(需要导入),只需要一个大括号。�0�23,初始化组件属性的方式以及*组件属性类型的方式不同//ES5varTest=React.createClass({getDefaultProps:function(){return{myPro:10};},propTypes:{myPro:React.PropTypes.number.isRequired}});//ES6classTestextendsComponent{staticdefaultProps={myPro:10};staticpropTypes={myPro:React.PropTypes.number.isRequired};}�0�2ES5通常使用propTypes成员和getDefaultProps方法来实现。�0�2ES6可以统一使用static成员。(也可以用ES5方法)。�0�24,初始化方法不同//ES5getInitialState:function(){..return{myState:10}}//ES6state={myState:10}�0�2�0�2因为ES6直接使用state初始化不能进行一些其它的运算,所以也经常这样:constructor(props){super(props);this.state={myState:10};}�0�25,ES5中每个方法之后都需要加上一个逗号,而且需要用render:function()这样的写法。而ES6不需要加逗号,方法也可以直接用render(),直接在名字后加括号和形参。