zoukankan      html  css  js  c++  java
  • 与 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>;
        }
    }
    

    .

  • 相关阅读:
    poj2388-Who's in the Middle(排序)
    poj1543-Perfect Cubes(暴力)
    poj1664-放苹果(递归)
    快速幂
    poj2389-Bull Math(大整数乘法)
    HDU2608-0 or 1(数论+找规律)
    poj1131-Octal Fractions(进制转换)
    [noip2011 d1t2]选择客栈
    [周记]8.7~8.16
    [noip2012d1t2] 国王游戏
  • 原文地址:https://www.cnblogs.com/crazycode2/p/11689586.html
Copyright © 2011-2022 走看看