Utilisation de React : comment React restitue l'interface utilisateur

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.

01. La façon dont React rend l'interface

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!'
);

L'API finira par renvoyer un objet JavaScript au format suivant :

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

React trouvera une place pour cet objet JavaScript dans l'arborescence DOM virtuelle générée, et éventuellement le fusionnera avec l'arborescence DOM réelle dans le navigateur pour restituer la vue.

Cependant, dans le développement réel, vous n'utiliserez presque jamais l'API

. Au lieu de cela, vous créez des éléments React comme ceci : React.createElement

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Cette méthode de création se fait via une méthode appelée <.> est implémenté par l'extension de syntaxe JavaScript. Je ne développerai pas davantage le concept de

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. JSXJSXIl convient de mentionner que

ne fait pas partie du framework React (cela découle de la philosophie de diviser pour régner dans l'organisation du code React), donc React n'est pas responsable de la fusion du DOM virtuel et du réel DOM. Convertissez le code écrit en syntaxe JSX en objets JavaScript à l'aide de l'API

. JSXReact.createElementAlors qui fera ça ? La réponse est

. Habituellement, nous utilisons

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. webpackBabelJusqu'à présent, nous savons déjà comment créer des éléments React, mais en fait nous venons de "

Créer

" 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')
);

Utilisez les éléments React pour). mettre en œuvre diverses tâches complexes de manière concise et efficace. Logique métier

. rootComment faire cela ? La réponse est d'utiliser des composants React

.

02. Composants React

Les composants React nous donnent non seulement la possibilité de

empaqueter un tas d'éléments visuels

mais nous donnent également la possibilité d'emballer

une 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és

proprié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>
}

C'est une excellente idée de penser en termes de composants lors de la création d'applications React, car la modularisation est synonyme de modularité et de réutilisabilité. Les classes de composants sont comme des instances d'une usine produisant des composants. Ces classes de composants sont entièrement conformes aux principes du « principe de réponse unique » et du « DOT ».

Dans la documentation officielle de React, une grande partie de l'API React concerne les composants. Par conséquent, les composants sont un concept très important dans React. Essentiellement, les composants sont la principale unité d'encapsulation

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.

03. Résumé

Enfin, résumons encore une fois les deux avantages de l'utilisation de composants pour restituer les interfaces dans React :

1. Facile à réutiliser  : Nous pouvons appeler un composant à tout moment et en tout lieu

2. 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

Introduction aux composants réactifs React Native Echarts

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!