Mit welcher Methode werden Elemente in React erstellt?

So erstellen Sie Elemente in React: 1. Verwenden Sie die JSX-Syntax, um React-Elemente zu erstellen, mit einer Syntax wie „const element =

Hello, world

;“ 2. Durch „React.createElement(type ,props, children)“-Syntax zum Erstellen von React-Elementen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie erstellt man Elemente in React?

React-Element erstellen

React-Element

React-Element (React-Element), die kleinste Grundeinheit in React. Ein React-Element ist eigentlich ein einfaches JavaScript-Objekt (allgemein bekannt als: virtuelles DOM). Ein React-Element entspricht einem Teil des DOM auf der Schnittstelle und beschreibt die Struktur und den Rendering-Effekt dieses Teils des DOM.

React-Elemente sind keine echten DOM-Elemente, daher gibt es keine Möglichkeit, die native API direkt im DOM aufzurufen.

Rendering-Prozess: Reagieren Sie auf die Elementbeschreibung des virtuellen DOM und rendern Sie dann das reale DOM basierend auf dem virtuellen DOM.

• Virtuelles DOM: Es verwendet die JS-Objektstruktur, um die DOM-Struktur in HTML zu simulieren. Bei Batch-Hinzufügungen, -Löschungen, -Änderungen und -Abfragen werden die JS-Objekte zunächst direkt bearbeitet und schließlich auf den echten DOM-Baum aktualisiert. Weil der direkte Betrieb von js-Objekten schneller ist als die APIs, die DOM betreiben.
• React-Elemente sind JS-Objekte, die React mitteilen, was Sie auf der Seite anzeigen möchten.

Allgemein gilt:

Elemente sind reine Objekte, die zur Beschreibung von DOM-Knoten oder React-Komponenten verwendet werden. Elemente können andere Elemente innerhalb ihrer eigenen Attribute enthalten. Die Kosten für die Erstellung eines Elements sind sehr gering. Sobald ein Element erstellt wurde, ändert es sich nie.

Zum Beispiel: Wir verwenden die JSX-Syntax, um ein React-Element zu erstellen

const element = <h1 id="Hello-world">Hello, world</h1>;

Während des Kompilierungsprozesses wird JSX in einen Aufruf von React.createElement() kompiliert:

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

Endlich , element Der Wert wird in ein js-Objekt kompiliert, ähnlich dem folgenden

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }，
    _context: Object,
    _owner: null,
    key: null,  
    ref: null, 
}

Methoden zum Erstellen von React-Elementen

1. Verwenden Sie die JSX-Syntax

const element = <h1 id="Hello-world">Hello, world</h1>;

2.React.createElement(type,props,children )

Syntax Parameterbeschreibung

Typ: Gibt den Typ des Elements an, z. B. h1, div, p usw. Es kann eine

• Zeichenfolge sein (z. B. div, p, h1...)

• Komponente (Benutzerdefinierte Komponente: eine von einem Konstruktor erstellte Komponente oder eine von einer Klasse erstellte Komponente ; react native Component: React.Fragment usw.) 自定义组件：构造函数创建的组件或class创建的组件；react 原生组件：React.Fragment等）

props：表示该元素上的属性，使用 JavaScript 对象的方式表示

children：表示该元素内部的内容，可以是文字，也可以继续嵌套另一个React.createElement(type,props,children)。

其中 children 可以是一个 React.createElement 列表

props: Stellt die Attribute des Elements dar, ausgedrückt mit JavaScript-Objekten

children: Stellt den Inhalt innerhalb des Elements dar, der sein kann Text oder kann weiterhin verschachtelt werden Ein weiterer React.createElement(type,props,children). wobei untergeordnete Elemente eine React.createElement-Liste sein oder als mehrere Parameter geschrieben werden können:

  <script>
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},[child1,child2]);

    ReactDOM.render(
        content,
        document.getElementById("example")
    );
    //或者
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},child1,child2);

    ReactDOM.render(
        content,
        document.getElementById("example")
    ); 
  </script>

🎜🎜🎜React.createElement gibt Instanzobjektattribute zurück🎜

const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)

empfohlenes Lernen: „🎜React-Video-Tutorial🎜 „🎜

Das obige ist der detaillierte Inhalt vonMit welcher Methode werden Elemente in React erstellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!