使用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 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
如何制作自己的原生JavaScript路由
May 05 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数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
php 购物车完整实现代码
2014/06/05 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php 常用的系统函数
2017/02/07 PHP
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
windows下python之mysqldb模块安装方法
2017/09/07 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python yield和Generator函数用法详解
2020/02/10 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Python 高效编程技巧分享
2020/09/10 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
国际象棋商店:The Chess Store
2018/07/09 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
黄金酒广告词
2014/03/21 职场文书
119消防日活动总结
2014/08/29 职场文书
营业用房租赁协议书
2014/11/26 职场文书
出纳岗位职责
2015/01/31 职场文书
党员个人年度总结
2015/02/14 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
交通安全教育心得体会
2016/01/15 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS