以下语法是 ES5 与 ES6 中的区别:

1.require 与 import

// ES5
var React = require('react'); // ES6
import React from 'react';

2.export 与 exports

// ES5
module.exports = Component; // ES6
export default Component;

3.component 和 function

// ES5
var MyComponent = React.createClass({
render: function() {
return
<h3>Hello Edureka!</h3>;
}
}); // ES6
class MyComponent extends React.Component {
render() {
return
<h3>Hello Edureka!</h3>;
}
}

4.props

// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return
<h3>Hello, {this.props.name}!</h3>;
}
}); // ES6
class App extends React.Component {
render() {
return
<h3>Hello, {this.props.name}!</h3>;
}
}

5.state

// ES5
var App = React.createClass({
getInitialState: function() {
return { name: 'world' };
},
render: function() {
return
<h3>Hello, {this.state.name}!</h3>;
}
}); // ES6
class App extends React.Component {
constructor() {
super();
this.state = { name: 'world' };
}
render() {
return
<h3>Hello, {this.state.name}!</h3>;
}
}

.

与 ES5 相比,React 的 ES6 语法有何不同?的更多相关文章

  1. React Native的语法之ES5和ES6

    原文地址:http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B- ...

  2. React Native之ES5/ES6语法差异对照表

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  3. [ES6]react中使用es6语法

    前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...

  4. es6语法重构react代码

    1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component.另外react 0.13之后props必须是不可变 ...

  5. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  6. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

  7. React Native中常用ES6语法

    一:模块导入导出 //ES6 import React, { Component, PropTypes, } from 'react'; import { Image, Text } from 're ...

  8. 使用scss + react + webpack + es6实现幻灯片

    写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程 ...

  9. 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

随机推荐

  1. Delphi对于文件的读写操作

    delphi文件操作 取文件名 ExtractFileName(FileName); 取文件扩展名: ExtractFileExt(filename); 取文件名,不带扩展名: 方法一: Functi ...

  2. AWVS (Acunetix Web Vulnerability Scanner )

    1.AWVS 是国外一款不错的安全测试工具 ,界面清楚,使用方便.可以爬取网页加载payload测试存在的安全问题            破解版的下载地址: https://www.arvinhk.c ...

  3. DTD学习

    DTD 简介 文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构.DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. XML文件内部引用: 外部 ...

  4. JVM参数优化(基础篇)

    原文:https://www.howardliu.cn/java/jvm-tuning-basic/ 这几天压测预生产环境,发现TPS各种不稳.因为是重构的系统,据说原来的系统在高并发的时候一点问题没 ...

  5. visual studio故障修复

    如果没有安装程序,直接在控制面板——>程序和功能,在列表中找到您安装的vs,右键选择更改,然后程序会启动,做一些准备.然后又三个选项,可以选择修复.

  6. Java精通并发-wait与notify方法案例剖析与详解

    在上一节中对Object的wait.notify.notifyAll方法进行了总结,这次举一个具体案例来进行巩固,题目如下: 编写一个多线程程序,实现这样的一个目标: 1.存在一个对象,该对象有一个i ...

  7. memcached的缺点

    上篇博客说了为什么引入memcached,主要讲述了memcached的优点,接下来就是我们在使用中必须要注意的内容,memcached的缺点,只有正确认识它,才能运用自如,接下来先看一下memcac ...

  8. mac pro下安装brew软件包管理工具

    Homebrew简称brew,OSX上的软件包管理工具,在Mac终端可以通过brew安装.更新.卸载软件. 1.打开终端直接输入下面指令回车: ruby -e "$(curl -fsSL h ...

  9. vm.$attrs与inheritAttrs详解

    1. inheritAttrs 在vue官网的解释如下 个人理解:父组件A上引入子组件B,在B子组件上加上一些属性(class.style除外),这些属性能否在子组件B的根元素上继承,默认值为true ...

  10. Dubbo源码分析(3):ExtensionFactory

    通过ExtensionFactory的getExtension方法获取目标对象.ExtensionFactory实现有两个,一个基于SPI的,一个Spring的ApplicationContext的. ...