ReactJS-Komponenten (Components)

In diesem Kapitel lernen wir, wie man Komponenten kombiniert, um Anwendungen einfacher zu warten. Diese Methode ermöglicht es, Komponenten zu aktualisieren und zu ändern, ohne die übrige Seite zu beeinflussen.

Beispiel einer komponentenbasierten Instanz ohne Zustand

In dem folgenden Beispiel ist der erste Komponente App. Diese Komponente ist der Besitzer von Header und Content. Wir erstellen Header und Content und fügen sie in das JSX-Baumstruktur des App-Komponenten hinzu. Nur die App-Komponente muss exportiert werden.

App.jsx

import　React　from　'react';
class App extends React.Component {　　　render() {
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<Content/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Content extends React.Component {　　　render() {
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>Content</h2>
　　　　　　　　　　　　<p>The content text!!!</p>/p>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App　/,　document.getElementById('app'));

Das obige Code erzeugt das folgende Ergebnis.

Beispiel einer komponentenbasierten Instanz mit Zustand

In diesem Beispiel wird der Zustand des Besitzerkomponenten (App) gesetzt. Header Das Komponente wurde wie im vorherigen Beispiel hinzugefügt, da es keine Zustandsanforderungen hat. Wir erstellen table und tbody-Elemente anstatt von content Marken verwenden, in denen wir dynamisch einen TableRow für jeden Objekt in der Datenarray einfügen.

Man kann erkennen, dass wir ECMAScript 2015Pfeilnotation (=>) sieht viel sauberer aus als die alte JavaScript-Syntax. Dies hilft uns, mit weniger Codezeilen Elemente zu erstellen. Es ist besonders nützlich, wenn wir eine Liste mit vielen Elementen erstellen müssen.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　　　constructor()　{　　　　　　super();
　　　　　　this.state　=　{
　　　　　　　　　data:　
　　　　　　　　　[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":1,
　　　　　　　　　　　　　　　"name":"Foo",
　　　　　　　　　　　　　　　"age":"}}20"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":2,
　　　　　　　　　　　　　　　"name":"Bar",
　　　　　　　　　　　　　　　"age":"}}30"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":3,
　　　　　　　　　　　　　　　"name":"Baz",
　　　　　　　　　　　　　　　"age":"}}40"
　　　　　　　　　　　　}
　　　　　　　　　]
　　　　　　}
　　　}　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　<tbody>
　　　　　　　　　　　　　　　　　　{this.state.data.map((person,　i)　=>　<TableRow　key　=　{i}　
　　　　　　　　　　　　　　　　　　　　　data　=　{person}　/>)}
　　　　　　　　　　　　　　　</tbody>
　　　　　　　　　　　　</table>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　TableRow　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<tr>
　　　　　　　　　　　　<td>{this.props.data.id}</td>
　　　　　　　　　　　　<td>{this.props.data.name}</td>
　　　　　　　　　　　　<td>{this.props.data.age}</td>
　　　　　　　　　</tr>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,　document.getElementById('app'));

Beachten Sie, dass wir inside map ()-Funktion key = { i } verwendet haben. Dies hilft React, nur erforderliche Elemente zu aktualisieren, anstatt die gesamte Liste bei jeder Änderung neu darzustellen. Dies ist eine enorme Leistungserhöhung für eine große Anzahl dynamisch erstellter Elemente.