Cet article vous présente l'utilisation de React : Comment React rend l'interface utilisateur a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Avant l'émergence de grands frameworks front-end tels que React, la façon dont nous rendions les éléments de l'interface utilisateur consistait à utiliser des modèles de chaînes . Dans React, nous rendons les éléments de l'interface utilisateur en utilisant des objets JavaScript.
Comme nous l'avons mentionné dans le chapitre précédent, React a proposé le concept de DOM virtuel afin d'économiser les performances frontales consommées par les opérations DOM fréquentes. L'objet JavaScript que nous créons ici est <.>Nœud DOM virtuel utilisé pour décrire "à quoi ressemble la page". Comment le « DOM virtuel » est-il finalement transformé en « vrai DOM » et affiché dans le navigateur ? Le travail complexe ici (manipulation de l'arborescence DOM, ajout de nœuds) est effectué par React.
Voyons d'abord comment créer un nœud DOM virtuel (c'est-à-dire un élément React) via un objet JavaScript :// 为了创建一个 React 元素,我们需要使用 React.createElement API const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } };
. Au lieu de cela, vous créez des éléments React comme ceci : React.createElement
const element = ( <h1 className="greeting"> Hello, world! </h1> );
ici. Vous pouvez le comprendre comme un sucre de syntaxe concis et efficace pour créer des éléments React, qui est utilisé pour être plus élégant. DOM de l’ensemble de l’application. JSX
JSX
Il convient de mentionner que
. JSX
React.createElement
Alors qui fera ça ? La réponse est
pour empaqueter notre code JavaScript et l'envoyer à Babel
pour traduction. Vous comprenez maintenant pourquoi webpack
, Babel
et React
apparaissent toujours ensemble comme des siamois. webpack
Babel
Jusqu'à présent, nous savons déjà comment créer des éléments React, mais en fait nous venons de "
" avant que l'élément ne soit réellement affiché sur le navigateur, et nous vérifions également la clé Une étape "rendu". Ici, nous accélérons. Si nous voulons restituer l'élément React créé précédemment, nous devons utiliser le code suivant :
Oui, l'élément DOM avec l'identifiant de Deviendra le nœud racine de toute l'arborescence DOM virtuelle. Jusqu'à présent, nous maîtrisons l'ensemble du processus de conversion des éléments React en nœuds DOM virtuels, puis le rendu des éléments sur le navigateur. Cependant, le simple fait de pouvoir utiliser React pour restituer des éléments visuels est loin de réaliser la valeur de React. N'oubliez pas que React existe en tant que framework front-end à grande échelle (même si par rapport à d'autres frameworks front-end à grande échelle, ses composants ne sont pas complets. La vraie valeur de React est :<p id="root"></p> const element = <h1>Hello, world</h1>; // 使用 ReactDOM.render API ReactDOM.render( element, document.getElementById('root') );
. root
Comment faire cela ? La réponse est d'utiliser des composants React
02. Composants React
Les composants React nous donnent non seulement la possibilité deune série de correspondant Le comportement interactif. On peut dire : Les composants React sont la pierre angulaire des applications React. Alors, qu'est-ce qu'un composant React
? Vous pouvez imaginer qu'un composant React est comme une usine, qui reçoit une série de matériaux appeléspropriétés et produit finalement (renvoie) des éléments/composants React. Dit autrement, un composant React est essentiellement une fonction JavaScript qui reçoit une série de paramètres et renvoie un élément/composant React. Voyons comment cela est écrit :
Voir, les composants React sont entièrement conformes à l'idée de composantisation que nous avons mentionnée précédemment, en recevant des paramètres et en renvoyant des éléments d'interface utilisateur.
import React form 'react' import ReactDOM form 'react-dom' function Button(props) { return <button>{props.buttonName}</button> }
que nous offre React. Grâce aux composants, nous pouvons rapidement créer une grande application avec une logique d'interaction complexe et une interface visuelle comme des blocs de construction, et chaque unité visuelle de l'application a des responsabilités très claires.
J'espère qu'à ce stade, vous pourrez apprécier la valeur de React lors de la création de grandes applications. Cela nous permet de nous concentrer sur une petite partie de l'application sans affecter par inadvertance le reste de l'application (c'est-à-dire chaque composant conformément au principe de " cohésion élevée, faible couplage"). En utilisant React, il nous est plus facile d’écrire du code clair et élégant.
Enfin, résumons encore une fois les deux avantages de l'utilisation de composants pour restituer les interfaces dans React :
Facile à réutiliser : Nous pouvons appeler un composant à tout moment et en tout lieu
Personnalisation pratique : En attribuant différents attributs aux composants, nous pouvons obtenir différents éléments d'interface utilisateur ; ;
Recommandations associées :
Utilisation de React : cinq fonctionnalités majeures du framework 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!