Quelles sont les différences entre les trois méthodes de définition des composants dans React ?

Différences : 1. Les composants sans état fonctionnellement définis ne peuvent pas accéder aux méthodes de cycle de vie, tandis que les méthodes es5 et es6 définissent des composants avec état et peuvent accéder aux méthodes de cycle de vie. 2. La fonction this dans les méthodes es5 peut être automatiquement liée, et la fonction this dans le La méthode es6 ne peut pas être automatiquement liée et doit être liée manuellement.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quelles sont les différences entre les trois méthodes de définition des composants de réaction dans React ? Après le lancement de React, il existe trois manières de définir les composants de réaction pour différentes raisons, qui mènent toutes au même objectif : :

Stateless défini par les composants de style fonctionnel
es5 Composants définis de manière native par React.createClass
Le formulaire es6 étend les composants définis par React.Component

1. Composants fonctionnels sans état

Il est destiné à créer des composants d'affichage purs, ce type de composant est uniquement responsable de l'affichage en fonction des accessoires entrants et n'implique pas d'opérations d'état

Le composant ne sera pas instancié, les performances globales de rendu sont améliorées et ne peuvent pas accéder à cet objet ou méthodes de cycle de vie

2. Méthode native ES5 React.createClass // RFC

React.createClass auto-liera les méthodes de fonction, entraînant une surcharge de performances inutile et augmentant la possibilité d'obsolescence du code.

3. Formulaire d'héritage E6 React.Component // RCC

La méthode actuellement fortement recommandée de création de composants avec état remplacera à terme le formulaire React.createClass par rapport à React.createClass, la réutilisation du code peut être mieux réalisée.

La différence entre les composants sans état et les deux derniersPar rapport aux composants sans état, React.createClass et React.Component créent tous deux des composants avec état, et ces composants doivent être instanciés et avoir accès aux méthodes de cycle de vie du composant. .

La différence entre React.createClass**** et React.Component

La fonction this est auto-reliante

Dans le composant créé par React.createClass, le this de chaque fonction membre est automatiquement lié par React. ceci dans la fonction sera défini correctement.

Pour les composants créés par React.Component, leurs fonctions membres ne les lieront pas automatiquement et les développeurs doivent les lier manuellement, sinon cela ne pourra pas obtenir l'objet d'instance de composant actuel.

Le type de propriété du composant propTypes et sa propriété props par défaut defaultProps sont configurés différemment

React.createClass Lors de la création d'un composant, le type de propriété des accessoires du composant et les propriétés par défaut du composant seront configurées en tant que propriétés de l'instance du composant , où defaultProps est Utilisez la méthode getDefaultProps pour obtenir les propriétés du composant par défaut Lorsque React.Component configure ces deux informations correspondantes lors de la création d'un composant, elles sont utilisées comme propriétés de la classe de composant, et non comme propriétés de l'instance de composant, qui sont les propriétés. propriétés dites statiques de la classe configurée.

La configuration de l'état initial du composant est différente

L'état du composant créé par React.createClass consiste à configurer l'état lié au composant via la méthode getInitialState
L'état du composant créé par ; React.Component est dans le constructeur. Il est déclaré comme l'initialisation des propriétés du composant.

Résumé final

Dans la mesure du possible, essayez d'utiliser la création de composants sans état. Pour les composants pouvant être créés avec React.Component, essayez de ne pas créer de composants sous la forme de React.createClass pour améliorer la réutilisabilité et améliorer les performances.

Apprentissage recommandé : "

Tutoriel vidéo React

"

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!