Welche Funktionen hat React? Detaillierte Analyse der Reaktionsfunktion (mit Beispielen)

In diesem Artikel geht es hauptsächlich darum, wie man Reagieren lernt. Schauen wir uns nun den Hauptinhalt des Artikels an.

React ist im Grunde eine JavaScript-Bibliothek.

Es verkörpert die Idee der Trennung von Vorder- und Rückseite und überträgt einen Teil der Arbeit beim Zusammenstellen der Seite an den Browser. Im Gegensatz zu JSP-Dateien werden das Layout der Seite und das Ausfüllen von Daten an den Browser gesendet nachdem der Server es abgeschlossen hat.

Dies hat natürlich viele Vorteile: Erstens kapselt React DOM und JavaScript in Modulen (Komponenten). Darüber hinaus können Komponenten das Testen und Trennen von Bedenken vereinfachen. Zweitens kann React bei Datenänderungen die Benutzeroberfläche automatisch aktualisieren und nur die Teile aktualisieren, die aktualisiert werden müssen.

Kernfunktion 1: Rendern

Die Funktion dieser Funktion besteht darin, ein Modul bereitzustellen, das einem Lego-Baustein ähnelt, der zum Zusammenstellen der Seite verwendet wird.

Einfaches Beispiel: (Der HTML-Code wird zuerst angegeben und der JSX-Code wird später angegeben. JSX bedeutet JavaScript + XML)

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/ReactDOM.render(
    <p>Hello, world!</p>,
    document.getElementsByClassName(&#39;firstContainer&#39;)[0]
);

Sie können das p mit der Klasse zuerst sehenContainer Der Inhalt wurde ersetzt mit dem Code, den wir in render geschrieben haben: Hallo Welt!

Darüber hinaus kann document.getElementsByClassName('firstContainer')[0] durch jedes native JavaScript ersetzt werden, um ein einzelnes zu erhalten (muss ein Knoten sein, wenn Sie also eine Methode wie document.getElementsByClassName verwenden, müssen Sie hinzufügen [n]) **DOM-Elementmethoden: document.getElementById oder document.getElementsByTagName usw. sind alle akzeptabel.

Für ein komplexeres Beispiel können wir das e388a4556c0f65e1904146cc1a846beeHello, world!94b3e26ee717c64999d7867364b1b4a3 hier erweitern.

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var name = "Emily";
ReactDOM.render(
  <p>
  {
    (function(){        return <p>Hello, {name}!</p>
    })()
  }
  </p>,
  document.getElementById(&#39;container&#39;)
);

Wir können die Magie der JSX-Syntax im Code sehen, man kann sagen, dass JS und DOM miteinander vermischt sind. Die grundlegenden Syntaxregeln von JSX: Wenn Sie auf HTML-Tags stoßen (beginnend mit <), verwenden Sie HTML-Regeln zum Parsen. Wenn Sie auf Codeblöcke stoßen (beginnend mit {), verwenden Sie JavaScript-Regeln zum Parsen.

Kernfunktion 2: React.createClass

Mit dieser Funktion können wir die erforderlichen Komponenten selbst definieren. Die definierten Komponenten können direkt in der Renderfunktion als Tags wie p verwendet werden.

Eine einfache Kastanie:

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var HelloWorldBox = React.createClass({
  render: function() {    return (
      <p className="helloWorldBox">
        Hello, world! I am a helloWorldBox.
      </p>
    );
  }
});
ReactDOM.render(
  <HelloWorldBox />,
  document.getElementById(&#39;container&#39;)
);

In dieser Kastanie ist HelloWorldBox die einfachste Komponente.

Wir können auch weitere Informationen zu dieser Komponente erhalten. Verwenden Sie beispielsweise props

(Beispiel von der offiziellen Website von React)

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
  render: function() {    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </p>
    );
  }
});var CommentList = React.createClass({
  render: function() {    return (
      <p className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </p>
    );
  }
});
ReactDOM.render(
  <CommentList />,
  document.getElementById(&#39;container&#39;)
);

In diesem Beispiel verwenden wir die React.createClass-Methode, um zwei Komponenten zu erstellen. Das können wir in der Komponente CommentList sehen. Verschachtelter Kommentar: Mit anderen Worten: CommentList besteht aus mehreren Kommentaren. Wir definieren ein Attribut für Kommentar in CommentList: Autor. Dann können Sie in der Kommentarkomponente diese Eigenschaft über {this.props.author} lesen und über {this.props.children} können Sie die untergeordneten Knoten dieser Komponente lesen.

Zugriff auf externe Daten:

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
  render: function() {    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </p>
    );
  }
});var names = [&#39;Alice&#39;, &#39;Emily&#39;, &#39;Kate&#39;];
ReactDOM.render(
  <p>
  {
    names.map(function (name) {      return <Comment author={name}>is an author~</Comment>
    })
  }
  </p>,
  document.getElementById(&#39;container&#39;)
);

Hier handelt es sich bei den Array-Namen um externe Daten. Wir betten diese Daten in das DOM der Webseite ein, indem wir Komponenten erstellen.

Komponentenstatus

Jede Komponente hat eine Eigenschaft: state Entwickler können den Status der Komponente ändern, indem sie this.setState() aufrufen. Wenn der Status aktualisiert wird, rendert sich die Komponente neu. Sowohl der Zustand als auch die Requisiten sind Merkmale einer Komponente. Der Unterschied besteht jedoch darin, dass die Requisiten unverändert bleiben, der Zustand jedoch geändert werden kann.

getInitialState() kann den Initialisierungsstatus der Komponente festlegen. Diese Funktion wird nur einmal im Lebenszyklus der Komponente ausgeführt.

Aktualisierungsstatus:

Hinweis: Die Funktion „componentDidMount“ ist die Lebenszyklusfunktion der Komponente. Es handelt sich um eine Methode, die React beim Rendern der Komponente automatisch aufruft, worauf später noch näher eingegangen wird .

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <p className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
      </p>
    );
  }
});

In dieser Kastanie erhalten wir Daten über Ajax und setzen die erhaltenen Daten über die Funktion this.setState auf this.state.data. Legen Sie dann in der Kommentarliste data={this.state.data} fest, um die vom Server erhaltenen Daten anzuzeigen. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte React Reference Manual der PHP Chinese-Website, um mehr zu erfahren.)

Lebenszyklus von Komponenten

Der Lebenszyklus von Komponenten ist unterteilt in die folgenden drei Typen:

1. Montage: Das echte DOM wurde eingefügt

2. Aktualisierung: Wird neu gerendert

3. Unmounten: Verlässt bereits das reale DOM

Im Lebenszyklus der Komponente werden Lebenszyklusfunktionen automatisch aufgerufen. Sie sind:

componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()

Darüber hinaus gibt es zwei spezielle Statusverarbeitungsfunktionen:

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

Das folgende Beispiel stammt aus Ruan Yifengs Blog:

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },
  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;      if (opacity < 0.1) {
        opacity = 1.0;
      }      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },
 render: function () {
    return (
      <p style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </p>
    );
  }
});
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

Die Funktion „componentDidMount“ ist darin enthalten wird aufgerufen, nachdem die Komponente in das reale DOM eingefügt wurde. In dieser Funktion stellen wir einen Timer ein, um die Transparenz alle 100 Millisekunden zu ändern, bis die Komponente vollständig transparent ist, und setzen dann die Transparenz auf 1 (die anfängliche Transparenz ist auf 1 gesetzt). . Auf diese Weise wird diese Komponentenpartei ständig gerendert. Auf diese Weise erhalten wir eine blinkende Hallo-Welt-Zeichenfolge auf der Seite. Wenn wir die Funktion schreiben:

componentDidUpdate:function(){
    console.log("did update");
}

können wir eine kontinuierliche Ausgabe in der Konsole sehen.

React ist im Grunde eine JavaScript-Bibliothek.

Es verkörpert die Idee der Trennung von Vorder- und Rückseite und überträgt einen Teil der Arbeit beim Zusammenstellen der Seite an den Browser. Im Gegensatz zu JSP-Dateien werden das Layout der Seite und das Ausfüllen von Daten an den Browser gesendet nachdem der Server es abgeschlossen hat.

Dies hat natürlich viele Vorteile: Erstens kapselt React DOM und JavaScript in Modulen (Komponenten). Darüber hinaus können Komponenten das Testen und Trennen von Bedenken vereinfachen. Zweitens kann React bei Datenänderungen die Benutzeroberfläche automatisch aktualisieren und nur die Teile aktualisieren, die aktualisiert werden müssen.

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 vonWelche Funktionen hat React? Detaillierte Analyse der Reaktionsfunktion (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!