Ist React eine komponentenbasierte Entwicklung?

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
3. Die Komponentisierung von React

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)
Je nachdem, ob es in der Komponente einen Zustand gibt Muss gewartet werden, kann es unterteilt werden in:

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!