React: les composants centraux de la construction d'interfaces utilisateur interactives

React est une bibliothèque frontale JavaScript populaire pour la construction d'interfaces utilisateur interactives. Sa courbe d'apprentissage est relativement plate, ce qui est l'une des raisons pour lesquelles il a attiré beaucoup l'attention récemment.

Bien qu'il existe de nombreux concepts importants à apprendre, les composants sont sans aucun doute le c?ur de la réaction. Une compréhension approfondie des composants facilitera le parcours de développement de votre réaction.

Condition préalable

Ce tutoriel s'adresse aux débutants qui commencent tout juste à apprendre React et doivent avoir une meilleure compréhension des composants. Nous commencerons par des fondations composantes, puis nous plongerons progressivement dans des concepts plus difficiles tels que les modèles de composants et quand les utiliser. Nous couvrirons différentes catégories de composants, telles que les composants de classe et les composants de fonction, les composants avec état et sans état, ainsi que les composants de conteneur et les composants de présentation.

Commen?ons!

Que sont les composants?

Les composants sont des entités miniatures indépendantes autonomes qui décrivent une partie de l'interface utilisateur. L'interface utilisateur de l'application peut être divisée en composants plus petits, chacun avec son propre code, structure et API.

Par exemple, lorsque vous regardez les applications Web de Facebook, il dispose de milliers de fonctionnalités interconnectées. Fait intéressant, Facebook contient 30 000 composants et le nombre augmente. L'architecture des composants vous permet de penser à chaque composant indépendamment. Chaque composant peut mettre à jour tout dans sa portée sans se soucier de la fa?on dont il affecte les autres composants.

Si nous prenons l'exemple de l'interface utilisateur de Facebook, la barre de recherche sera un candidat de composant approprié. Le fil d'actualités de Facebook peut former un autre composant (ou un composant qui contient de nombreux sous-composants). Toutes les méthodes et les appels AJAX liés à la barre de recherche seront situés dans ce composant.

Les composants sont également réutilisables. Ceci est facile à implémenter si vous avez besoin d'utiliser le même composant à plusieurs endroits. Avec la syntaxe JSX, vous pouvez déclarer des composants où que vous ayez besoin de les afficher.

<code><div>
<br>    Compte de courant: {comte}<br><hr>
<br>    {/ * Exemple de réutilisabilité des composants * /}<br>            updateCount = {setCount (comte 1)} /><br>            UpdateCount = {setCount (count-1)} /><br>
</div>
<br></code>

Accessoires et état

Les composants nécessitent des données pour fonctionner. Vous pouvez combiner des composants et des données de deux manières différentes: comme accessoires ou état . Les accessoires et l'état déterminent comment les composants sont rendus et se comportent. Commen?ons par des accessoires.

Comprendre les accessoires

Si le composant est une fonction JavaScript normale, les accessoires sont l'entrée de fonction. Selon cette analogie, le composant prend l'entrée (nous l'appelons les accessoires), le traite, puis rend un code JSX.

Bien que les données dans les accessoires soient accessibles aux composants, la philosophie de React est que les accessoires doivent être immuables et de haut en bas. Cela signifie que le composant parent peut transmettre toutes les données qu'elle souhaite au composant enfant en tant qu'accessoires, mais le composant enfant ne peut pas modifier ses accessoires. Donc, si vous essayez de modifier des accessoires comme ci-dessous, vous obtiendrez une erreur "Impossible de affecter la valeur à la lecture seule". useState() est utilisé comme suit:

 <code>const [count,setCount] = useState(0);<br></code>

Vous pouvez ensuite utiliser setCount() pour obtenir le nombre actuel.

Composants de classe

Les composants de classe peuvent être plus complexes que les composants fonctionnels, mais certaines personnes préfèrent ce style.

Vous pouvez créer un composant de classe en étendant super() pour passer le contenu hérité de la classe parent.

Notez que le constructeur est facultatif lors de la définition d'un composant. Dans le cas ci-dessus, le composant n'a pas d'état et le constructeur ne semble pas effectuer d'opérations utiles. accessoires.

La meilleure pratique consiste à recommander d'utiliser des constructeurs pour tous les composants de classe.

De plus, si vous utilisez un constructeur, vous devez appeler super() , sinon vous obtiendrez une erreur "Call Super () manquant dans le constructeur".

Mon dernier point consiste à utiliser count and count si vous utilisez des crochets ou this.setState() pour mettre à jour l'état. useState() renvoie une deuxième fonction qui vous permet de mettre à jour l'état avec la nouvelle valeur.

 <code>// 這有效<br><br>// 鉤子<br>const [count,setCount] = useState(0);<br> setCount(count value);<br><br> // 類組件<br>handleCount(value) {<br>    this.setState({count: this.state.count value});<br> }<br></code>

Ensuite, setCount() prend un objet en entrée, nous incrémentons la valeur précédente du count de 1, ce qui fonctionne comme prévu. Cependant, il y a un problème. Lorsqu'il y a plusieurs setState() pour incrémenter le nombre de 100, puis le mettre à jour à 1, puis supprimer le 100 précédemment ajouté. Si setState() est asynchrone, et plusieurs prevState sont des références aux états précédents et sont garantis d'être à jour. React.memo est utilisé pour les crochets. Tout cela peut sembler un peu déroutant lorsque vous êtes nouveau pour réagir. Si le même résultat est garanti d'être renvoyé lorsque les mêmes accessoires et l'état sont donnés, le composant est appelé composant pur. Les composants apatrides sont un excellent exemple de composants purs, car étant donné une entrée, vous savez ce que vous allez rendre.

 <code>const HelloWorld = ({name}) => (<br></code> {`Hi $ {nom}`}<br> ));<br>

Si votre composant est pur, vous pouvez l'optimiser avec PureComponent . Ces méthodes modifient le comportement de mise à jour des composants React. Par défaut, les composants React sont toujours mis à jour lorsque l'état ou les accessoires changent. Cependant, si vous utilisez memo , React effectue des comparaisons peu profondes sur les accessoires et l'état, ce qui signifie que vous comparez le contenu direct de l'objet au lieu de comparer récursivement toutes les paires de clés / valeur de l'objet. Ainsi, seules les références d'objets sont comparées, ce qui peut ne pas fonctionner comme prévu si l'état ou les accessoires est modifié.

 <code>// 類組件<br>class MyComponent extends React.PureComponent { // 使用它代替React.Component<br> // ...<br> }<br><br> // 鉤子<br>const MyComponent = React.memo(function MyComponent(props) { // 將組件函數(shù)包裝在React.memo 中<br> // ...<br> });<br></code>

React.memo est utilisé pour optimiser les performances, et à moins que vous n'ayez une sorte de problème de performance, il n'y a aucune raison d'envisager de les utiliser.

La pensée finale

Les composants et les crochets de fonction sont généralement beaucoup plus simples que les homologues de leurs composants de classe, donc à moins que vous ayez des préférences spéciales, les composants de la fonction sont le meilleur choix.

Dans ce tutoriel, vous avez un aper?u de haut niveau des architectures basées sur des composants et différents modèles de composants dans React.

Cet article a été mis à jour et comprend la contribution de Jacob Jackson. Jacob est développeur Web, écrivain technologique, pigiste et contributeur open source.

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!