使用ES6语法重构React代码详解


Posted in Javascript onMay 09, 2017

使用ES6语法重构React组件

在Airbnb React/JSX Style Guide中,推荐使用ES6语法来编写react组件。下面总结一下使用ES6 class语法创建组件和以前使用React.createClass方法来创建组件的不同。

创建组件

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

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

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

3.对于之前的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;

State

使用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;

总结

总的来说使用ES6来创建组件的语法更加简洁,这种语法避免了过多的React样板代码,而更多的使用纯javascript语法,更符合javascript语法习惯。React官方并没有强制性要求使用哪种语法,根据需要合理的选择即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
JQuery实现定时刷新功能代码
May 09 #jQuery
React.js中常用的ES6写法总结(推荐)
May 09 #Javascript
js上传图片预览的实现方法
May 09 #Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 #Javascript
Vue2单一事件管理组件通信
May 09 #Javascript
react-router实现按需加载
May 09 #Javascript
BootStrap表单时间选择器详解
May 09 #Javascript
You might like
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Python单链表的简单实现方法
2014/09/23 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Django中使用Celery的教程详解
2018/08/24 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
用Python开发app后端有优势吗
2020/06/29 Python
python 用struct模块解决黏包问题
2020/11/07 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
指针和引用有什么区别
2013/01/13 面试题
户外拓展活动方案
2014/02/11 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
青岛导游词
2015/02/12 职场文书
java代码实现空间切割
2022/01/18 Java/Android