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 wirdclassnormalerweise verwendet, um eine Komponente zu deklarieren, die vonReact.Componenterben muss.
Zum Beispiel der folgende Code:

// MyFirstComponent.jsx class MyFirstComponent extends React.Component { state = { text: "Hello React" }; /** 组件生命周期钩子函数：在组件挂载完成后立即被调用 */ componentDidMount() { alert("组件挂载完成！"); } render() { return ( 
{this.state.text}, I am {this.props.author}!
 ) } } export default MyFirstComponent;

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 FunktionMyFirstComponentincomponentDidMount, die eine Hook-Funktion für den Komponentenlebenszyklus ist. Tatsächlich hat React eine Reihe von Lebenszyklus-Hook-Funktionen für Komponenten

2. MyFirstComponententwickelt. Es gibt eine spezielle Funktionrender(). Diese Funktion konvertiert Vorlageninhalte ähnlich wiehtmljsxals Rückgabewert. Dies ist eine Funktion, die definiert werden muss, sonst gibtReacteinen Fehler aus

3. jsxAuf den ersten Blick sieht es aus wie eine Template-Engine, aber es ist tatsächlich einJavaScriptSyntaxerweiterung, ihr Kernkonzept ist das berühmteall in js, das vollständig inJavaScriptimplementiert ist. Wie die herkömmliche Template-Engine kann es auchjs-Ausdrücke

4. von zwei Objekten stammt:

   undjsxist der interne angepasste Komponentenstatus vonthis.state; in Form von Tag-Attributen übergeben, ähnlich wie Funktionsparameter;this.propsthis.stateMyFirstComponentthis.propsZusammenfassend lässt sich sagen, dass Sie denMyFirstComponentKomponentenlebenszyklus

JSX

Komponentenattribut-RequisitenSie 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

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

// index.js import MyFirstComponent from "MyFirstComponent"; /** 渲染结果：
Hello React, I am Shaye!
 */ ReactDOM.render(, document.getElementById("app"));

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

{this.state.content} forever

=>DOMInsbesondere können die Attribute von React-Elementen weiterhin wie nativejsin 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 nativemclass: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:

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

  Nach dem Login kopieren

Speziell

Detaillierte Dokumentation

Komponentenattribut-Requisitenstate

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

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

propsstateZusammenfassungpropsprops

KomponentenlebenszyklusJSXKomponentenstatusstatusKomponentenattribut-RequisitenPlus eineTop-Down-Reihenfolge zum Datenfluss, das sind die grundlegendsten Funktionen der 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!