Il y a trois types de choses connexes impliqués ici, avec leurs propres noms:

• composants
• instances de composants
• éléments

C'est un peu surprenant, car si vous êtes habitué à d'autres frameworks D'interface utilisateur, vous pouvez vous attendre à ce qu'il n'y ait que deux types de choses, correspondant à peu près aux classes (comme Widget) et aux instances (comme new Widget()). Ce n'est pas le cas dans React; les instances de composants sont pas la même chose que il n'y a pas non plus de relation individuelle entre eux. Pour illustrer cela, considérez ce code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('This is a component instance:', this);
  }

  render() {
    const another_element = <div>Hello, World!</div>;
    console.log('This is also an element:', another_element);
    return another_element;
  }
}

console.log('This is a component:', MyComponent)

const element = <MyComponent/>;

console.log('This is an element:', element);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Dans le code ci-dessus:

• MyComponent (la classe elle-même) est un Composant
• element est un Élément. C'est pas une instance de MyComponent; c'est plutôt simplement une description de l'instance du composant à créer. C'est un objet avec key, props, ref et type propriétés. Ici, key et ref sont null, props est un objet vide, et type est MyComponent.
• une instance de MyComponent est créée (et, dans l'exemple ci-dessus, se connecte à partir de son constructeur) lorsque element est rendu.
• another_element est aussi un élément, et a key, ref, props et type propriétés comme element - mais cette fois, la valeur de type est la chaîne de caractères "div".

Les raisons de conception pour lesquelles React a ces trois concepts distincts sont explorées en détail dans le blog de L'équipe React réagir composants, éléments, et Instances, que je recommande de lire.

Enfin, il convient de noter que si les docs officiels sont rigoureux sur l'utilisation du terme "component" pour désigner une fonction ou une classe et "component instance" pour désigner une instance, d'autres sources n'adhèrent pas nécessairement à cette terminologie; vous devriez vous attendre à voir "component" utilisé (incorrectement) pour signifier "component instance" lors de la lecture de réponses

Pour approfondir la réponse, un élément React n'a aucune méthode et rien sur le prototype. Cela les rend aussi rapides.

"Un ReactElement est une représentation virtuelle, sans état, immuable et légère d'un élément DOM" - https://facebook.github.io/react/docs/glossary.html#react-elements

Une fonction react component render() renvoie une arborescence DOM des éléments react dans les coulisses (C'est le DOM virtuel btw). Il y a une logique de mappage et de diff complexe impliqué, mais fondamentalement, ces éléments de réaction correspondent aux éléments DOM.

Vous pouvez également créer un élément directement React.createElement(arg) où arg peut être un nom de balise html ou une classe de composant React.

Réagir Éléments

Un élément React est juste un vieux JavaScript Object Sans méthodes propres. Il a essentiellement quatre propriétés:

• type, un String représentant une balise HTML ou une référence faisant référence à un composant React
• key, un String pour identifier de manière unique un élément React
• ref, une référence pour accéder au nœud DOM sous-jacent ou à L'Instance de composant React)
• props (propriétés Object)

Un élément React est pas une instance D'un composant React. C'est juste une "description" simplifiée de la façon dont l'Instance du composant React (ou en fonction de la type une balise HTML) à créer devrait ressembler.

Un élément React qui décrit un composant React ne sait pas à quel nœud DOM il est finalement rendu - cette association est abstraite et sera résolue lors du rendu.

Les éléments React peuvent contenir des éléments enfants et sont donc capables de former des arbres d'éléments, qui représentent Virtuel arborescence DOM.

Composants React et Instances de composants React

Un composant React personnalisé est créé par React.createClass ou en étendant React.Component (ES2015). Si un composant React est instancié il attend un props Object et renvoie une instance, appelée Instance de composant React.

Un composant React peut contenir un état et a accès aux méthodes de cycle de vie React. Il doit avoir au moins une méthode render, qui renvoie un élément React (- tree) lorsque invoquer. Veuillez noter que vous ne construisez jamais d'Instances de composants React vous-même, mais laissez React le créer pour vous.

React Element - c'est un objet simple qui décrit un nœud DOM et ses attributs ou propriétés que vous pouvez dire. C'est un objet de description immuable et vous ne pouvez appliquer aucune méthode dessus.

Eg -

<button class="blue"></button>

React Component - C'est une fonction ou d'une classe qui accepte une entrée et renvoie un Réagir élément. Il doit conserver des références à ses nœuds DOM et aux instances des composants enfants.

const SignIn = () => (
  <div>
   <p>Sign In</p>
   <button>Continue</button>
   <button color='blue'>Cancel</button>
  </div>
);

Un composant est une usine pour créer des éléments.

Un React Element est ce que vous considérez comme un élément html de base (dom pour être précis). C'est juste un moyen de créer un élément sans utiliser le format JSX très controversé.

Un React Component est ce que vous pouvez considérer comme un objet. Il a ses méthodes, supporte React lifecycles et est généralement illisible(au moins n'a pas encore trouvé de réutilisation, Bienvenue dans les exemples). Il doit nécessairement avoir une fonction de rendu.

Un React Class est ce que vous appelez une classe. Fonctionnalité Sage React Class et React Component sont de même. Seule la syntaxe est le vrai changement, car React Component est basé sur ES6 syntax. Un autre changement majeur est la liaison par défaut des fonctions à ce n'est plus pris en charge à moins d'utiliser des fonctions de flèche. Mixins ne sont plus pris en charge à partir de ES6.

Un élément est un objet simple décrivant ce que vous voulez afficher à l'écran en termes de nœuds DOM ou d'autres composants. Les éléments peuvent contenir d'autres éléments dans leurs accessoires. Créer un élément React est bon marché. Une fois qu'un élément est créé, il n'est jamais muté. La représentation d'objet de L'élément React serait la suivante,

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

Le createElement ci-dessus renvoie comme objet comme ci-dessous,

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

Et enfin il rend au DOM en utilisant ReactDOM.le rendu ci-dessous,

<div id='login-btn'>Login</div>

Alors qu'un composant peut être déclaré de plusieurs manières différentes. Il peut s'agir d'une classe avec une méthode render (). Alternativement, dans des cas simples, il peut être défini comme une fonction. Dans les deux cas, il prend des accessoires en entrée et renvoie une arborescence d'éléments en sortie. JSX transpiled comme createElement à la fin.

function Button ({ onLogin }) {
  return React.createElement(
    'div',
    {id: 'login-btn', onClick: onLogin},
    'Login'
  )
}