Interprétation détaillée des éléments, composants, instances et nœuds dans React

Cet article présente principalement les éléments, composants, instances et nœuds dans React. Maintenant, je le partage avec vous et le donne comme référence.

La série approfondie de React fournit une explication approfondie des concepts, fonctionnalités et modèles clés de React, dans le but d'aider chacun à approfondir sa compréhension de React et à utiliser React de manière plus flexible dans ses projets.

Les éléments, composants, instances et nœuds dans React sont quatre concepts étroitement liés dans React, et ce sont également quatre concepts qui peuvent facilement dérouter les débutants de React. Les cadres vétérans présenteront désormais en détail ces quatre concepts, ainsi que les liens et les différences entre eux, pour satisfaire la curiosité des étudiants qui aiment mâcher des mots et aller au fond des choses (les cadres vétérans en font partie).

Element (Element)

L'élément React est en fait un simple objet JavaScript. Un élément React correspond à une partie du DOM sur l'interface, décrivant la structure et la structure. de cette partie du DOM. Généralement, nous créons des éléments React via la syntaxe JSX, par exemple :

const element = <h1 className=&#39;greeting&#39;>Hello, world</h1>;

l'élément est un élément React. Pendant le processus de compilation, la syntaxe JSX sera compilée dans un appel à React.createElement(). Le nom de la fonction montre également que la syntaxe JSX renvoie un élément React. Le résultat compilé de l'exemple ci-dessus est :

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);

Enfin, la valeur de l'élément est un simple objet JavaScript similaire au suivant :

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

Les éléments React peuvent être divisés en deux catégories : éléments de type DOM et éléments de type composant. Les éléments de type DOM utilisent des nœuds DOM tels que h1, p, p pour créer des éléments React. L'exemple précédent est un élément de type DOM ; les éléments de type composant utilisent des composants React pour créer des éléments React, par exemple :

const buttonElement = <Button color=&#39;red&#39;>OK</Button>;

buttonElement est un élément de type composant, et sa valeur est :

const buttonElement = {
 type: 'Button',
 props: {
  color: 'red',
  children: 'OK'
 }
}

Pour les éléments de type DOM, car ils correspondent directement aux nœuds DOM de la page, React sait comment rendre. Cependant, pour les éléments de type composant, tels que ButtonElement, React ne peut pas savoir directement dans quel type de page DOM le ButtonElement doit être rendu. Dans ce cas, le composant lui-même doit fournir des informations sur le nœud DOM que React peut reconnaître. être discuté lors de l’introduction du composant.

Avec l'élément React, comment doit-on l'utiliser ? En fait, dans la plupart des cas, nous n'utiliserons pas directement les éléments React. React restituera automatiquement la page finale DOM basée sur les éléments React en interne. Pour être plus précis, les éléments React décrivent la structure du DOM virtuel de React, et React restituera le vrai DOM de la page basé sur le DOM virtuel.

Composant (Composant)

Le composant React devrait être le concept le plus familier dans React. React utilise l'idée de composants pour diviser l'interface en modules réutilisables. Chaque module est un composant React. Une application React est composée de plusieurs composants, et un composant complexe peut également être composé de plusieurs composants simples.

Les composants React sont étroitement liés aux éléments React. La fonction principale des composants React est de renvoyer des éléments React. Vous avez peut-être des questions ici : les éléments React ne devraient-ils pas être renvoyés par React.createElement() ? Mais l'appel de React.createElement() lui-même nécessite également qu'une « personne » soit responsable, et le composant React est cette « personne responsable ». Le composant React est chargé d'appeler React.createElement() et de renvoyer l'élément React pour que React le restitue en interne dans la page DOM finale.

Puisque la fonction principale d'un composant est de renvoyer des éléments React, le composant le plus simple est une fonction qui renvoie des éléments React :

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

Bienvenue est un composant défini avec une fonction. Si un composant est défini à l'aide d'une classe, la méthode render du composant se charge de renvoyer l'élément React, par exemple :

class Welcome extends React.Component {
 render() {
  return <h1>Hello, {this.props.name}</h1>;
 }
}

En fait, pour les composants définis à l'aide d'une classe, la méthode render est la seule méthode requise. Les méthodes de cycle de vie des autres composants sont uniquement destinées au rendu et ne sont pas nécessaires.

Considérons maintenant l'exemple suivant :

class Home extends React.Component {
 render() {
  return (
   <p>
    <Welcome name=&#39;老干部&#39; />
    <p>Anything you like</p>
   </p>
  )
 }
}

Le composant Home utilise le composant Welcome, et l'élément React renvoyé est :

{
 type: 'p',
 props: {
  children: [
   {
    type: 'Welcome',
    props: {
     name: '老干部'
    }
   },
   {
    type: 'p',
    props: {
     children: 'Anything you like'
    }
   }，
  ]
 }
}

Pour cette structure, React sait Comment rendre les nœuds avec type = 'p' et type = 'p', mais je ne sais pas comment rendre les nœuds avec type = 'Welcome' Lorsque React découvre que Welcome est un composant React (le jugement est basé sur le. fait que la première lettre de Welcome est en majuscule), il déterminera comment restituer le nœud Welcome en fonction de l'élément React renvoyé par le composant Welcome. L'élément React renvoyé par le composant Welcome est :

{
 type: 'h1',
 props: {
  children: 'Hello, 老干部'
 }
}

Cette structure ne contient que des nœuds DOM, et React sait comment effectuer le rendu. Si cette structure contient également d'autres nœuds de composants, React répétera le processus ci-dessus et continuera à analyser les éléments React renvoyés par les composants correspondants jusqu'à ce que les éléments React renvoyés ne contiennent que des nœuds DOM. Ce processus récursif permet à React d'obtenir les informations complètes sur la structure DOM de la page, et le travail de rendu vient naturellement.

De plus, si vous y réfléchissez bien, vous constaterez que la réutilisation des composants React consiste essentiellement à réutiliser les éléments React renvoyés par ce composant. Les éléments React sont l'unité la plus basique des applications React.

Instance

这里的实例特指React组件的实例。React 组件是一个函数或类，实际工作时，发挥作用的是React 组件的实例对象。只有组件实例化后，每一个组件实例才有了自己的props和state，才持有对它的DOM节点和子组件实例的引用。在传统的面向对象的开发方式中，实例化的工作是由开发者自己手动完成的，但在React中，组件的实例化工作是由React自动完成的，组件实例也是直接由React管理的。换句话说，开发者完全不必关心组件实例的创建、更新和销毁。

节点 (Node)

在使用PropTypes校验组件属性时，有这样一种类型：

MyComponent.propTypes = { 
 optionalNode: PropTypes.node,
}

PropTypes.node又是什么类型呢？这表明optionalNode是一个React 节点。React 节点是指可以被React渲染的数据类型，包括数字、字符串、React 元素，或者是一个包含这些类型数据的数组。例如：

// 数字类型的节点
function MyComponent(props) {
 return 1;
}

// 字符串类型的节点
function MyComponent(props) {
 return 'MyComponent';
}

// React元素类型的节点
function MyComponent(props) {
 return <p>React Element</p>;
}

// 数组类型的节点，数组的元素只能是其他合法的React节点
function MyComponent(props) {
 const element = <p>React Element</p>;
 const arr = [1, &#39;MyComponent&#39;, element];
 return arr;
}

// 错误，不是合法的React节点
function MyComponent(props) {
 const obj = { a : 1}
 return obj;
}

最后总结一下，React 元素和组件的概念最重要，也最容易混淆；React 组件实例的概念大家了解即可，几乎使用不到；React 节点有一定使用场景，但看过本文后应该也就不存在理解问题了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

通过JS中利用FileReader如何实现上传图片前本地预览功能

根据select标签设置默认选中的选项方法该怎么做？

原生JavaScript中如何实现todolist功能

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!