Ist „react.js“ in es6 geschrieben?

react.js ist in es6 geschrieben und kann mit Babel in JavaScript JSX übersetzt werden. Da die Designidee von React äußerst einzigartig ist, ist es eine revolutionäre Innovation und bietet eine hervorragende Leistung Die Codelogik ist sehr einfach. Die Syntax zum Erstellen von Komponenten mit ES6 ist prägnanter. Diese Syntax vermeidet zu viel React-Boilerplate-Code und verwendet eine reinere JavaScript-Syntax, die eher den JavaScript-Syntaxgewohnheiten entspricht.

Die Betriebsumgebung dieses Tutorials: Windows7-System, ECMAScript 6&&react17-Version, Dell G3-Computer.

ReactJS ist die beliebteste Front-End-Bibliothek zum Erstellen von Ansichten. ReactJS ist in ES6 geschrieben und kann mit Babel oder JSX von JavaScript in ES5 übersetzt werden. Da die Designidee von React äußerst einzigartig ist, handelt es sich um eine revolutionäre Innovation, eine hervorragende Leistung und eine sehr einfache Codelogik. Daher beginnen immer mehr Menschen, darauf zu achten und es zu nutzen, und es könnte in Zukunft das Mainstream-Tool für die Webentwicklung sein.

Vergleich von React mit ES6- und ES5-Schreibmethoden

Erstellen von Komponenten

Die Syntax der von der ES6-Klasse erstellten Komponenten ist prägnanter und konsistenter mit Javascript. Interne Methoden müssen das Funktionsschlüsselwort nicht verwenden.

React.createClass

import React from 'react';

const MyComponent = React.createClass({
  render: function() {
    return (
      <div>以前的方式创建的组件</div>
    );
  }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>ES6方式创建的组件</div>
    );
  }
}

export default MyComponent;

props propTypes und getDefaultProps

• Um eine Komponente mit React.Component zu erstellen, müssen Sie props an React.Component übergeben, indem Sie super() aufrufen im Konstruktor. Darüber hinaus müssen Requisiten nach React 0.13 unveränderlich sein.

• Da die Komponente mit der ES6-Klassensyntax erstellt wird, dürfen nur Methoden intern definiert werden, nicht jedoch Attribute. Klassenattribute können nur außerhalb der Klasse definiert werden. Daher sollten propTypes außerhalb der Komponente geschrieben werden.

• Da Requisiten unveränderlich sind, ist sie jetzt wie propTypes als Eigenschaft definiert und muss außerhalb der Klasse definiert werden.

React.createClass

import React from 'react';

const MyComponent = React.createClass({
  propTypes: {
    nameProp: React.PropTypes.string
  },
  getDefaultProps() {
    return {
      nameProp: ''
    };
  },
  render: function() {
    return (
      <div>以前的方式创建的组件</div>
    );
  }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>ES6方式创建的组件</div>
    );
  }
}

MyComponent.propTypes = {
  nameProp: React.PropTypes.string
};
MyComponent.defaultProps = {
  nameProp: &#39;&#39;
};

export default MyComponent;

State

Verwenden Sie die ES6-Klassensyntax, um Komponenten zu erstellen, und die Arbeit der Statusinitialisierung muss im Konstruktor abgeschlossen werden. Es ist nicht erforderlich, die Methode getInitialState erneut aufzurufen. Diese Syntax entspricht eher den Sprachgewohnheiten von JavaScript.

React.createClass

import React from 'react';const MyComponent = React.createClass({
  getInitialState: function() {
    return { data: [] };
  },

  render: function() {
    return (
      <div>以前的方式创建的组件</div>
    );
  }});export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  render() {
    return (
      <div>ES6方式创建的组件</div>
    );
  }}export default MyComponent;

this

Verwenden Sie die ES6-Klassensyntax, um Komponenten zu erstellen. Für die manuelle Bindung müssen Sie .bind(this) oder die Pfeilfunktion => verwenden.

React.createClass

import React from 'react';

const MyComponent = React.createClass({
  handleClick: function() {
    console.log(this);
  },
  render: function() {
    return (
      <div onClick={this.handleClick}>以前的方式创建的组件</div>
    );
  }
});

export default MyComponent;

React.Component (ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
  handleClick() {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>ES6方式创建的组件</div>
    );
  }
}

export default MyComponent;

Sie können die Bindungsmethode auch in den Konstruktor schreiben:

import React,{ Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick}>ES6方式创建的组件</div>
    );
  }
}

export default MyComponent;

oder Pfeilfunktionen verwenden =>:

mport React,{ Component } from 'react';

class MyComponent extends Component {
  handleClick = () => {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick}>ES6方式创建的组件</div>
    );
  }
}

export default MyComponent;

Mixins

Verwenden Sie ES6 Steuer zu schaffen Komponenten unterstützen keine React-Mixins. Wenn Sie React-Mixins verwenden müssen, können Sie zum Erstellen von Komponenten nur die Methode React.createClass verwenden.

import React,{ Component } from 'react';

var SetIntervalMixin = {
  doSomething: function() {
    console.log('do somethis...');
  },
};
const Contacts = React.createClass({
  mixins: [SetIntervalMixin],

  handleClick() {
    this.doSomething(); //使用mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default Contacts;

Zusammenfassung

Im Allgemeinen ist die Syntax zum Erstellen von Komponenten mit ES6 prägnanter. Diese Syntax vermeidet zu viel React-Boilerplate-Code und verwendet eine reinere Javascript-Syntax, die eher den Javascript-Syntaxgewohnheiten entspricht. React schreibt offiziell nicht vor, welche Syntax verwendet werden soll. Sie können eine angemessene Syntax entsprechend Ihren Anforderungen auswählen.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Programmiervideo】

Das obige ist der detaillierte Inhalt vonIst „react.js“ in es6 geschrieben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!