利用ES6语法重构React组件详解

 更新时间:2017年03月02日 09:39:47   作者:VICHILY  
这篇文章主要介绍了利用ES6语法重构React组件的相关资料,文中通过示例代码介绍的很详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。

一、创建组件

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;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,如果有疑问大家可以留言交流。

相关文章

  • webpack手动配置React开发环境的步骤

    webpack手动配置React开发环境的步骤

    本篇文章主要介绍了webpack手动配置React开发环境的步骤,webpack手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能...感兴趣的小伙伴们可以参考一下
    2018-07-07
  • React中的render何时执行过程

    React中的render何时执行过程

    这篇文章主要介绍了React中的render何时执行过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • react quill中图片上传由默认转成base64改成上传到服务器的方法

    react quill中图片上传由默认转成base64改成上传到服务器的方法

    这篇文章主要介绍了react quill中图片上传由默认转成base64改成上传到服务器的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 浅谈React 服务器端渲染的使用

    浅谈React 服务器端渲染的使用

    本篇文章主要介绍了浅谈React 服务器端渲染的使用,React是最受欢迎的客户端 JavaScript 框架,在本教程中,我们将逐步向您介绍服务器端的渲染示例
    2018-05-05
  • React传递参数的几种方式

    React传递参数的几种方式

    本文详细的介绍了React传递参数的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • react-native使用react-navigation进行页面跳转导航的示例

    react-native使用react-navigation进行页面跳转导航的示例

    本篇文章主要介绍了react-native使用react-navigation进行页面跳转导航的示例,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • React Router v4 入坑指南(小结)

    React Router v4 入坑指南(小结)

    这篇文章主要介绍了React Router v4 入坑指南(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 在create-react-app中使用sass的方法示例

    在create-react-app中使用sass的方法示例

    这篇文章主要介绍了在create-react-app中使用sass的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 详解基于React.js和Node.js的SSR实现方案

    详解基于React.js和Node.js的SSR实现方案

    这篇文章主要介绍了详解基于React.js和Node.js的SSR实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • react获取input输入框的值的方法示例

    react获取input输入框的值的方法示例

    这篇文章主要介绍了react获取input输入框的值的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04

最新评论