利用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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
js生成word中图片处理方法
Jan 06 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
javascript canvas实现雨滴效果
Jun 09 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
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python numpy元素的区间查找方法
2018/11/14 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
新闻网站实习自我鉴定
2013/09/25 职场文书
总经理司机岗位职责
2014/02/06 职场文书
老同学聚会感言
2014/02/23 职场文书
小学生评语大全
2014/04/18 职场文书
创意婚礼策划方案
2014/05/18 职场文书
节水口号标语
2014/06/19 职场文书
抗震救灾标语
2014/06/26 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
竞聘书的秘诀
2019/04/02 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android