1,引入与导出方式不同
//ES5 var React = require("react");
//ES6 import React, { Component, PropTypes } from 'react
导入: ES5使用require导入,而ES6使用了import
//ES5 module.exports = Test;
//ES6 export default Test;
2,创建组件的方式不同
//ES5 var Test = React.createClass( { .......... } );
//ES6 class Test extends Component { .......... }
ES5使用React.createClass() 小括号里面需要大括号。
ES6定义组件时继承自React框架的Component(需要导入),只需要一个大括号。
3,初始化组件属性的方式以及限制组件属性类型的方式不同
//ES5 var Test = React.createClass({ getDefaultProps: function() { return { myPro: 10 }; }, propTypes: { myPro: React.PropTypes.number. isRequired } }); //ES6 class Test extends Component { static defaultProps = { myPro: 10 }; static propTypes = { myPro: React.PropTypes.number. isRequired }; }
ES5通常使用propTypes成员和getDefaultProps方法来实现。
ES6可以统一使用static成员。(也可以用ES5方法)。
4,初始化方法不同
//ES5 getInitialState: function() { ........... return { myState: 10 } } //ES6 state = { myState: 10 }
因为ES6直接使用state初始化不能进行一些其它的运算,所以也经常这样:
constructor(props){ super(props); this.state = { myState: 10 }; }
5,ES5中每个方法之后都需要加上一个逗号,而且需要用 render: function()这样的写法。而ES6不需要加逗号,方法也可以直接用render(),直接在名字后加括号和形参。
相关推荐
主要总结介绍了关于React中ES5与ES6的写法区别,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
但是,随着ES6及更高版本现在被更广泛地接受,并借助等译程序工具,我们可以逐步淘汰一些ES5代码并在React开发中采用一些新JavaScript功能。 这是一个检查列表,可帮助您在React中将ES5代码转换为ES。 欢迎您为...
[React_JS][ES6][前端教學]_ES6#03._scope範圍對ES5與ES6_function的影響
最近在看 React 方面的一些文章时,看到了这样一个问题,「为什么每个 class 中都要写 super, super 是做什么的?」, 刚看到这个问题时,直接就想到了继承行为在 javascript 中的表现。后面作者的一句话「super 不...
class Photo extends React.Component {componentWillMount: function(){class Photo
React观察者混合 具有ES5和ES6兼容语义的 Mixin提供了尊重组件生命周期的托管事件侦听器,以及与React不变式兼容并适用于一次性事件处理程序的状态设置器。 该模块没有运行时相关性,最小约为1.3kB。为什么会存在? ...
一个简单的工具,可以在任何JavaScript项目(ES5,ES6,React,Vue等)中查找死代码和未使用的文件。 易于使用 对ES5,ES6,React,Vue,ESM,CommonJs的开箱即用支持。 容错: Deadfile使用松散的代码解析,因此...
初学ReactNative,参考官方Demo中ES5进行修改为ES6。PS:所有演示组件的js文件放在文件夹"ComponentDemoJS"中
Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以下面这篇文章就来给大家详细介绍了关于利用babel将es6语法转es5的相关资料,文章通过示例介绍的非常详细,需要的朋友可以参考下。
react-grunt-es6 使用简单项目,由提供支持的 。 怎么跑? 安装依赖项并启动, $ npm install $ gulp start:dev 浏览器插件 - ES6 到 ES5 的转换功能。 - JSX 转换函数。 执照 麻省理工学院
BlueKit使用可编辑的道具和实时预览自动从您的React组件生成一个库。 将BlueKit指向包含您的React组件的文件夹,它将为您生成一个库。 您将能够浏览组件,调整其道具并实时查看更改。 此外,您对组件代码所做的...
使用现代javascript教程(ES6和ES7 +)为Nodejs , Angular , React和VueJs奠定坚实的基础。 欢迎来到我们的现代Javascript课程,它将为您准备Java语言世界,并通过现代JavaScript技术(ES6 / ES7 +)教您基本的...
React本机,ES6和回流样板 就像很长的回购标题所表明的那样,这是一个样板库,其中包括以下内容: 使用ES6转换为ES5 使用单向数据流架构 入门 克隆此项目 安装依赖项: $ npm install 启动webpack观察器(它构建...
从零开始学 ReactJS(ReactJS...附录一、React ES5、ES6+ 常见用法对照表 附录二、用 React Native + Firebase 开发跨平台行动应用程式(Native Mobile App) 附录三、React 测试入门教学 附录四、GraphQL/Relay 初体验
[React_JS][ES6][前端教學]_React基礎#08._改寫ES5語法成React,_輸入即改變的網頁Input實作
Target 使用React技术栈开发SPA. Tech Stack UI库:React & React-Dom UI组件:Antd 路由:React-Router & History ...React 的ES5、ES6写法对照表 React 组件之间如何交流 react-router 中的history r
用于清洁 ES5/ES6/ES7 Javascript 的 哲学 这些设置中的大多数都基于 Javascript 社区中广泛遵循的最佳实践,以及一些大大增强可读性的 Symfony2 PHP 约定。 如果您不同意某些样式选择,请。 我很想学习和讨论更好...
在 React 中使用 ES6 概括 本次演讲的目的是: 教你React。 它假设没有先验知识。 教你JSX。 它让编写 React 变得更加愉快。 教你(一些)ES6。 本演示文稿仅假设熟悉 ES5。 教你用 ES6 做 React。 它向您展示了...
react-grunt-es6 使用简单项目,由提供支持的 。 怎么跑? 安装依赖项并启动, $ npm install $ grunt start 浏览器插件 - ES6 到 ES5 的转换功能。 - JSX 转换函数。 执照 麻省理工学院