React ist die Komponentenentwicklung; die Kernidee von React ist die Entwicklung unabhängiger und wiederverwendbarer kleiner Komponenten, die in einen Komponentenbaum unterteilt werden kleine Funktionsmodule, und jede Funktion vervollständigt ihre eigene unabhängige Funktion.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Ist React eine Komponentenentwicklung? Um zu lösen, teilen Sie es in viele kleine lösbare Probleme auf
und fügen Sie sie dann in das Ganze ein . Sie werden feststellen, dass große Probleme leicht gelöst werden können
Tatsächlich Die obige Idee ist die Idee von „Teile und herrsche“:
Teile und herrsche Es ist eine wichtige Idee in der Softwareentwicklung und der Grundstein für die Entwicklung und Wartung komplexer Systeme.
- Die aktuelle Modularisierung und Komponentisierung des Front-Ends basiert auf der Idee von „Teile und herrsche“
-
2. Was ist Komponentenentwicklung?
- Komponentisierung hat eine ähnliche Idee:
- Wenn wir die gesamte Logik auf einer Seite zusammenfassen, wird es sehr kompliziert zu verarbeiten, was der späteren Verwaltung und Erweiterung nicht förderlich ist
- Aber wenn wir
eine Seite in jedes kleine Funktionsmodul aufteilen
, jede Funktion ihre eigene unabhängige Funktion ausführt
, dann wird die Verwaltung und Wartung der gesamten Seite sehr einfach
Wir müssen über die Idee der Komponentisierung über die gesamte Seite nachdenken. Anwendung: - Wir unterteilen eine vollständige Seite in viele Komponenten.
-
Jede Komponente wird verwendet, um einen Funktionsblock der Seite zu implementieren
Die Kernidee von React ist, dass die App, die wir zuvor gekapselt haben, selbst eine Komponente ist. Die Komponentisierung bietet eine Abstraktion, die es uns ermöglicht, unabhängige und wiederverwendbare kleine Komponenten zu entwickeln, um unsere zu konstruieren Anwendungen
- Jede Anwendung wird in einem Komponentenbaum abstrahiert
Anwendung des komponentenbasierten Denkens:Teilen Sie die Seite so weit wie möglich in kleine, wiederverwendbare Komponenten auf
Dies macht unseren Code komfortabler zu organisieren und zu verwalten, und die Skalierbarkeit ist auch stärker. 4. React-Komponentenklassifizierung auf unterschiedliche Weise: Je nachdem, wie die Komponente definiert ist, kann sie unterteilt werden in: - Funktionskomponente
(Funktionskomponente) und - Klassenkomponente
(Klassenkomponente)
Stateless Component
(Stateless Component) und 
Stateful Component
(Stateful Component)
- Entsprechend den unterschiedlichen Verantwortlichkeiten der Komponente kann es unterteilt werden in:
Presentational Component- ( Präsentationskomponente) und „Containerkomponente“ (Containerkomponente) Komponenten konzentrieren sich hauptsächlich auf die Anzeige von
UI-
Klassenkomponenten, Zustandskomponenten und Containerkomponenten. Achten Sie auf Datenlogik
- Reagieren Sie, um Komponenten zu erstellen 1. Klassenkomponente
-
Die Definition einer Klassenkomponente lautet wie folgt: Der Name der Komponente beginnt mit einem Großbuchstaben (unabhängig von Klassenkomponente oder Funktionskomponente) )
- Klassenkomponenten müssen erben von :
React.Component code><strong></strong>Klassenkomponenten müssen die Funktion <code>render implementieren
-
definiert mit
class Eine Komponente: constructor ist optional, wir normalerweise Initialisieren Sie einige Daten im constructor
this.state ist das, was wir verwalten. Die Daten innerhalb der Methode Komponente
-
render() sind die einzige Methode das muss in der class-Komponente implementiert werden
-
2. Der Rückgabewert der Renderfunktion
-
Wenn die Funktion
render aufgerufen wird, prüft sie, ob Änderungen in this.props und <code>this.state und gibt
einen der folgenden Typen
zurück
-
Elemente reagieren
- Wird normalerweise über
JSX erstellt. JSX 创建
- 例如:
<p></p> 会被 React 渲染为 DOM节点, <mycomponent></mycomponent>会被 React 渲染为自定义组件
- 无论是
<p></p> 还是 <mycomponent></mycomponent> 均为 React 元素
-
数组或 fragments: 使得
render 方法可以返回多个元素
-
Portals: 可以渲染子节点到不同的
DOM 子树中
-
字符串或数值类型: 他们在
DOM 中会被渲染为文本节点
-
布尔类型或null: 什么都不渲染
3.函数组件
函数组件是使用 function 来进行定义的函数, 只是这个函数会返回和类组件中 render
Zum Beispiel: <p></p> wird von React in <code>DOM gerendert. code> Knoten, <mycomponent></mycomponent> wird von React als benutzerdefinierte Komponente gerendert
Ob es sich um <p></p>handelt > oder <mycomponent></mycomponent> sind alle React-Elemente-
-
- Arrays oder Fragmente
: Dadurch kann die render-Methode mehrere zurückgeben Elemente-
Portale : Können untergeordnete Knoten in verschiedene DOM-Unterbäume rendern
String- oder numerische Typen
: Sie werden als Textknoten in DOM gerendert Boolescher Typ oder Null: Nichts rendern Gleicher Inhalt wie die Funktion render in der Klassenkomponente
🎜🎜🎜Merkmale von Funktionskomponenten (wir werden später über Hooks sprechen, die unterschiedlich sind)🎜🎜Es gibt keinen Lebenszyklus und wird es auch sein aktualisiert und hängengeblieben. Geladen, aber es gibt keine Lebenszyklusfunktion. 🎜🎜Nein (Komponenteninstanz)🎜🎜Kein interner Status (Status)🎜🎜🎜🎜🎜🎜🎜🎜Empfohlenes Lernen: „🎜Video-Tutorial reagieren🎜“🎜
Das obige ist der detaillierte Inhalt vonIst React eine komponentenbasierte Entwicklung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
