React中es5与es6写法对比

迷南。 2022-05-30 03:24 285阅读 0赞

> 1.引入与导出方式不同
> 
> //ES5 var React = require(“react”);  
> //ES6 import React, \{ Component,  
> PropTypes \} from ‘react

--------------------

> 2.导入： ES5使用require导入，而ES6使用了import  
> //ES5  
> module.exports = Test;  
> //ES6  
> export default Test;

--------------------

> 3.创建组件的方式不同  
> //ES5  
> var Test = React.createClass( \{  
> ………. \} );  
> //ES6  
> class Test extends Component \{  
> ………. \}

--------------------

> 4.初始化组件属性的方式以及限制组件属性类型的方式不同  
> //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  
> \};  
> \}

--------------------

> 5.初始化方法不同
> 
> //ES5  
> getInitialState: function() \{  
> ………..  
> return \{  
> myState: 10  
> \}  
> \}  
> //ES6  
> constructor(props)\{  
> super(props);  
> this.state = \{  
> myState: 10  
> \};  
> \}

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6和ES5的setter和getter写法

ES6和ES5的setter和getter写法 // ES5 类对象写法 /\ \ 第一种写法，闭包结构防止污染全局变量 \ 没有构造函数，不能使用new创建对象

梦里梦外;/ 2022年12月19日 09:14/ 0 赞/ 145 阅读

相关 React/React Native 的ES5 ES6写法对照表

很多React/React Native的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component

川长思鸟来/ 2022年08月22日 14:29/ 0 赞/ 177 阅读

相关 React Native ES6写法整理

本篇博文主要整理ES6标准写法。模块引用导出单个类定义组件给组件定义方法定义组件的属性类型和默认属性初始化State 把

谁借莪１个温暖的怀抱￠/ 2022年06月16日 08:09/ 0 赞/ 182 阅读

相关 es6与es5 中this的区别

廖雪峰： ![Center][] 实验: <html> <head></head> <body> demo1:

旧城等待，/ 2022年06月13日 13:19/ 0 赞/ 230 阅读

相关 React/React-Native的ES5 ES6写法对照表

原文出处：http://bbs.reactnative.cn/topic/15/react-react-native 很多React/React Native的初学者都被ES

今天药忘吃喽~/ 2022年06月03日 10:45/ 0 赞/ 167 阅读

相关 React中es5与es6写法对比

> 1.引入与导出方式不同 > > //ES5 var React = require(“react”); > //ES6 import React, \{ Compon

迷南。/ 2022年05月30日 03:24/ 0 赞/ 286 阅读

相关学习React前ES5、ES6知识准备

1、map filter reduce var arr=[1,2,3]; var arr1=arr.map(function(item,index,arr){

港控/mmm°/ 2022年05月26日 11:25/ 0 赞/ 201 阅读

相关 ES5/ES6中的类与继承对比

ES5中的类和静态方法 function Persion(name,age) { //构造函数里面的方法和属性 this.name = nam

妖狐艹你老母/ 2022年04月16日 01:37/ 0 赞/ 308 阅读

相关 es6技巧写法

为class绑定多个值普通写法 :class="{a: true, b: true}" 其他 :class="['btn', 'btn

怼烎@/ 2022年04月10日 04:52/ 0 赞/ 254 阅读

相关 ES6与ES5的差别

1、顶层对象顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。 ES5 之中，顶层对象的属性与全局变量是等价的。 var

女爷i/ 2022年01月26日 05:33/ 0 赞/ 312 阅读