Compilation de points de connaissances pour démarrer avec React

Tous ceux qui travaillent sur le front-end doivent savoir que c'est désormais l'ère de trois frameworks majeurs : Vue, React et Angular. Vue est reconnu comme le plus simple à démarrer car sa structure de fichiers a l'ombre du HTML traditionnel, ce qui le rend très « convivial » pour le personnel front-end qui est nouveau dans ce domaine. Bien qu'Angular conserve également le HTML, c'est le plus difficile à démarrer. La raison peut être qu'il a été développé par les programmeurs back-end de Google, et qu'il utilise du Typescript pur et utilise Rxjs de manière asynchrone. Le seuil est trop élevé pour les nouveaux arrivants front-end. . haut. Démarrer avec React est moyennement difficile. Diverses opinions sur Internet disent qu'il est plus difficile de démarrer avec React que Vue. La difficulté peut être que vous n'avez pas une compréhension approfondie de JSX ou que vous ne comprenez pas certaines fonctionnalités de. ES6 assez profondément, ce qui vous rend difficile à comprendre, puis dites que React est plus difficile à démarrer . Aujourd'hui, examinons quelques points de connaissances que vous devez maîtriser pour démarrer avec React.

Pourquoi introduire React

Lorsque vous écrivez React, vous pouvez écrire du code similaire à celui-ci :

import React from 'react'

function A() {
  // ...other code
  return <h1>前端桃园</h1>
}

Vous j'ai dû me demander, le code ci-dessus n'utilise pas React, pourquoi React devrait-il être introduit ?

Si vous supprimez import React de 'react', l'erreur suivante sera signalée :

Alors, où est-il utilisé ? provoquer une erreur lorsque nous introduisons React. Si nous ne comprenons pas cette raison, cela signifie que JSX n'est pas très clair.

Vous pouvez mettre le code ci-dessus (en ignorant l'instruction d'importation) dans Babel en ligne pour la conversion, et constater que Babel convertira le code ci-dessus en :

function A() {
  // ...other code
  return React.createElement("h1", null, "前端桃园");
}

Parce qu'essentiellement, JSX Juste du sucre syntaxique fourni pour la fonction React.createElement(component, props, ...children).

Pourquoi utiliser className au lieu de class

1 Le concept initial de React est d'être cohérent avec l'API DOM du navigateur au lieu de HTML, car JSX est une extension JS. plutôt qu'un remplacement du HTML, qui est plus proche de la création de l'élément. Pour définir une classe sur un élément, vous devez utiliser l'API className :

const element = document.createElement("p")
element.className = "hello"

2. Problème de navigateur, avant ES5, les mots réservés ne pouvaient pas être utilisés dans les objets. Le code suivant générera une erreur dans IE8 :

const element = {
  attributes: {
    class: "hello"
  }
}

3. Problème de déstructuration, lorsque vous déstructurez des attributs, il y aura des problèmes si vous attribuez une variable de classe :

const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
const { className } = { className: 'foo' } 
const { class: className } = { class: 'foo' }

Pourquoi les attributs utilisent-ils camelCase

Parce que JSX est syntaxiquement plus proche de JavaScript que de HTML, React DOM utilise camelCase (nommage camelCase) pour définir les noms d'attributs au lieu des noms d'attributs HTML.

Pourquoi devons-nous appeler super et passer des accessoires dans le constructeur

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <p>
        </p><h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      
    );
  }
}

Et il y a un passage qui nous permet non seulement d'appeler super mais passe également des accessoires dans , mais cela ne nous dit pas pourquoi faire cela.

Pourquoi appeler super ?

En fait, ce n'est pas une limitation de React, c'est une limitation de JavaScript Si vous voulez appeler cela dans le constructeur, vous. il faut l'appeler à l'avance super. Dans React, nous initialisons souvent l'état dans le constructeur, this.state = xxx, nous devons donc appeler super.

Pourquoi devez-vous transmettre des accessoires ?

Vous pensez peut-être que vous devez transmettre des accessoires à super, sinon React.Component ne pourra pas initialiser this.props :

class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

Cependant, si vous manquez accidentellement de passer des accessoires et appelez directement super(), vous pouvez toujours accéder à this.props dans le rendu et d'autres méthodes (essayez-le si vous n'y croyez pas).

Pourquoi est-ce que ça va ? Parce que React attribuera des accessoires à l'objet d'instance nouvellement créé après l'appel du constructeur :

const instance = new YourComponent(props);
instance.props = props;

Mais cela signifie-t-il que vous pouvez utiliser super() au lieu de super(props) lorsque vous utilisez React ?

Cela ne fonctionne toujours pas, sinon le site officiel ne vous recommandera pas d'appeler props. Bien que React attribuera une valeur à this.props après l'exécution du constructeur, mais après l'appel de super() et avant le Le constructeur se termine, this.props est toujours inutilisable.

// À l'intérieur de React
Composant de classe {
constructeur (accessoires) {
This.props = accessoires ;
//...
}
}

// Dans votre code
Le bouton de classe étend React.Component {
constructeur (accessoires) {
Super(); //

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!