Detaillierte Interpretation von Elementen, Komponenten, Instanzen und Knoten in React

In diesem Artikel werden hauptsächlich die Elemente, Komponenten, Instanzen und Knoten in React vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Die ausführliche React-Reihe bietet eine ausführliche Erklärung der wichtigsten Konzepte, Funktionen und Muster in React und soll jedem dabei helfen, sein Verständnis von React zu vertiefen und React flexibler in seinen Projekten zu nutzen.

Elemente, Komponenten, Instanzen und Knoten in React sind vier eng verwandte Konzepte in React, und es sind auch vier Konzepte, die React-Anfänger leicht verwirren können. Jetzt werden erfahrene Kader diese vier Konzepte sowie die Verbindungen und Unterschiede zwischen ihnen im Detail vorstellen, um die Neugier von Studenten zu befriedigen, die gerne Wörter kauen und den Dingen auf den Grund gehen (zu ihnen gehören erfahrene Kader).

Element (Element)

React-Element ist eigentlich ein einfaches JavaScript-Objekt, das einem Teil des DOM auf der Schnittstelle entspricht und dessen Struktur und Struktur beschreibt dieses Teils des DOM. Im Allgemeinen erstellen wir React-Elemente über die JSX-Syntax, zum Beispiel:

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

element ist ein React-Element. Während des Kompilierungsprozesses wird die JSX-Syntax in einen Aufruf von React.createElement() kompiliert. Aus dem Funktionsnamen ist auch ersichtlich, dass die JSX-Syntax ein React-Element zurückgibt. Das kompilierte Ergebnis des obigen Beispiels ist:

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

Schließlich ist der Wert von element ein einfaches JavaScript-Objekt ähnlich dem folgenden:

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

React-Elemente können in zwei Kategorien unterteilt werden: DOM-Typ Elemente und Ein Element vom Komponententyp. Elemente vom Typ DOM verwenden DOM-Knoten wie h1, p, p usw., um React-Elemente zu erstellen. Das vorherige Beispiel ist ein Element vom Typ DOM, das Elemente vom Typ DOM verwendet, um React-Elemente zu erstellen, zum Beispiel:

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

buttonElement ist ein Element vom Komponententyp. Sein Wert lautet:

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

Bei Elementen vom Typ DOM weiß React, wie sie gerendert werden, da sie direkt den DOM-Knoten der Seite entsprechen. Bei Komponententypelementen wie buttonElement kann React jedoch nicht direkt wissen, in welche Art von Seiten-DOM das buttonElement gerendert werden soll. In diesem Fall muss die Komponente selbst DOM-Knoteninformationen bereitstellen, die React erkennen kann werden bei der Einführung der Komponente ausführlich besprochen.

Wie sollten wir das React-Element verwenden? Tatsächlich werden wir in den meisten Fällen React-Elemente nicht direkt verwenden. React rendert das endgültige Seiten-DOM automatisch basierend auf den React-Elementen. Genauer gesagt beschreiben React-Elemente die Struktur des virtuellen DOM von React, und React rendert das reale DOM der Seite basierend auf dem virtuellen DOM.

Komponente (Komponente)

React-Komponente sollte das bekannteste Konzept in React sein. React nutzt die Idee der Komponenten, um die Schnittstelle in wiederverwendbare Module aufzuteilen. Jedes Modul ist eine React-Komponente. Eine React-Anwendung besteht aus mehreren Komponenten, und eine komplexe Komponente kann auch aus mehreren einfachen Komponenten bestehen.

React-Komponenten sind eng mit React-Elementen verbunden. Die Kernfunktion von React-Komponenten besteht darin, React-Elemente zurückzugeben. Möglicherweise haben Sie hier Fragen: Sollten React-Elemente nicht von React.createElement() zurückgegeben werden? Aber auch der Aufruf von React.createElement() selbst erfordert, dass eine „Person“ verantwortlich ist, und die React-Komponente ist diese „verantwortliche Person“. Die React-Komponente ist dafür verantwortlich, React.createElement() aufzurufen und das React-Element zurückzugeben, damit React es intern im endgültigen Seiten-DOM rendert.

Da die Kernfunktion einer Komponente darin besteht, React-Elemente zurückzugeben, ist die einfachste Komponente eine Funktion, die React-Elemente zurückgibt:

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

Welcome ist eine Komponente, die mit einer Funktion definiert ist. Wenn eine Komponente mithilfe einer Klasse definiert wird, ist die Render-Methode der Komponente für die Rückgabe des React-Elements verantwortlich, zum Beispiel:

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

Tatsächlich ist für Komponenten, die mithilfe einer Klasse definiert werden, nur die Render-Methode erforderlich Methode Andere Komponenten Die Lebenszyklusmethoden dienen nur dem Rendern und sind nicht erforderlich.

Betrachten Sie nun das folgende Beispiel:

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

Die Home-Komponente verwendet die Welcome-Komponente und das zurückgegebene React-Element lautet:

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

Für diese Struktur weiß React, wie der Typ gerendert wird = 'p' und type = 'p' Knoten, aber ich weiß nicht, wie ich den Knoten mit type = 'Welcome' rendern soll. Wenn React feststellt, dass Welcome eine React-Komponente ist (basiert die Beurteilung auf der Tatsache, dass die erste Das Begrüßungsschreiben wird groß geschrieben), es wird entsprechend der Welcome-Komponente zurückgegeben. Das React-Element bestimmt, wie der Welcome-Knoten gerendert wird. Das von der Welcome-Komponente zurückgegebene React-Element lautet:

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

Diese Struktur enthält nur DOM-Knoten und React weiß, wie es gerendert wird. Wenn diese Struktur auch andere Komponentenknoten enthält, wiederholt React den obigen Vorgang und analysiert die von den entsprechenden Komponenten zurückgegebenen React-Elemente weiter, bis die zurückgegebenen React-Elemente nur noch DOM-Knoten enthalten. Dieser rekursive Prozess ermöglicht es React, die vollständigen DOM-Strukturinformationen der Seite abzurufen, und die Rendering-Arbeit erfolgt natürlich von selbst.

Wenn Sie darüber hinaus sorgfältig darüber nachdenken, können Sie feststellen, dass die Wiederverwendung von React-Komponenten im Wesentlichen darin besteht, die von dieser Komponente zurückgegebenen React-Elemente wiederzuverwenden.

Instanz

这里的实例特指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功能

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation von Elementen, Komponenten, Instanzen und Knoten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!