反应组件怎么利用ES6语法进行重构

　　介绍

这篇文章给大家介绍反应组件怎么利用ES6语法进行重构,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强>一、创建组件

ES6类创建的组件语法更加简明,也更符合javascript。内部的方法不需要使用函数关键字。

<>强反应。createClass

import  React 得到& # 39;反应# 39;; 　　const  MyComponent =, React.createClass ({ 　　,呈现:函数(),{ 　　,return  ( 　　& lt;才能div>以前的方式创建的组件& lt;/div> 　　,); 　　,} 　　})； 　　MyComponent export  default 添加;

<强> React.Component (ES6)

import 反应,{,Component },得到& # 39;反应# 39;; 　　class  MyComponent  extends  Component  { 　　,使(){ 　　,return  ( 　　& lt;才能div> ES6方式创建的组件& lt;/div> 　　,); 　　,} 　　} 　　MyComponent export  default 添加;

<强>二,属性

道具proptype和getDefaultProps

。使用<代码> React.Component 创建组件,需要通过在构造函数中调用<代码>超级()将道具传递给<代码>反应。0.13组件>

。由于是用ES6类语法创建组件,其内部只允许定义方法,而不能定义属性,类的属性只能定义在类之外,所以proptype要写在组件外部。

。对于之前的getDefaultProps方法,由于道具不可变,所以现在被定义为一个属性,和proptype一样,要定义在类外部。

<>强反应。createClass

import  React 得到& # 39;反应# 39;; 　　const  MyComponent =, React.createClass ({ 　　,proptype: { 　　,nameProp: React.PropTypes.string 　　}, 　　,getDefaultProps (), { 　　,return  { 　　nameProp才能:& # 39;& # 39; 　　,}; 　　}, 　　,呈现:函数(),{ 　　,return  ( 　　& lt;才能div>以前的方式创建的组件& lt;/div> 　　,); 　　,} 　　})； 　　MyComponent export  default 添加;

<强> React.Component (ES6)

import 反应,{,Component },得到& # 39;反应# 39;; 　　class  MyComponent  extends  Component  { 　　,构造函数(道具){ 　　,超级(道具); 　　,} 　　, 　　,使(){ 　　,return  ( 　　& lt;才能div> ES6方式创建的组件& lt;/div> 　　,); 　　,} 　　} 　　MyComponent.propTypes =, { 　　,nameProp: React.PropTypes.string 　　}; 　　MyComponent.defaultProps =, { 　　,nameProp: & # 39; & # 39; 　　}; 　　MyComponent export  default 添加;

<强>三、状态

。使用ES6类语法创建组件,初始化状态的工作要在构造函数中完成。不需要再调用getInitialState方法。这种语法更加的符合JavaScript语言习惯。

<>强反应。createClass

import  React 得到& # 39;反应# 39;; 　　const  MyComponent =, React.createClass ({ 　　,getInitialState:函数(),{ 　　{,return ,数据:[],}; 　　}, 　　, 　　,呈现:函数(),{ 　　,return  ( 　　& lt;才能div>以前的方式创建的组件& lt;/div> 　　,); 　　,} 　　})； 　　MyComponent export  default 添加;

<强> React.Component (ES6)

import 反应,{,Component },得到& # 39;反应# 39;; 　　class  MyComponent  extends  Component  { 　　,构造函数(道具){ 　　,超级(道具); 　　,this.state =,{,数据:[],}; 　　,} 　　, 　　,使(){ 　　,return  ( 　　& lt;才能div> ES6方式创建的组件& lt;/div> 　　,); 　　,} 　　} 　　MyComponent export  default 添加;

<强>四,这

。使用ES6类语法创建组件,类中的方法不会自动将这绑定到实例中。必须使用<代码> .bind(这)>

<>强反应。createClass

import  React 得到& # 39;反应# 39;; 　　const  MyComponent =, React.createClass ({ 　　,handleClick:函数(),{ 　　,console.log(这个); 　　}, 　　,呈现:函数(),{ 　　,return  ( 　　& lt;才能div  onClick={this.handleClick}祝辞以前的方式创建的组件& lt;/div> 　　,); 　　,} 　　})； 　　MyComponent export  default 添加;

<强> React.Component (ES6)

import 反应,{,Component },得到& # 39;反应# 39;; 　　class  MyComponent  extends  Component  { 　　,handleClick (), { 　　,console.log(这个); 　　,} 　　, 　　,使(){ 　　,return  ( 　　& lt;才能div  onClick={this.handleClick.bind()}祝辞ES6方式创建的组件& lt;/div> 　　,); 　　,} 　　} 　　MyComponent export  default 添加;

反应组件怎么利用ES6语法进行重构