Heim >Web-Frontend >js-Tutorial >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:
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
MyFirstComponent
entwickelt. Es gibt eine spezielle Funktion render()
. Diese Funktion konvertiert Vorlageninhalte ähnlich wie html
jsx
als Rückgabewert. Dies ist eine Funktion, die definiert werden muss, sonst gibt React
einen Fehler aus
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
und jsx
ist der interne angepasste Komponentenstatus von this.state
; in Form von Tag-Attributen übergeben, ähnlich wie Funktionsparameter; this.props
this.state
MyFirstComponent
this.props
Zusammenfassend lässt sich sagen, dass Sie den MyFirstComponent
Komponentenlebenszyklus
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 inverwenden, 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>
JSX
React 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: class
style
js
Zusä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.
html
className="my-claname"
React-Ereignisbindung muss ein Funktionsobjekt sein, keine Zeichenfolge.
JSX
html
Codebeispiel:
// 注意: 以下示例是简化过的(不代表在 React 源码中是这样) const pElement = { type: "p", props: { // this.state.clname的值 className: "love", style: { fontSize: "20px" }, // "you"为this.state.content的值 children: ["you", "forever"] } }
Codebeispiel:
<p onClick={this.handleClick}>我是一个按钮</p> // 也可以向事件回调函数传递参数 <p onClick={(params) => this.handleClick(params)}>我是一个按钮</p>
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
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 untenKomponentenlebenszyklus JSX Komponentenstatusstatus Komponentenattribut-Requisiten Plus eine Top-Down-Reihenfolge zum Datenfluss , das sind die grundlegendsten Funktionen der React-Komponenten! Verwandte Empfehlungen: props
state
Zusammenfassungprops
props
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!