Reagieren Component API

In diesem Abschnitt werden wir diskutieren Komponente API reagieren. Wir werden die folgenden sieben Methoden erklären:

• Set Status: setState
• Ersetzen Status: replaceState
• Festlegen von Eigenschaften SetProps
• Ersetzen Eigenschaft replaceProps
• Update: Forceupdate
• Erhalten Sie DOM Knoten: findDOMNode
• Analysieren von Komponenten montierten Zustand: isMounted

Set Status: setState

setState(object nextState[, function callback])

Parameter Beschreibung

• nextstate, der neue Zustand gesetzt werden, wird der Status und der aktuelle Zustand merge
• Rückruf, optionale Parameter, die Callback - Funktion. Diese Funktion wird in setState erfolgreich nach der Montage erneutes Rendern Called bereitgestellt werden.

Merge nextstate und den aktuellen Status und Wieder Rendering-Komponente. setState sind Event-Handler-Methode reagieren und fordern wichtige UI Update Callback-Funktion ausgelöst.

Über setState

Sie können nicht die internen Komponenten durch this.state Zustand zu ändern, weil der Staat den Anruf setState ersetzen wird () nach.

setState () führt this.state nicht sofort ändern, wird aber bald einen Zustand Behandlung erstellen. setState () ist nicht unbedingt synchronisiert, um die Leistung zu verbessern würde Batch-Ausführungszustand und DOM-Rendering reagieren.

setState () löst immer eine Neuzeichnung Montage, es sei denn, eine Reihe von Bedingungen shouldComponentUpdate () in Rendering-Logik zu erreichen.

Beispiele

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

Versuchen »

Beispiele von auf den h2-Tags Anklicken eines Trefferzähler zu machen erhöht.

Ersetzen Status: replaceState

replaceState(object nextState[, function callback])

• nextstate, der neue Staat eingerichtet werden, die den aktuellen Zustand des Staates ersetzen wird.
• Rückruf, optionale Parameter, die Callback - Funktion. Diese Funktion wird in replaceState erfolgreich nach der Montage erneutes Rendern aufgerufen , zur Verfügung gestellt werden.

replaceState () Methode setState () ist ähnlich, jedoch ist das Verfahren nur gehalten nextstate Zustand, der ursprüngliche Zustand nicht nextstate Status gelöscht.

Festlegen von Eigenschaften: SetProps

setProps(object nextProps[, function callback])

• nextProps, die neue Eigenschaft wird gesetzt, und der aktuelle Status der Fusion Requisiten
• Rückruf, optionale Parameter, die Callback - Funktion. Diese Funktion wird in SetProps erfolgreich nach der Montage erneutes Rendern aufgerufen , zur Verfügung gestellt werden.

Einstellen Komponenteneigenschaften und Wieder Rendering-Komponente.

Datenfluss Requisiten äquivalente Komponenten, es wird immer von den Eltern die Unterbaugruppe Komponenten an alle weitergegeben werden. Wenn eine externe JavaScript und Anwendungsintegration, können wir Daten an die Komponente oder bemerken React.render bestehen müssen () Komponenten neu zu machen, dann können Sie SetProps () verwenden.

Update - Komponente React.render ich auf dem Knoten wieder aufrufen können () zu sein () -Methode die Komponenteneigenschaften durch SetProps zu ändern, Trigger Wieder Rendering - Komponente.

Ersetzen Sie Attribut: replaceProps

replaceProps(object nextProps[, function callback])

• nextProps, die neue Eigenschaft festgelegt werden soll, wird diese Eigenschaft die aktuellen Requisiten ersetzen.
• Rückruf, optionale Parameter, die Callback - Funktion. Diese Funktion wird in replaceProps erfolgreich nach der Montage erneutes Rendern aufgerufen , zur Verfügung gestellt werden.

replaceProps () Methode ähnelt SetProps, aber es wird das Original löschen

props

Update: Forceupdate

forceUpdate([function callback])

Parameter Beschreibung

• Rückruf, optionale Parameter, die Callback - Funktion. Diese Funktion wird nach der Komponente render () Methodenaufruf aufgerufen werden.

Forceupdate () -Methode der Komponente bewirkt, die sich () -Methode ruft machen die Unterbaugruppe Komponente neu zu machen, wird die Komponente Ihr Eigen nennen machen (). Wenn jedoch die Montage neu gerendert und liest noch this.props this.state, wenn der Staat, dann nur DOM aktualisiert reagiert nicht ändern.

Forceupdate () Methode ist geeignet für den Außen this.props und neu zeichnen this.state Komponenten (wie zB: Änderungen this.state nach), die durch das Verfahren mitgeteilt machen Reagieren call ()

In der Regel sollten Sie this.props und this.state Zustand nur ausgelöst durch Reagieren render () ruft mit Forceupdate () und lesen zu vermeiden.

Erhalten Sie DOM Knoten: findDOMNode

DOMElement findDOMNode()

• Rückgabewert: DOM-Element DOMElement

Wenn die Komponente auf das DOM montiert wurde, gibt die Methode die entsprechenden Elemente lokalen Browser DOM. Wenn machen return null oder falsch , wenn this.findDOMNode () den Wert null zurück. Lesen Sie aus dem DOM-Wert, ist dieser Ansatz nützlich, wie zum Beispiel: den Wert des Formularfeldes Ruft und einige DOM-Manipulation zu tun.

Analysieren von Komponenten montierten Zustand: isMounted

bool isMounted()

• Rückgabewert: wahr oder falsch, der angibt , ob die Komponente auf das DOM montiert ist ,

isMounted () Methode wird verwendet , um zu bestimmen , ob die Komponenten an das DOM montiert sind. Sie können diese Methode verwenden , um sicherzustellen , dass die setState () und Forceupdate () Aufruf im asynchronen Szenario nicht schief gehen kann.

Hierin durch Bezugnahme: http: //itbilu.com/javascript/react/EkACBdqKe.html