React中es5与es6写法对比

迷南。 2022-05-30 03:24 300阅读 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 条评论，300人围观）

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

相关阅读

相关 ES6和ES5的setter和getter写法

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

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

相关 [JavaScript][ES6]ES5/ES6 的继承除了写法以外还有什么区别？

ES5/ES6 的继承除了写法以外还有什么区别？ 1.class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。

缺乏、安全感/ 2022年11月30日 01:41/ 0 赞/ 226 阅读

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

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

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

相关 React Native ES6写法整理

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

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

相关 es6与es5 中this的区别

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

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

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

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

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

相关 React中es5与es6写法对比

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

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

相关学习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 赞/ 217 阅读

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

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

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

相关 es6技巧写法

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

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