与 ES5 相比,React 的 ES6 语法有何不同?
2023-09-11 14:15:29 时间
以下语法是 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>; } }
.
相关文章
- es6 - 模板
- React ES5 (createClass) 和 ES6 (class)
- es6入门6--数组拓展运算符,Array.from()基本用法
- WebStorm中使用ES6的几种方式
- ES6基础-变量的解构赋值
- ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值
- ES6新特性:使用新方法定义javascript的Class
- ES6新特性:使用export和import实现模块化
- ES6新特性:利用解构赋值 (destructuring assignment), 简化代码
- React/React Native 的ES5 ES6写法对照表
- es6--扩展运算符回顾
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- es6涉及的那点东西
- es6数组去重
- [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战
- 小知识随手记(十):多重重复解构对象、es6函数带默认参数时将生成声明作用域、一些注意点、动态设置getter/setter、mysql将字符串字段转为数字排序或比大小、pointer-events:none;属性
- React实践:Vite创建React项目、react事件传递参数的两种方式
- ES6之promise(resolve与reject)