In diesem Artikel wird haupts?chlich die Verwendung von reagieren vorgestellt. Interessierte Schüler k?nnen sich über die Verwendung von reagieren informieren

1. Reagieren Sie auf Requisiten

1. Verwenden Sie Requisiten

Der Hauptunterschied zwischen Status und Requisiten besteht darin, dass Requisiten unver?nderlich sind, w?hrend der Status basierend auf der Benutzerinteraktion ge?ndert werden kann. Aus diesem Grund müssen einige Containerkomponenten einen Status definieren, um Daten zu aktualisieren und zu ?ndern. Unterkomponenten k?nnen Daten nur über Requisiten weitergeben.

Das Namensattribut in der Instanz wird über this.props.name abgerufen.

2. Standard-Requisiten

Sie k?nnen Standardwerte für Requisiten über die Methode getDefaultProps() festlegen.

2. Komponenten-API

1. Status festlegen: setState

setState(objectnextState[, function callback])

（ 1) Parameterbeschreibung:

nextState, der neu festzulegende Status, der mit dem aktuellen Status zusammengeführt wird

Callback, optionale Parameter, Callback-Funktion. Diese Funktion wird aufgerufen, nachdem setState erfolgreich festgelegt und die Komponente erneut gerendert wurde.

NextState und aktuellen Status zusammenführen und die Komponente erneut rendern. setState ist die Hauptmethode zum Ausl?sen von UI-Aktualisierungen in React-Ereignisbehandlungsfunktionen und Anforderungsrückruffunktionen.

(2) über setStaate

Sie k?nnen den Status nicht über this.state innerhalb der Komponente ?ndern, da der Status nach dem Aufruf von setState() ersetzt wird.

setState() ?ndert this.state nicht sofort, sondern erstellt einen Zustand, der gerade verarbeitet wird. setState() ist nicht unbedingt synchron. Um die Leistung zu verbessern, führt React das Rendern von Status und DOM stapelweise durch.

setState() l?st immer eine Neuzeichnung der Komponente aus, es sei denn, in ShouldComponentUpdate() ist eine bedingte Rendering-Logik implementiert.

2. Ersetzungsstatus: replaceState

replaceState(object nextState[, functioncallback])

nextState, der neue Status, der festgelegt werden soll , Dieser Status ersetzt den aktuellen Status.

Rückruf, optionaler Parameter, Rückruffunktion. Diese Funktion wird aufgerufen, nachdem replaceState erfolgreich festgelegt und die Komponente erneut gerendert wurde.

Die Methode replaceState() ?hnelt setState(), die Methode beh?lt jedoch nur den Status in nextState bei und der ursprüngliche Status, der sich nicht in nextState befindet, wird gel?scht.

3. Eigenschaften festlegen: setProps

setProps(object nextProps[, functioncallback])

nextProps, was sein wird Neues Attribut festlegen, dieser Status wird mit den aktuellen Requisiten

Rückruf, optionalen Parametern, Rückruffunktion zusammengeführt. Diese Funktion wird aufgerufen, nachdem setProps erfolgreich festgelegt und die Komponente erneut gerendert wurde.

Legen Sie Komponenteneigenschaften fest und rendern Sie die Komponente erneut.

4. Ersetzungseigenschaften: replaceProps

replaceProps(object nextProps[, functioncallback])

nextProps soll auf A gesetzt werden neue Eigenschaft, die die aktuellen props ersetzt.

Rückruf, optionaler Parameter, Rückruffunktion. Diese Funktion wird aufgerufen, nachdem replaceProps erfolgreich festgelegt und die Komponente erneut gerendert wurde. Die Methode

replaceProps() ?hnelt setProps, l?scht jedoch die ursprünglichen Requisiten

5.??? Aktualisierung erzwingen: forceUpdate

forceUpdate([Funktionsrückruf])

Die Methode ?forceUpdate()“ veranlasst die Komponente, ihre eigene render()-Methode aufzurufen, um sie erneut auszuführen -Rendern Sie die Komponente, und die untergeordneten Komponenten der Komponente rufen auch ihre eigene render() auf. Wenn die Komponente jedoch erneut gerendert wird, werden this.props und this.state weiterhin gelesen. Wenn sich der Status nicht ge?ndert hat, aktualisiert React nur das DOM.

Die Methode forceUpdate() eignet sich zum Neuzeichnen anderer Komponenten als this.props und this.state (z. B. nach dem ?ndern von this.state). Diese Methode wird verwendet, um React darüber zu informieren render muss aufgerufen werden. ()

DOM-Knoten abrufen: findDOMNode

DOMElement findDOMNode()

Rückgabewert: DOM Element DOMElement

Wenn die Komponente im DOM gemountet wurde, gibt diese Methode das entsprechende DOM-Element des lokalen Browsers zurück. Wenn render null oder false zurückgibt, gibt this.findDOMNode() ebenfalls null zurück. Diese Methode ist nützlich, wenn Werte aus dem DOM gelesen werden, z. B. um den Wert eines Formularfelds abzurufen und einige DOM-Vorg?nge auszuführen.

7. Bestimmen Sie den Montagestatus der Komponente: isMounted

bool isMounted()

Rückgabewert: wahr oder falsch, der angibt, ob die Komponente im DOM gemountet wurde (wenn Sie mehr wissen m?chten, besuchen Sie die Spalte React Reference Manual der PHP Chinese-Website, um mehr zu erfahren)

isMounted( ) wird verwendet, um zu bestimmen, ob die Komponente im DOM gemountet wurde. Mit dieser Methode kann sichergestellt werden, dass die Aufrufe von setState() und forceUpdate() in asynchronen Szenarios nicht schiefgehen.

3. Lebenszyklus einer Komponente reagieren

1. Der Lebenszyklus einer Komponente kann in drei Zust?nde unterteilt werden:

Montage: Real DOM hat wurde eingefügt

Aktualisierung: Wird erneut gerendert

Unmounten: Aus dem echten DOM verschoben

2. Die Lebenszyklusmethoden sind:

1) componentWillMount wird vor dem Rendern aufgerufen, sowohl auf dem Client als auch auf dem Server.

2)?componentDidMount : Wird nach dem ersten Rendern aufgerufen, nur auf der Clientseite. Anschlie?end hat die Komponente die entsprechende DOM-Struktur generiert, auf die über this.getDOMNode() zugegriffen werden kann. Wenn Sie es mit anderen JavaScript-Frameworks verwenden m?chten, k?nnen Sie setTimeout, setInterval aufrufen oder AJAX-Anfragen und andere Vorg?nge in dieser Methode senden (um zu verhindern, dass fremde Vorg?nge die Benutzeroberfl?che blockieren).

3)?componentWillReceiveProps wird aufgerufen, wenn die Komponente eine neue Requisite erh?lt (nach dem Update). Diese Methode wird beim Initialisieren des Renderns nicht aufgerufen.

4)?shouldComponentUpdate Gibt einen booleschen Wert zurück. Wird aufgerufen, wenn die Komponente neue Requisiten oder einen neuen Status erh?lt. Wird w?hrend der Initialisierung oder bei Verwendung von forceUpdate nicht aufgerufen.
Kann verwendet werden, wenn Sie best?tigen, dass Sie keine Komponenten aktualisieren müssen.

5)?componentWillUpdate wird aufgerufen, wenn die Komponente neue Requisiten oder einen neuen Status erh?lt, aber noch nicht gerendert wurde. Wird w?hrend der Initialisierung nicht aufgerufen.

6)?componentDidUpdate wird sofort aufgerufen, nachdem die Komponente das Update abgeschlossen hat. Wird w?hrend der Initialisierung nicht aufgerufen.

7)?componentWillUnmount wird sofort aufgerufen, wenn die Komponente aus dem DOM entfernt wird.

4.Formulare und Ereignisse reagieren

Beispiel 1: Wir k?nnen den Status aktualisieren, wenn sich der Wert des Eingabefelds ?ndert. Wir k?nnen das Ereignis onChange verwenden, um Eingabe?nderungen zu überwachen und den Status zu ?ndern.

5. React Refs

1. Verwenden Sie die Methode

, um ein Ref-Attribut an die Rückgabe zu binden of render Value:

In anderem Code erhalten Sie hierüber die Support-Instanz. refs :

var input = this.refs.myInput;

var inputValue = input.value;

var inputRect = input.getBoundingClientRect();

2. Beispiel

Das Eingabefeld erh?lt den Fokus, nachdem das Kind auf die Schaltfl?che geklickt hat.

v

ar MyComponent = React.createClass({
      handleClick: function() {
        // 使用原生的 DOM API 獲取焦點(diǎn)
        this.refs.myInput.focus();
      },
      render: function() {
        // 當(dāng)組件插入到 DOM 后，ref 屬性添加一個(gè)組件的引用于到 this.refs
        return (
          <p>
            <input type="text"ref="myInput" />
            <input
              type="button"
              value="點(diǎn)我輸入框獲取焦點(diǎn)"
              onClick={this.handleClick}
            />
          </p>
        );
      }
    });
 
    ReactDOM.render(
      <MyComponent />,
      document.getElementById(&#39;example&#39;)
    );

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

Das obige ist der detaillierte Inhalt vonWie verwende ich React? Detaillierte Erl?uterung der Verwendung von React (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!