JavaScript, React und objektorientierte Programmierung (OOP)

Unterstützung der Kapselung in React

Kapselung ist ein grundlegendes Konzept in der objektorientierten Programmierung, bei dem Daten und die Methoden, die auf diesen Daten arbeiten, in einer einzigen Programmierungseinheit organisiert werden. In der OOP wird diese Programmierungseinheit als Klasse bezeichnet, und in React ist es eine Komponente.

Der folgende Code zeigt eine benutzerdefinierte React-Komponente namens Ad. Diese React-Komponente kapselt Logik, Daten und das Rendern von HTML, um eine benutzerdefinierte Anzeige auf einer Webseite anzuzeigen. Beachten Sie, dass die Komponente über eigene Daten verfügt: eine Variable namens id, wie in Zeile 6 dargestellt, und eine Variable namens defaultAd in Zeile 9. Die Variable defaultAd enthält den Standard-Anzeigeninhalt, der in der Komponente gerendert werden soll. Außerdem enthält die Komponente eine Schaltfläche. Das Standard-Klickverhalten der Schaltfläche wird in der Komponente in einer Funktion namens handleClick in Zeile 16 definiert. Die ab Zeile 20 beginnende return-Anweisung ist der HTML-Code, der auf der Webseite, zu der die Komponente hinzugefügt wird, gerendert wird.

1 import './App.css';
2 import Ad from './components/Ad';
3 import Header from './components/Header';
4
5 const App = () => {
6    return (
7    <div className="App">
8      <Header />
9      <Ad />
10       <Ad onClick={() => {prompt('Is our stuff really the best?')}}>
11        Buy my stuff now because it's the best!
12      </Ad>
13      <Ad onClick={() => {alert('Take advantage of overnight shipping and buy more 
14 stuff now!')}}>
15        We offer overnight shipping!
16     </Ad>    
17    </div>
18  );
19 }
20
21 export default App;

Abbildung 1 unten zeigt das Ergebnis der Darstellung der Ad-Komponente mit ihren Standarddaten und ihrem Standardverhalten auf einer Webseite.

Wichtig bei der Ad-Komponente im vorherigen Codeblock ist, dass alle Daten, das Verhalten und das Rendering-HTML für die Komponente privat sind, ähnlich wie Daten und Logik für eine Klasse in OOP privat sind. Diese Privatsphäre ermöglicht es Entwicklern, die Komponente auf jeder React-Webseite wiederzuverwenden.

Entwickler können die internen Daten und die Logik der Komponente nur ändern, indem sie diese Informationen als Parameter (auch Props genannt) oder als Child Data an die Komponente übergeben. Wir werden die Auswirkungen der Verwendung von Props und Child Data im Abschnitt über Polymorphismus besprechen.

Der folgende Code ist die Hauptwebseitenkomponente für die Beispielanwendung, um Komponenten auf der Hauptanwendungswebseite App.js zu deklarieren. Beachten Sie, dass die Ad-Komponente mit ihrem Standardverhalten nur als <Ad />-Tag deklariert werden muss, wie in Zeile 9 angegeben. Alle Daten, Logik und Rendering-Informationen, die in der <Ad />-Komponente enthalten sind, werden automatisch zur Webseite hinzugefügt.

1 import './App.css';
2 import Ad from './components/Ad';
3 import Header from './components/Header';
4
5 const App = () => {
6    return (
7    <div className="App">
8      <Header />
9      <Ad />
10       <Ad onClick={() => {prompt('Is our stuff really the best?')}}>
11        Buy my stuff now because it's the best!
12      </Ad>
13      <Ad onClick={() => {alert('Take advantage of overnight shipping and buy more 
14 stuff now!')}}>
15        We offer overnight shipping!
16     </Ad>    
17    </div>
18  );
19 }
20
21 export default App;

Beachten Sie diesen Eintrag ab Zeile 10:

<Ad onClick={() => {prompt('Is our stuff really the best?')}}>
    Buy my stuff now because it's the best!
 </Ad>

Durch das Einfügen der Zeile Buy my stuff now because it's the best! zwischen <Ad> und <Ad /> wird das standardmäßige Rendering-Verhalten der Komponente überschrieben, sodass der folgende Inhalt angezeigt wird (siehe Abbildung 2):

Dies geschieht, weil wir untergeordnete Daten in die Komponente eingefügt haben. Dies ist ein Beispiel dafür, wie man in der React-Programmierung Polymorphismus erreichen kann.

Polymorphismus: Daten überschreiben

Der Begriff Polymorphismus bedeutet viele Formen. Ein Beispiel für Polymorphismus in OOP ist eine Klasse, die mehrere Methoden mit demselben Namen, aber unterschiedlichen Parametersignaturen hat. Die Parameter und ihr Typ bestimmen, wie sich die Methode verhält.

Stellen Sie sich zum Beispiel eine OOP-Klasse namens Document vor. Die Document-Klasse hat zwei Methoden, wie folgt:

Document.print(fileName) und Document.print(fileName, URL)

Ein Aufruf von Document.print(fileName) gibt das Dokument in einer Datei auf dem lokalen Computer aus. Ein Aufruf von Document.print(fileName, URL) gibt das Dokument an einen Ort im Internet aus, der durch die URL definiert ist. Beide Methoden haben den gleichen Namen, print, verhalten sich jedoch je nach Parametrisierung der Methode unterschiedlich.

Eine React-Komponente kann auf ähnliche Weise ein polymorphes Verhalten implementieren. Das folgende Beispiel ist eine Wiederholung der Ad-Komponente, um die Verwendung der childen-Eigenschaft in React zu zeigen, mit der das Standardverhalten überschrieben wird. Beachten Sie insbesondere die Anweisung {children ? children : defaultAd} in Zeile 24.

1 import React from 'react'
2 import { useId, useState } from 'react';
3 import DateReporter from './DateReporter';
4
5 const Ad = ({ children, onClick }) => {
6    const id = useId();
7    const [message, setMessage] = useState('');
8    const [showOopDemoMessage, setShowOopDemo] = useState(false);
9    const defaultAd =  `Default advertisement for the Ad component [${id}].`;
10
11   const showMessage = () => {
12        setMessage('Go to our website and buy our stuff!');
13        setShowOopDemo(true);
14    }
15
16    const handleClick = () => {
17        onClick ? onClick() : showMessage();
18    }
19
20    return (
21        <div className="oppdemo-box">
22            <div id={id} >
23               <div className="oppdemo-font">
24                    {children ? children : defaultAd}
25                </div>
26                <div>
27                    <button className="oppdemo-button" onClick={handleClick}>
28                        Click me
29                    </button>
30                </div>
31            </div>
32            <div className={showOopDemoMessage ? 'oppdemo-message' : ''}>
33                {message}
34            </div>
35        </div>
36    )
37 }
38
39 export default Ad

Die children-Eigenschaft ist eine vom React-Framework bereitgestellte Eigenschaft, die automatisch den Informationen zwischen den öffnenden und schließenden Tags einer Komponente zugeordnet wird. Wir rufen also den HTML-Code in dieser Codezeile von oben ab:

<Ad>
Buy my stuff now because it's the best!
</Ad> 

Die Zeichenkette Buy my stuff now because it's the best! wird implizit der children-Eigenschaft der Ad-Komponente zugewiesen. Darüber hinaus besagt die in Zeile 24 des obigen Codes ausgedrückte Logik:

{children ? children : defaultAd}

dass, wenn children-Daten als Daten zwischen den <Ad>- und <Ad />-Tags übergeben wurden, die children-Daten verwendet werden, ansonsten aber die Standarddaten beim Rendern der Komponente genutzt werden.

Polymorphismus: Verhalten überschreiben

Die Möglichkeit, das Standardverhalten mithilfe der children-Eigenschaft zu überschreiben, ist eine Möglichkeit, wie React Polymorphismus unterstützt. Die andere Möglichkeit besteht darin, Funktionen als Eigenschaft zu übergeben, die das Standardverhalten innerhalb der Komponente überschreiben.

Schauen wir uns den folgenden Code aus den Zeilen 16-18 oben an:

const handleClick = () => {
    onClick ? onClick() : showMessage();
}

Beachten Sie, dass die Anweisung innerhalb der Funktion handleClick einen ternären Ausdruck verwendet, um zu prüfen, ob eine Variable namens onClick vorhanden ist. Diese benutzerdefinierte Variable wird als Attribut an die Komponente übergeben, wenn die Ad-Komponente deklariert wird.

Wenn die Ad-Komponente (als <Ad />) deklariert wird, hat die Instanz der Komponente keine Eigenschaften. Daher verwendet die Funktion handleClick die Funktion showMessage(), und das in Abbildung 3 gezeigte Verhalten wird gerendert, wenn auf die Schaltfläche geklickt wird.

Der folgende Code aus der Haupt-App-Komponente zeigt, wie das <Ad /> Klickverhalten überschrieben werden kann. Die Ad-Komponente wird deklariert, dann wird ein onClick-Attribut deklariert und der dem Attribut zugewiesene Wert wird als Eigenschaft an die Komponente übergeben. In diesem Fall ist der dem onClick-Attribut zugewiesene Wert ein Verweis auf die JavaScript-Funktion prompt().

<Ad onClick={() => {prompt('Is our stuff really the best?')}}>
  Buy my stuff now because it's the best!
</Ad>

Wenn der Benutzer also auf die Schaltfläche Click Me klickt, wird die Funktion prompt() anstelle der standardmäßigen Funktion showMessage() aufgerufen, die intern in der Ad-Komponente deklariert ist. Abbildung 4 zeigt das Ergebnis, wenn ein Benutzer auf die Schaltfläche Click Me mit dem überschriebenen Klickverhalten klickt.

Für den OOP-Entwickler bedeutet dies, dass React das Überschreiben des internen Verhaltens in einer Komponente unterstützt, und zwar auf die gleiche Weise, wie eine Methode in einer OOP-Klasse überschrieben werden kann. Dies ist ein weiteres Beispiel dafür, wie Polymorphismus auf die React-Programmierung angewendet wird.

Verwendung der Komposition in React und JavaScript

Komposition ist die objektorientierte Technik, bei der untergeordnete Objekte in einem einzigen übergeordneten Objekt zusammengefasst werden. In React werden Komponenten zu einer übergeordneten Komponente zusammengefügt, um eine Komposition zu erreichen.

Der folgende Code beschreibt eine React-Komponente namens DateReporter, die das aktuelle Datum anzeigt.

import React from 'react'

const DateReporter = () => {

    const newDate = new Date().toLocaleDateString();;
    return (
        <div className="datereporter-box">
            <div>The current date is:</div>
            <div>{newDate}</div>
        </div>
    )
}

export default DateReporter

Und dieser Codeblock zeigt eine Version der Ad-Komponente, die die DateReporter-Komponente mithilfe der Komposition in Zeile 36 einbindet.

1 import React from 'react'
2 import { useId, useState } from 'react';
3 import DateReporter from './DateReporter';
4
5 const Ad = ({ children, onClick }) => {
6    const id = useId();
7    const [message, setMessage] = useState('');
8    const [showOopDemoMessage, setShowOopDemoMessage] = useState(false);
9    const defaultAd =
10        `Default advertisement for the Ad component [${id}].`;
11
12    const showMessage = () => {
13        setMessage('Go to our website and buy our stuff!');
14        setShowOopDemoMessage(true);
15    }
16
17    const handleClick = () => {
18        onClick ? onClick() : showMessage();
19    }
20
21    return (
22       <div className="oppdemo-box">
23            <div id={id} >
24               <div className="oppdemo-font">
25                    {children ? children : defaultAd}
26                </div>
27                <div>
28                    <button className="oppdemo-button" onClick={handleClick}> 
29                        Click me
30                   </button>
31                </div>
32            </div>
33            <div className={showOopDemoMessage ? 'oppdemo-message' : ''}>
34                {message}
35            </div>
36            <DateReporter />
37        </div>
38    )
39 }
40
41 export default Ad

Das Ergebnis des Hinzufügens der <DateReporter />-Komponente zur <Ad />-Komponente ist unten in Abbildung 5 dargestellt.

Wie bei der OOP-Programmierung ist die Komposition eine leistungsstarke Technik, um die Funktionalität von React-Komponenten zu erweitern und gleichzeitig die Umgestaltung von Komponenten zu vereinfachen, wenn Änderungen erforderlich sind. Beispielsweise kann das Hinzufügen neuer Funktionen zu einer Komponente einfach eine zusätzliche untergeordnete Komponente erfordern. Wenn für die Umgestaltung eine Änderung an einer untergeordneten Komponente erforderlich ist, die sich bereits in einer übergeordneten Komponente befindet, kann diese untergeordnete Komponente unabhängig von der übergeordneten Komponente geändert werden, ohne dass der Code in der übergeordneten Komponente geändert werden muss.

Die Komposition macht die groß angelegte Softwareentwicklung in React einfacher und sicherer.

Alles zusammenfügen

React ist ein leistungsstarkes und flexibles Framework zur Erstellung funktionsreicher Webanwendungen, aber die Übernahme und Beherrschung erfordert Engagement und Zeit. Für die meisten Entwickler ist die Programmierung in React eine Lebenseinstellung. Die besonderen Merkmale und Funktionen des Frameworks sowie viele Extras machen das Erlernen von React zu einer lohnenden Investition.

Entwickler können es schneller erlernen, wenn sie Kenntnisse in JavaScript, React und objektorientierten Programmierkonzepten kombinieren. Sie werden intuitiv verstehen, wie komponentenbasierte Frameworks funktionieren, insbesondere im Zusammenhang mit Konzepten wie Kapselung, Polymorphismus und Komposition.