Est-ce que React.js est écrit en Es6 ?

react.js est écrit en es6. Il peut être traduit en ES5 à l'aide de Babel, ou il peut être traduit en JavaScript JSX à l'aide de Babel. Parce que l'idée de conception de React est extrêmement unique, il s'agit d'une innovation révolutionnaire, offre des performances exceptionnelles et. la logique du code est très simple. La syntaxe de création de composants à l'aide d'ES6 est plus concise. Cette syntaxe évite trop de code passe-partout React et utilise une syntaxe JavaScript plus pure, qui est plus conforme aux habitudes de syntaxe JavaScript.

L'environnement d'exploitation de ce tutoriel : système windows7, version ECMAScript 6&&react17, ordinateur Dell G3.

ReactJS est la bibliothèque frontale la plus populaire pour la création de vues. ReactJS est écrit en ES6 et peut être traduit en ES5 avec Babel ou JSX de JavaScript. Parce que l'idée de conception de React est extrêmement unique, il s'agit d'une innovation révolutionnaire, offre des performances exceptionnelles et la logique du code est très simple. Par conséquent, de plus en plus de gens commencent à y prêter attention et à l’utiliser, et il pourrait devenir l’outil principal de développement Web à l’avenir.

Comparaison de React utilisant les méthodes d'écriture ES6 et ES5

Création de composants

La syntaxe des composants créés par la classe ES6 est plus concise et plus cohérente avec javascript. Les méthodes internes n’ont pas besoin d’utiliser le mot-clé function.

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 et getDefaultProps

• Pour créer un composant à l'aide de React.Component, vous devez transmettre des accessoires à React.Component en appelant super() dans le constructeur. De plus, les accessoires doivent être immuables après la réaction 0.13.

• Étant donné que le composant est créé à l'aide de la syntaxe de classe ES6, seules les méthodes peuvent être définies en interne, mais les attributs de classe ne peuvent être définis qu'en dehors de la classe. Les propTypes doivent donc être écrits en dehors du composant.

• Pour la méthode getDefaultProps précédente, puisque les props sont immuables, elle est désormais définie comme une propriété comme propTypes, elle doit être définie en dehors de la classe.

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

Utilisez la syntaxe de classe ES6 pour créer des composants, et le travail d'initialisation de l'état doit être terminé dans le constructeur. Il n’est pas nécessaire d’appeler à nouveau la méthode getInitialState. Cette syntaxe est plus conforme aux habitudes du langage 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

Utilisez la syntaxe de classe ES6 pour créer des composants en classe ne les liera pas automatiquement à l'instance. Vous devez utiliser .bind(this) ou arrow function => pour la liaison manuelle.

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;

Vous pouvez également écrire la méthode de liaison dans le constructeur :

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;

ou utiliser les fonctions fléchées => :

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

Utilisez la syntaxe ES6 pour créer Les composants ne prennent pas en charge les mixins React. Si vous devez utiliser les mixins React, vous pouvez uniquement utiliser la méthode React.createClass pour créer des composants.

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;

Résumé

En général, la syntaxe de création de composants à l'aide d'ES6 est plus concise. Cette syntaxe évite trop de code standard React et utilise une syntaxe javascript plus pure, qui est plus conforme aux habitudes de syntaxe javascript. React n'impose officiellement pas la syntaxe à utiliser, vous pouvez en choisir une raisonnable en fonction de vos besoins.

【Recommandations associées : Tutoriel vidéo javascript, Vidéo de programmation】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!