Wie verwende ich React? Detaillierte Erläuterung der Verwendung von React (mit Beispielen)

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)

Die Methode

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:

69f065e96ab09ede1328cd0aa33b8b8e

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 获取焦点
        this.refs.myInput.focus();
      },
      render: function() {
        // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
        return (
          <p>
            <input type="text"ref="myInput" />
            <input
              type="button"
              value="点我输入框获取焦点"
              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!