使用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重要知识更新
Jul 08 Javascript
js word表格动态添加代码
Jun 07 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
php实现统计邮件大小的方法
2013/08/06 PHP
php数组使用规则分析
2015/02/27 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
浅析python中的迭代与迭代对象
2018/10/08 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
实习鉴定范文
2013/12/19 职场文书
关于学习的演讲稿
2014/05/10 职场文书
公司募捐倡议书
2014/05/14 职场文书