使用ES6语法重构React代码详解

使用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官方并没有强制性要求使用哪种语法,根据需要合理的选择即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-05-08

深入浅析react native es6语法

react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率 解构赋值 var { StyleSheet,Text,View } = React; 这句代码是ES6 中新增的解构(Destructuring)赋值语句.准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量. 上面的代码等价于: var StyleSheet = React.StyleSheet; var Text = React.Text; var View = React.View 再看几个例子,以前

react开发中如何使用require.ensure加载es6风格的组件

其实用的babel,在浏览器端就应该可以加载,之前少了个default: require.ensure([],(require) => { let A = require('./a.js').default; }) 以下方式也可以,但是比较low,可以作废了: 1.问题提出:想通过require.ensure加载es6风格的模块? 2.出现问题:import方式本身就是静态设计方式.如果require进来的是commonjs模块或者amd则没问题,但项目只想es6一个书写风格,行吗? 遗憾的是:

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

一.创建组件 ES6 class创建的组件语法更加简明,也更符合javascript.内部的方法不需要使用function关键字. React.createClass import React from 'react'; const MyComponent = React.createClass({ render: function() { return ( <div>以前的方式创建的组件</div> ); } }); export default MyComponent; Rea

React.js中常用的ES6写法总结(推荐)

一 模块 1 引入模块以便使用 用import实现: import '模块文件地址' import 组件 from '模块文件地址' 2 导出模块 用export default实现: export default class MyComponent extends Component{ ... } 引用: import MyComponent from './MyComponent'; 二 组件 1 定义组件 通过定义一个继承自React.Component的class来定义一个组件类: cl

ES6下React组件的写法示例代码

本文主要跟大家分享了ES6下React组件的写法示例,下面来一起看看详细的介绍: 一:定义React组件 class Hello extends React.Component { render() { return <h1>Hello, {this.props.value}</h1>; } } 二:声明prop类型与默认prop class Hello extends React.Component { // ... } Hello.propTypes = { value: Re

深入理解React中es6创建组件this的方法

首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

React中ES5与ES6写法的区别总结

前言 相信很多React的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做.所以这篇文章就整理了一些ES5和ES6的写法对照表,希望大家以后读到ES5的代码,也能通过对照,在ES6下实现相同的功能.下面话不多说了,来看看详细的介绍吧. 模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过re

JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】

本文实例讲述了JS实现集合的交集.补集.差集.去重运算.分享给大家供大家参考,具体如下: ES5写法: ///集合取交集 Array.intersect = function () { var result = new Array(); var obj = {}; for (var i = 0; i < arguments.length; i++) { for (var j = 0; j < arguments[i].length; j++) { var str = arguments[i][

React组件的三种写法总结

React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模

es6在react中的应用代码解析

不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法暂时也就够用的,这会给我们的开发带来很大的便捷,你会体验到ES6语法的无比简洁.下面给大家介绍es6在react中的应用,具体内容如下所示: import React,{Component} from 'react'; class RepeatArrayextends Component{ constru

详解javascript中var与ES6规范中let、const区别与用法

随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

详解React中合并单元格的正确写法

用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里分享一下 效果图 源码 react组件文件 import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { return ( <div className="App"> &

浅谈React中组件间抽象

关于今天要学习的组件间抽象其实我这小白看了几次还没弄明白,这次决定一探究竟.在组件构建中,通常有一类功能需要被不同的组件公用,此时就涉及抽象的概念,在React中我们主要了解mixin和高阶组件. mixin mixin的特性广泛存在于各个面向对象语言中,在ruby中,include关键词就是mixin,是将一个模块混入到另外一个模块中,或者是类中. 封装mixin方法 const mixin = function(obj, mixins) { const newObj = obj newObj

简单谈谈React中的路由系统

React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A