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 <p>Hello, world!</p> 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)：已加載組件收到新的參數(shù)時調(diào)用shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調(diào)用

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!