Wie schreibe ich React-Komponenten? (Code)

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man React-Komponenten schreibt. (Code), es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

So schreiben Sie eine React-Komponente

In der Welt von React wird class normalerweise verwendet, um eine Komponente zu deklarieren, die von React.Component erben muss.
Zum Beispiel der folgende Code:

// MyFirstComponent.jsx
class MyFirstComponent extends React.Component {
  state = {
    text: "Hello React"
  };

  /** 组件生命周期钩子函数：在组件挂载完成后立即被调用 */
  componentDidMount() {
    alert("组件挂载完成！");
  }

  render() {
    return (
      <p>{this.state.text}, I am {this.props.author}!</p>
    )
  }
}

export default MyFirstComponent;

rrree

Das Obige ist eine herkömmliche Art, React-Komponenten zu schreiben, aber wir können auch einige interessante Dinge finden, wenn wir den obigen Code beobachten:

1. Es gibt eine Funktion MyFirstComponent in componentDidMount, die eine Hook-Funktion für den Komponentenlebenszyklus ist. Tatsächlich hat React eine Reihe von Lebenszyklus-Hook-Funktionen für Komponenten

2. MyFirstComponent entwickelt. Es gibt eine spezielle Funktion render(). Diese Funktion konvertiert Vorlageninhalte ähnlich wie htmljsx als Rückgabewert. Dies ist eine Funktion, die definiert werden muss, sonst gibt React einen Fehler aus

3. jsx Auf den ersten Blick sieht es aus wie eine Template-Engine, aber es ist tatsächlich ein JavaScript Syntaxerweiterung, ihr Kernkonzept ist das berühmte all in js, das vollständig in JavaScript implementiert ist. Wie die herkömmliche Template-Engine kann es auch js-Ausdrücke

4. von zwei Objekten stammt:

   und jsx ist der interne angepasste Komponentenstatus von this.state; in Form von Tag-Attributen übergeben, ähnlich wie Funktionsparameter; this.propsthis.stateMyFirstComponentthis.propsZusammenfassend lässt sich sagen, dass Sie den MyFirstComponentKomponentenlebenszyklus

JSX

Komponentenstatusstatus

Komponentenattribut-Requisiten Sie wissen, wie man React-Komponenten schreibt. KomponentenlebenszyklusDas offizielle Dokument enthält eine sehr detaillierte Einführung, daher werde ich hier nicht auf Details eingehen. Klicken Sie hier, um das offizielle Dokument anzuzeigen Komponentenlebenszyklus.

JSX

Sie können

-Ausdrücke beliebig in

verwenden, und die Ausdrücke in sollten in geschweifte Klammern eingeschlossen werden. Zum Beispiel der folgende Code: React-Elemente in

// index.js
import MyFirstComponent from "MyFirstComponent";

/** 渲染结果：<p>Hello React, I am Shaye!</p> */
ReactDOM.render(<MyFirstComponent author="Shaye"></MyFirstComponent>, document.getElementById("app"));

JSX, wie z. B. javaScript, werden schließlich vom Compiler übersetzt und von bestimmten spezifischen Funktionen in ein leichtes JSX verarbeitet. Beispielsweise wird das oben erwähnte Element
schließlich zu dem folgenden

:

<p className={this.state.clname} style={{ fontSize: "20px" }}>{this.state.content} forever</p>

JSXReact funktioniert p, indem es diese Objekte liest und den Dateninhalt konsistent hält. Eigentlich schreibst du also immer noch javascript object. Daher müssen p und object genauso geschrieben werden wie . Zum Beispiel:

=> DOM Insbesondere können die Attribute von React-Elementen weiterhin wie native js in Anführungszeichen gesetzt werden Definieren Sie Attribute mit Zeichenfolgenwerten, zum Beispiel: classstylejsZusätzlich zu den oben genannten
s gibt es auch einige grammatikalische Unterschiede zwischen Ereignisbindung und nativem class: className
font-size: 20px;{ fontSize: "20px" }Die Ereignisnamen von React werden in Kamelbuchstaben statt in Kleinbuchstaben geschrieben.

htmlclassName="my-claname"React-Ereignisbindung muss ein Funktionsobjekt sein, keine Zeichenfolge.

JSXhtmlCodebeispiel:

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const pElement = {
  type: "p",
  props: {
    // this.state.clname的值
    className: "love",
    style: {
      fontSize: "20px"
    },
    // "you"为this.state.content的值
    children: ["you", "forever"]
  }
}

• Komponentenstatus state

• ist privat und wird vollständig von der aktuellen Komponente gesteuert. Da es sich um einen Status handelt, muss dieser aktualisiert werden.

  Codebeispiel:

  <p onClick={this.handleClick}>我是一个按钮</p>
  
  // 也可以向事件回调函数传递参数
  <p onClick={(params) => this.handleClick(params)}>我是一个按钮</p>

ist die einzige Möglichkeit, Komponenten in React dynamisch zu aktualisieren. Wenn es aufgerufen wird, lösen die eigene Komponente und alle ihre Unterkomponenten ein erneutes Rendern aus

Speziell

kann auch als Attribute an untergeordnete Komponenten übergeben werden;

Detaillierte Dokumentation

Komponentenattribut-Requisitenstate

ist die übergeordnete Komponente Die weitergegebenen Daten stammen normalerweise setState() von der übergeordneten Komponente oder anderen Mitgliedsvariablen der Komponente. Darüber hinaus ist
state schreibgeschützt und Komponenten können ihr eigenes
setState() niemals ändern. Erst nachdem die übergeordnete Komponente

aufruft, können die Eigenschaften der untergeordneten Komponente geändert und neu gerendert werden.

kann nur von oben nach unten hochgeladen werden, und Komponenten können nur ihre eigenen privaten ändern, was bedeutet, dass der Datenfluss der gesamten Anwendung nur ein

unidirektionaler Datenfluss sein kann von oben nach unten

propsstateZusammenfassungpropsprops

Komponentenlebenszyklus JSX Komponentenstatusstatus Komponentenattribut-Requisiten Plus eine Top-Down-Reihenfolge zum Datenfluss , das sind die grundlegendsten Funktionen der React-Komponenten!

Verwandte Empfehlungen:

So verwenden Sie React-Komponenten höherer Ordnung

So verwenden Sie dies in React-Komponenten

Das obige ist der detaillierte Inhalt vonWie schreibe ich React-Komponenten? (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!