Quelle est la différence entre les éléments et les composants en réaction

La différence entre les éléments et les composants dans React : 1. La structure de données de l'élément est un objet ordinaire, tandis que la structure de données du composant est une classe ou une fonction pure 2. Dans JSX, les éléments imbriqués par éléments auront le caractère ; attribut méthode enfants à transmettre dans le composant de cet élément.

La différence entre les éléments et les composants en réaction :

1. 🎜>Élément React (élément React), c'est la plus petite unité de base de React On peut facilement créer un élément React en utilisant la syntaxe JSX :

const element = <div className="element">I&#39;m element</div>

L'élément React n'est pas un véritable élément DOM, c'est un élément DOM. juste des objets simples js, il n'y a donc aucun moyen d'appeler directement l'API native du DOM. L'objet traduit JSX ci-dessus ressemble probablement à ceci :

{
    _context: Object,
    _owner: null,
    key: null,
    props: {
    className: 'element'，
    children: 'I'm element'
  },
    ref: null,
    type: "div"
}

Seulement une fois le rendu de cet élément terminé, son élément DOM correspondant peut être obtenu via le sélecteur. Cependant, selon l'idée de conception de la machine à états finis de React, les composants doivent être exprimés à l'aide d'états et d'attributs, et les opérations DOM doivent être évitées autant que possible. Même si des opérations DOM doivent être effectuées, les interfaces ref et fourni par React doit être utilisé. Généralement, l'utilisation de l'interface fournie par React est suffisante pour faire face aux scénarios nécessitant une manipulation du DOM, de sorte que des sélecteurs puissants comme jQuery n'ont presque pas leur place dans React.

En plus d'utiliser la syntaxe JSX, nous pouvons également utiliser getDOMNode() et

pour créer des éléments React.

React.createElement()React.cloneElement()React.createElement()

La syntaxe JSX utilise pour créer des éléments React. Il accepte trois paramètres, le premier paramètre peut être un nom de balise. Tel que le composant div, span ou React. Le deuxième paramètre est l'attribut transmis. Le troisième paramètre et les suivants sont tous des sous-composants du composant.

React.createElement(
    type,
    [props],
    [...children]
)

React.createElement()React.cloneElement()

React.cloneElement() est similaire à React.createElement(), sauf que le premier paramètre qu'il transmet est un élément React , pas les noms de balises ou les composants. Les attributs nouvellement ajoutés seront fusionnés avec les attributs d'origine et transmis au nouvel élément renvoyé, et les éléments enfants seront remplacés.

React.cloneElement(
  element,
  [props],
  [...children]
)

2. Composants React

Il existe trois façons de créer des composants dans React. React.createClass(), classes ES6 et fonctions sans état.

React.createClass()

React.createClass() est la méthode la plus ancienne et la plus compatible parmi les trois méthodes. La méthode d'écriture de composants officiellement désignée avant la version 0.14.

var Greeting = React.createClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

Classe ES6

La classe ES6 est actuellement la manière officiellement recommandée de l'utiliser. Elle est construite en utilisant la syntaxe standard ES6, mais son implémentation appelle toujours To. implémenté, le cycle de vie et la méthode de liaison automatique de la classe ES6 sont légèrement différents de React.createClass().

class Greeting extemds React.Component{
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
};

React.createClass()Fonction sans état

Une fonction sans état est un composant sans état construit à l'aide de fonctions. Un composant sans état passe dans deux paramètres : les accessoires et le contexte. à partir de render(), il n'existe pas d'autres méthodes de cycle de vie.

function Greeting (props) {
  return <h1>Hello, {props.name}</h1>;
}

La structure de données des composants construits par React.createClass() et la classe ES6 est une classe, et la structure de données des composants sans état est une fonction. Ils sont considérés comme identiques dans React.

3. La différence entre les éléments et les composants

Les composants sont composés d'éléments. Les structures de données d'éléments sont des objets ordinaires, tandis que les structures de données de composants sont des classes ou des fonctions pures. De plus, il y a quelques différences à noter :

this.props.children

En JSX, les éléments imbriqués par éléments auront l'attribut children Le composant de this l'élément est transmis. Lorsqu'un seul élément est imbriqué, children est un élément React, et lorsque plusieurs éléments sont imbriqués, children est un tableau d'éléments React. Vous pouvez écrire des enfants directement dans JSX, mais si vous souhaitez leur transmettre de nouveaux attributs, vous devez utiliser pour créer de nouveaux éléments. Une fois, j'ai abandonné l'erreur suivante :

render () {
  var Child = this.props.children
  return <div><Child tip={&#39;error!&#39;}/><div>
}

Parce que Child est un élément React, pas un composant, cette façon d'écrire est complètement fausse : React.cloneElement()

render () {
  var child = this.props.children
  return <div>{ React.cloneElement(child, {tip: &#39;right way!&#39;}) }<div>
}

C'est tout. , les attributs existants d'origine et les attributs nouvellement ajoutés sont transmis ensemble aux éléments enfants. Utiliser React.cloneElement() est la bonne façon de manipuler des éléments.

Composants utilisateur

Parfois, les composants permettent aux utilisateurs de transmettre des composants personnalisés sous forme d'attributs pour améliorer la flexibilité du composant. Cet attribut doit être transmis dans les éléments React, pas dans les composants React. L'utilisation d'éléments React permet aux utilisateurs de transmettre des composants personnalisés et d'ajouter des propriétés aux composants en même temps. De même, vous pouvez utiliser React.cloneElement() pour ajouter plus de propriétés à un composant personnalisé ou pour remplacer des éléments enfants.

// 推荐
<MyComponent tick={
  <UserComponent tip="Yes"/>
} />
 
// 不推荐
<MyComponent tick={ UserComponent } />

Enfin

Enfin, pour faire une analogie inappropriée, le composant React est MyComponent et l'élément React est

.

c91df85aa2a01a1e069f702d655e9491

Recommandations d'apprentissage gratuites associées :

JavaScript(Vidéo)

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!