利用ES6语法重构React组件详解


Posted in Javascript onMarch 02, 2017

一、创建组件

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

React.createClass

import React from 'react';
const MyComponent = React.createClass({
 render: function() {
 return (
  <div>以前的方式创建的组件</div>
 );
 }
});
export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';
class MyComponent extends Component {
 render() {
 return (
  <div>ES6方式创建的组件</div>
 );
 }
}
export default MyComponent;

二、属性

props propTypes and getDefaultProps

. 使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component 。另外react 0.13之后props必须是不可变的。

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

. 对于之前的getDefaultProps方法,由于props不可变,所以现在被定义为一个属性,和propTypes一样,要定义在class外部。

React.createClass

import React from 'react';
const MyComponent = React.createClass({
 propTypes: {
 nameProp: React.PropTypes.string
 },
 getDefaultProps() {
 return {
  nameProp: ''
 };
 },
 render: function() {
 return (
  <div>以前的方式创建的组件</div>
 );
 }
});
export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';
class MyComponent extends Component {
 constructor(props) {
 super(props);
 }
 
 render() {
 return (
  <div>ES6方式创建的组件</div>
 );
 }
}
MyComponent.propTypes = {
 nameProp: React.PropTypes.string
};
MyComponent.defaultProps = {
 nameProp: ''
};
export default MyComponent;

三、状态

. 使用ES6 class语法创建组件,初始化state的工作要在constructor中完成。不需要再调用getInitialState方法。这种语法更加的符合JavaScript语言习惯。

React.createClass

import React from 'react';
const MyComponent = React.createClass({
 getInitialState: function() {
 return { data: [] };
 },
 
 render: function() {
 return (
  <div>以前的方式创建的组件</div>
 );
 }
});
export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';
class MyComponent extends Component {
 constructor(props) {
 super(props);
 this.state = { data: [] };
 }
 
 render() {
 return (
  <div>ES6方式创建的组件</div>
 );
 }
}
export default MyComponent;

四、this

. 使用ES6 class语法创建组件, class中的方法不会自动将this绑定到实例中。必须使用 .bind(this)或者 箭头函数 =>来进行手动绑定。

React.createClass

import React from 'react';
const MyComponent = React.createClass({
 handleClick: function() {
 console.log(this);
 },
 render: function() {
 return (
  <div onClick={this.handleClick}>以前的方式创建的组件</div>
 );
 }
});
export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';
class MyComponent extends Component {
 handleClick() {
 console.log(this);
 }
 
 render() {
 return (
  <div onClick={this.handleClick.bind(this)}>ES6方式创建的组件</div>
 );
 }
}
export default MyComponent;

也可以将绑定方法写到constructor中:

import React,{ Component } from 'react';
class MyComponent extends Component {
 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick() {
 console.log(this);
 }
 
 render() {
 return (
  <div onClick={this.handleClick}>ES6方式创建的组件</div>
 );
 }
}
export default MyComponent;

或者使用箭头函数 => :

import React,{ Component } from 'react';
class MyComponent extends Component {
 handleClick = () => {
 console.log(this);
 }
 
 render() {
 return (
  <div onClick={this.handleClick}>ES6方式创建的组件</div>
 );
 }
}
export default MyComponent;

五、Mixins

. 使用ES6语法来创建组件是不支持React mixins的,如果一定要使用React mixins就只能使用React.createClass方法来创建组件了。

import React,{ Component } from 'react';
var SetIntervalMixin = {
 doSomething: function() {
 console.log('do somethis...');
 },
};
const Contacts = React.createClass({
 mixins: [SetIntervalMixin],
 
 handleClick() {
 this.doSomething(); //使用mixin
 },
 render() {
 return (
  <div onClick={this.handleClick}></div>
 );
 }
});
export default Contacts;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
总结4个方面优化Vue项目
Feb 11 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 #Javascript
JavaScript表单验证完美代码
Mar 02 #Javascript
js实现常见的工具条效果
Mar 02 #Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 #Javascript
jQuery给表格添加分页效果
Mar 02 #Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 #Javascript
Bootstrap Scrollspy源码学习
Mar 02 #Javascript
You might like
人族 TERRAN 概述
2020/03/14 星际争霸
第十四节 命名空间 [14]
2006/10/09 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
python 输出所有大小写字母的方法
2019/01/02 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
解释下面关于J2EE的名词
2013/11/15 面试题
服装公司总经理岗位职责
2013/11/30 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
责任心演讲稿
2014/05/14 职场文书
社区党建工作方案
2014/06/10 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年数学教研工作总结
2015/07/22 职场文书