利用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中detach()方法用法实例
Dec 25 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
javascript学习小结之prototype
Dec 03 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
教师自荐书
2013/10/08 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
内业资料员岗位职责
2014/01/04 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
党代会心得体会
2014/09/04 职场文书
绿里奇迹观后感
2015/06/15 职场文书