Was sind die React-Eigenschaften? Ausführliche Erläuterung zur Verwendung von Reaktionsattributen, Ereignissen und Teilen

In diesem Artikel geht es hauptsächlich um die Verwendung von Attributen in Reagieren sowie um die Verwendung von Reaktionsereignissen und das Teilen. Als Nächstes lesen wir diesen Artikel

Erklären Sie den Hauptinhalt dieses Artikels Verwendung von Attributen in React, der Erwerb von React-spezifischen Tags und die Verwendung von React-Sharing usw. Die Details sind wie folgt:

• React's State-Attribut

• Reacts Props-Attribut

• React-Ereignisbindung und bidirektionale Interaktion von Daten

• Wiederverwendung und Überprüfung von React-Komponenten

• Refs von React-Komponenten

• Gemeinsame Operations-Mixins zwischen unabhängigen React-Komponenten

1 Zustandsattribut

• Reacts Zustandsmaschine wird verwendet, um die Daten seines eigenen Moduls zu ändern.

• Der Zustandsbereich gehört nur zur aktuellen Klasse und wird nicht verschmutzt andere Module;

• Initialisierung: this.state = {Benutzername: „XXX“};

• Die initialisierte Statuseinstellung wird im Konstruktor platziert ;

• Status ändern: this.setState({Benutzername: „AAA“});

• Zusammenfassung: Status ist die Einstellung des Moduls eigene Attribute.

2. Requisitenattribute

• Requisiten sind externe Attribute für das Modul (Datentransfer auf Eltern-Kind-Ebene)

• Die Übergabemethode erfordert Parametereinstellungen;

• wird im Empfangsmodul verwendet: this.props.xxx;

3 . Zwei-Wege-Interaktion zwischen Ereignisbindung und Daten

3.1 Ereignisbindung

• Der erste Weg: Binden Sie dies im Konstruktor: this.focus = this.focus (this);

• oder Aufrufbindung: onClick={this.focus.bind(this,99)}
  

• (dieser im Bindungswert wird zum Binden der Vorlage verwendet, 99 wird für die Parameterübertragung verwendet)

3.2 Zwei-Wege-Bindung von Daten

• Übergeordnete Seite übergibt an untergeordnete Seite (es5 folgt)

• Untergeordnete Seite übergibt Parameter an übergeordnete Seite
  

• Übergeben Sie auf der untergeordneten Seite die Parameter zwischen Gruppen, indem Sie die von der übergeordneten Seite übergebenen Ereignis-Requisiten aufrufen

• Verwenden Sie das onChange-Ereignis für die Echtzeitüberwachung

3.3 Datenanforderungsmethode

• Traditionelle AJAX-Methode

• Versprechen bereitgestellt von ES6

promise.then( null, function( reason ){
    /* rejection */} );// 等价于promise.catch( function( reason ){
    /* rejection */} );

• Versprechen von ES6 – verwenden Sie Fetch, um HTTP-Anfragen zu implementieren

fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));

4. Wiederverwendung und Überprüfung von Komponenten

4.1 Requisitenüberprüfung

• Methode 1: consttypes = {userid: React.PropTypes.number.isRequired}; BodyIndex.propTypes =types;

• Methode 2 : BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired };

• Hinweis: propTypes erfordert eine Installationsumgebung nach Version v15.5, um verwendet zu werden:npm install prop-types –save
  

• Eingeführt wie folgt: PropTypes aus „prop-types“ importieren;

• Use BodyIndex.propTypes = { userid: PropTypes.number.isRequired };

4.2 Standard-Props-Wert

• Definition: const defaultNum = {username: "Default name"};

• Verwenden Sie: BodyIndex.defaultProps = defaultNum; (Wenn Sie mehr sehen möchten, gehen Sie zur chinesischen PHP-Website React reference Learn in der Spalte des Handbuchs)

4.3 Wiederverwendung von Komponenten – Verwendung von Parametern

<BodyChild {...this.props} sex={"XXX}/>

5. Referenzen von Komponenten – Tags abrufen

• Methode 1: Ursprünglicher Weg, um Tags zu erhalten: var myButton = document.getElementById(“submitButton”); myButton.style.color = “red”;

• Methode Zwei: Legen Sie das Ref-Attribut für die Bezeichnung fest: 1a5e040aa8b0e424b112f6fe9098fa84; >

Refs ist die einzige zuverlässige Möglichkeit, auf die internen DOM-Knoten einer Komponente zuzugreifen; Wenn der Code endet, zerstören Refs automatisch den ursprünglichen Verweis auf die Unterkomponente.

• Rufen Sie Refs nicht vor dem Rendern oder Rendern auf >Missbrauchen Sie Refs nicht.

• 6. Gemeinsame Betriebsmischungen zwischen unabhängigen Komponenten

• Funktion: gemeinsame Funktionen und Code-Sharing zwischen verschiedenen Komponenten; 🎜>
Projektinstallations-Mixin:
• npm install –react-mixin@2 speichern

• Plugin importieren:

  ReactMixin aus „react-mixin“ importieren ;

Erstellen Sie eine neue freigegebene Datei – speichern Sie eine große Anzahl öffentlicher Funktionen oder Eigenschaften
Wo immer Sie sie verwenden müssen , verwenden Sie einfach diese Komponente
• import MixinLog from './mixin.js';

• Weisen Sie die gemeinsame Objektsammlung MixinLog dem aktuellen Komponentenprototyp zu: ReactMixin(BodyIndex.prototype, MixinLog);

• Erstellen Sie Funktionsaufrufe, die unterschiedlichen Anforderungen entsprechen. Das ist es, wie zum Beispiel: MixinLog.log().

• Eigenschaften: hat einen ähnlichen Lebenszyklus wie die Seite und wird nach mehrmaligem Aufruf mehrmals ausgeführt.

7. Zusammenfassung

Dieser Artikel gibt hauptsächlich eine kurze Einführung in die Verwendung der Statusattribute und die Komponentenüberprüfung und -wiederverwendung. Sie können die Software herunterladen. Gehen Sie durch Navigieren Sie zum aktuellen Ordner im Befehlsfeld und führen Sie dann „npm install“ aus, um alle Umgebungen zu installieren. Führen Sie nach Abschluss der Installation „webpack –watch“ aus und das Projekt ist zur Ausführung bereit.

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen). .

Das obige ist der detaillierte Inhalt vonWas sind die React-Eigenschaften? Ausführliche Erläuterung zur Verwendung von Reaktionsattributen, Ereignissen und Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!