利用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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
Vue实现简单计算器
Jan 20 Vue.js
深入理解在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
php目录操作实例代码
2014/02/21 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
CI框架表单验证实例详解
2016/11/21 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
个人评价范文分享
2014/01/11 职场文书
租房协议书范本
2014/04/09 职场文书
保密工作目标责任书
2014/07/28 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Django框架模板用法详解
2022/06/10 Python