与 ES5 相比,React 的 ES6 语法有何不同?
以下语法是 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 语法有何不同?的更多相关文章
- 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- ...
- React Native之ES5/ES6语法差异对照表
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [ES6]react中使用es6语法
前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...
- es6语法重构react代码
1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component.另外react 0.13之后props必须是不可变 ...
- WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...
- Webpack4 学习笔记三 ES6+语法降级为ES5
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...
- React Native中常用ES6语法
一:模块导入导出 //ES6 import React, { Component, PropTypes, } from 'react'; import { Image, Text } from 're ...
- 使用scss + react + webpack + es6实现幻灯片
写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程 ...
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
随机推荐
- 七分钟理解 Java 的反射 API
像java一样,一种具有反射功能的语言.允许开发人员在运行时检查类型.方法.字段.注解等,并在程序运行时决定是否使用. 为此,Java的反射API提供类,类,字段,构造函数,方法,注释和其他. 使用它 ...
- iview表单数字验证
sort: [ {required: true, message: '请填写栏目排序', trigger: 'blur'}, {type: 'number', message: '请输入数字', tr ...
- 防火墙firewall
开放端口 firewall-cmd --zone=public --add-port=80/tcp firewall-cmd --zone=public --add-port=80 ...
- Centos7.4(阿里云环境)挂载数据盘
Centos7.4(阿里云环境)挂载数据盘 2018.08.29 10:19 947浏览 查看数据盘 disk -l 磁盘 /dev/vda:42.9 GB, 42949672960 字节,83886 ...
- 小程序框架之逻辑层App Service
小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能. 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈. ...
- Mongodb的安装--简单快速
由于需要在服务器安装mongodb,所以就对Mongodb的安装进行了了研究,在了解安装过程之前,先了解一下Mongodb,Mongodb是什么? 是什么? MongDB是结余关系数据库和非关系数据库 ...
- 用python实现多线程爬取影视网站全部视频方法【笔记】
我拿这个站点作为案例:https://91mjw.com/ 其他站点方法都是差不多的. 第一步:获得整站所有的视频连接 html = requests.get("https://91mjw ...
- 在springboot项目中使用swaggerui
在pom.xml文件中配置(用的2.6.1版本,2.9.2有点丑) <properties> <!--<spring.swagger2.version>2.9.2< ...
- 十五.ProtoBuf3的基础总结
转自: https://blog.csdn.net/u011518120/article/details/54604615 定义一个消息类型 指定字段类型 分配标识号 指定字段规则 添加更多消息类型 ...
- 有关 Java (jackson包问题 ,MappingJacksonHttpMessageConverter 和 MappingJackson2HttpMessageConverter问题)
今天这一系列问题吃掉我四个小时,所以现在吸收掉. 一. 整理所有错误信息: 1.错误信息:java.lang.NoClassDefFoundError: Could not initialize cl ...