ReactJS - Komponenten

In diesem Kapitel erfahren Sie, wie Sie Komponenten kombinieren, um die Wartung der App zu vereinfachen. Mit diesem Ansatz können Sie Ihre Komponenten aktualisieren und ändern, ohne den Rest der Seite zu beeinflussen.

Staatenloses Beispiel

Unsere erste Komponente im folgenden Beispiel ist App. Diese Komponente ist Eigentümer vonHeader und Content. Wir schaffenHeader und Content separat und fügen Sie es einfach in JSX-Baum in unserem AppKomponente. NurApp 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>
         </div>
      );
   }
}
export default App;

Um dies auf der Seite rendern zu können, müssen wir es importieren main.js Datei und Anruf reactDOM.render(). Wir haben dies bereits beim Einstellen der Umgebung getan.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Der obige Code generiert das folgende Ergebnis.

Stateful Beispiel

In diesem Beispiel legen wir den Status für die Eigentümerkomponente fest (App). DasHeaderDie Komponente wird wie im letzten Beispiel hinzugefügt, da sie keinen Status benötigt. Anstelle von Content-Tags erstellen wirtable und tbody Elemente, in die wir dynamisch einfügen werden TableRow für jedes Objekt aus dem data Array.

Es ist ersichtlich, dass wir die Pfeilsyntax von EcmaScript 2015 (=>) verwenden, die viel sauberer aussieht als die alte JavaScript-Syntax. Dies hilft uns, unsere Elemente mit weniger Codezeilen zu erstellen. Dies 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'));

Note - Beachten Sie, dass wir verwenden key = {i} inside map()Funktion. Auf diese Weise kann React nur die erforderlichen Elemente aktualisieren, anstatt die gesamte Liste neu zu rendern, wenn sich etwas ändert. Dies ist eine enorme Leistungssteigerung für eine größere Anzahl dynamisch erstellter Elemente.