React Learning – React und Projektkonstruktion kennenlernen

I. Übersicht

1. Einführung in React

React ist eine von Facebook entwickelte js-Bibliothek, ein sehr großes Plugin für js-Plugins. Warum hat Facebook React erstellt? Welche Probleme sollen sie hauptsächlich lösen und wie lösen sie sie?

Warum hat Facebook React erstellt?

Facebook geht davon aus, dass das MVC-Muster ihre Projekte komplexer machen und den Code fragil und unvorhersehbar machen wird, was sehr schwer zu verstehen und zu debuggen ist, insbesondere der mögliche bidirektionale Datenfluss zwischen dem Modell und der Ansicht. Facebook änderte später seinen Namen in Meta.

	React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框 架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这 套东西很好用，就在 2013 年 5 月开源了

Hauptsächlich um welches Problem zu lösen?

Erstellen Sie umfangreiche Anwendungen, deren Daten sich im Laufe der Zeit ändern (je größer die Anwendung, desto mehr Daten müssen verwaltet werden, und desto mehr Daten. Wenn sich die Daten im Laufe der Zeit ändern, wird das Projekt basierend auf Komponenten und der Beziehung zwischen Komponenten entwickelt Seien Sie sehr kompliziert. Wenn Daten zwischen Komponenten ausgetauscht werden müssen und sich die gemeinsam genutzten Daten jederzeit ändern, ist die Datenmenge immer noch sehr groß und es kann keine Verzögerung geben. Durch Reagieren können Leistungsprobleme gelöst werden: Wenn die Daten geändert werden Änderungen, es wird auf effiziente Weise aktualisiert (erneuern)

2. Reagieren Sie auf Funktionen

Virtuelles DOM

Virtuelles DOM ist ein im Computerspeicher gespeichertes Objekt, das Objekte im js-Speicher verwendet, um Dom-Knoten auf der Seite zu simulieren. Die Rolle des virtuellen DOM besteht darin, zu verhindern, dass wir DOM-Knoten direkt bedienen, aber Daten verarbeiten. Datenänderungen werden dem virtuellen DOM zugeordnet.

Früher haben wir dom mit document.getElementById() bedient. Dieser Prozess liest tatsächlich zuerst die Dom-Struktur von HTML, konvertiert die Struktur in Variablen und führt dann Operationen aus. Reactjs definiert eine Reihe von Variablen in Form von Dom Modell, alle Operationen und Konvertierungen befinden sich direkt in den Variablen, was den Betrieb des realen Doms reduziert und die Leistung recht hoch ist. Es unterscheidet sich wesentlich vom Mainstream-MVC-Framework und befasst sich nicht mit Dom.
Komponentensystem (Komponentisierung)

Die Kernidee von React besteht darin, jeden Bereich oder jedes Element auf der Seite als Komponente zu betrachten

Komponente Was ist also eine Komponente? Komponenten beziehen sich auf Aggregate, die gleichzeitig HTML-, CSS-, JS- und Bildelemente enthalten. Der Kern der Reaktionsentwicklung besteht darin, die Seite in mehrere Komponenten aufzuteilen, und eine Komponente von React ist gleichzeitig mit CSS, JS und Bild gekoppelt Gleichzeitig. Dieser Modus Die gesamte Subversion der traditionellen Methoden der Vergangenheit
einseitiger Datenfluss

Wenn Sie mehrere Komponenten haben und eine verschachtelte Beziehung zwischen mehreren Komponenten besteht, sollten die Daten von außen nach innen übergeben werden. Versuchen Sie, keinen Fluss von innen nach außen zu haben, da dies den Datenfluss verwirren würde.

Tatsächlich ist der Kerninhalt von ReactJS die Datenbindung. Die sogenannte Datenbindung bedeutet, dass sich der Entwickler nur auf die Implementierung des Geschäfts konzentrieren muss, solange einige serverseitige Daten an die Front-End-Seite gebunden sind.
JSX

In Vue verwenden wir die Render-Funktion, um die Dom-Struktur der Komponente zu erstellen. Dies bietet eine höhere Leistung, da der Prozess des Suchens und Kompilierens von Vorlagen entfällt. Der Code ist jedoch weniger lesbar und komplizierter, wenn createElement zum Erstellen der Struktur verwendet wird Rendern. Zu diesem Zeitpunkt können Sie die JSX-Syntax verwenden, um DOM in Render zu erstellen und dieses Problem zu lösen. Voraussetzung ist jedoch, dass Sie Tools zum Kompilieren von JSX verwenden müssen

Die Render-Funktion erstellt wie die Vorlage HTML-Vorlagen, aber in einigen Szenarien ist der Code zu lang, um ihn mit der Vorlage zu implementieren. Zu diesem Zeitpunkt kann die Render-Funktion verwendet werden
```
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
      
      
  el: '#app',
  render: h => h(App)
})
```
Die Renderfunktion ist die Renderfunktion und ihr Parameter createElement ist ebenfalls eine Funktion. Im obigen Code render: h => h(App)handelt es sich um die ES6-Pfeilfunktionsschreibmethode, die als Alias für hverwendet werden kann.createElement
```
render: function (createElement) {
      
      
    return createElement(App)
}
```
Wie diese Probleme gelöst werden – die Hauptprinzipien von React

In herkömmlichen Webanwendungen ist die Manipulation des DOM im Allgemeinen ein direkter Aktualisierungsvorgang. Wir wissen jedoch, dass DOM-Aktualisierungen normalerweise relativ teuer sind. Um den Betrieb von DOM so weit wie möglich zu reduzieren, bietet React eine andere und leistungsstarke Möglichkeit, DOM anstelle des direkten DOM-Betriebs zu aktualisieren. Es handelt sich um Virtual DOM, ein leichtes virtuelles DOM, ein von React abstrahiertes Objekt, das beschreibt, wie Dom aussehen und wie es dargestellt werden soll. Das reale DOM wird über dieses virtuelle DOM aktualisiert, und die Aktualisierung des realen DOM wird von diesem virtuellen DOM verwaltet.

Warum ist es schneller, über diese zusätzliche Ebene des virtuellen DOM zu arbeiten? Dies liegt daran, dass React über einen Diff-Algorithmus verfügt. Das Aktualisieren des virtuellen DOM garantiert nicht, dass das reale DOM sofort betroffen ist. React wartet bis zum Ende der Ereignisschleife und verwendet dann diesen Diff-Algorithmus, um den aktuellen neuen DOM-Ausdruck zu vergleichen die vorherige, um die Mindestschritte zum Aktualisieren des echten DOM zu berechnen.

Funktionen können wie folgt zusammengefasst werden: virtuelles DOM, Diff-Algorithmus

React Fiber ist ein nach React 16 veröffentlichter React-Core-Algorithmus und eine Neuimplementierung des Core-Algorithmus (offizielle Website-Erklärung). Der Diff-Algorithmus wurde zuvor verwendet. In früheren Versionen von React war der Aktualisierungsprozess synchron, was zu Leistungsproblemen führen konnte. Wenn React beschließt, den Komponentenbaum zu laden oder zu aktualisieren, führt es viele Dinge aus, z. B. das Aufrufen der Lebenszyklusfunktionen jeder Komponente, das Berechnen und Vergleichen des virtuellen DOM und schließlich das Aktualisieren des DOM-Baums. Der gesamte Prozess ist synchron, das heißt nur einmal Der Lade- bzw. Aktualisierungsvorgang beginnt ohne Unterbrechung. Aufgrund der Single-Thread-Natur von JavaScript dauert jede Synchronisierungsaufgabe zu lange, wenn der Komponentenbaum groß ist, was zu Verzögerungen führt.

Der Ansatz von React Fiber ist eigentlich sehr einfach: Sharding. Teilen Sie eine zeitaufwändige Aufgabe (die Aufgabe bezieht sich hier auf eine einzelne Aufgabe) in viele kleine Teile auf. Die Laufzeit jedes kleinen Teils ist sehr kurz. Obwohl die Gesamtzeit immer noch sehr lang ist, werden nach der Ausführung jedes kleinen Teils andere Aufgaben ausgeführt Es wird eine gegeben. Ausführungsmöglichkeiten, so dass der einzige Thread nicht monopolisiert wird und andere Aufgaben weiterhin die Möglichkeit haben, ausgeführt zu werden.

Zusammenfassung: Was macht der Diff-Algorithmus? Er vergleicht das virtuelle DOM mit dem realen DOM. Vergleichen Sie zuerst den gesamten Baum ohne Änderungen und dann die darin enthaltenen Komponenten. Wenn sich die Komponenten nicht ändern, vergleichen Sie die DOM-Knoten in den Komponenten. Wenn sich die Knoten ändern, suchen Sie nach einer Positionsänderung und aktualisieren Sie sie dort, wo sie sich ändert, um die Seitenaktualisierung mit minimalen Kosten abzuschließen. Das neue virtuelle DOM wird auch mit dem alten virtuellen DOM verglichen. Dies Die Aktualisierung ist asynchron. Nach dem Vergleich wird eine asynchrone Aktualisierungsfunktion generiert. Sie wird in die Aufgabenwarteschlange gestellt. Gemäß dem Ereigniszyklus wird in jedem zweiten Zyklus eine Aktualisierungsfunktion aus der Aufgabenwarteschlange benötigt, um die Aktualisierung abzuschließen. Da die Der Veranstaltungszyklus ist sehr schnell und effizient, wir können den Platzierungsprozess nicht spüren.

Das durch den React Fiber-Algorithmus gelöste Problem besteht darin, dass eine einzelne Aufgabe, die lange dauert, ein feststeckendes Problem verursacht. (In vue gibt es keine solche Idee)

3. Die Beziehung zwischen React und traditionellem MVC

MVC-Muster

MVC ist ein Muster, das MVC (Model View Controller Model-View-Controller) zum Entwerfen und Erstellen von Webanwendungen verwendet

MVC umfasst eine Ansichtsschicht, eine Controller-Steuerungsschicht und eine Modelldatenschicht. Die Kommunikation zwischen Teilen ist unidirektional.

Modell (Modell) stellt die Kerndaten der Anwendung dar (z. B. eine Liste von Datensätzen)

view (view) ist für die Anzeige von Daten verantwortlich

Controller (Controller) verarbeitet Eingaben (schreibt Datenbankdatensätze) (Reaktionen werden hauptsächlich im Controller platziert und eignen sich für die Entwicklung mittlerer und großer Projekte).

View sendet Anweisungen an ControllerController vervollständigt die Geschäftslogik und erfordert, dass das Modell den Status ändert. Das Modell sendet neue Daten an View und der Benutzer erhält Feedback

Leichte Ansichtsebenenbibliothek! Eine JavaScript-Bibliothek zum Erstellen von BenutzeroberflächenReact

React ist kein vollständiges MVC-Framework, es kann höchstens als V (View) in MVC betrachtet werden, und selbst React erkennt das MVC-Entwicklungsmodell nicht sehr gut; React ist eine Bibliothek zum Erstellen von Seiten-UIs. Es kann einfach verstanden werden, dass React die Schnittstelle in unabhängige kleine Blöcke unterteilt und jeder Block eine Komponente darstellt. Diese Komponenten können kombiniert und verschachtelt werden, um unsere Seiten zu werden.

4. Installation des vscode-Plugins

Reactjs-Codeausschnitte

5. Einführung in React

5.1React.createElement

React.createElement( type, [props], [...children] )

Der erste Parameter ist erforderlich und die Eingabe ist ein HTML-ähnlicher Tag-Name, z. B.: ul, li, div

Der zweite Parameter ist optional und gibt das Attribut an, z. B.: Klassenname

Der dritte Parameter ist optional, untergeordneter Knoten, z. B.: anzuzeigender Textinhalt, andere Beschriftungen

5.2 ReactDOM.render

ReactDOM.render( template, container,[ callback])

Der erste Parameter: der Rendering-Inhalt der Vorlage (HTML-Formular)

Der zweite Parameter: der von der Vorlage eingefügte DOM-Knoten

Der dritte Parameter, optional: Rückruf nach dem Rendern (im Allgemeinen nicht verwendet, kann weggelassen werden)

5.3 Rendern des h1-Knotens

const divVD = React.createElement('h1', { title: 'hello react' }, 'Hello 
React！！！')
ReactDOM.render(divVD, document.getElementById('app'))

6. Reagieren Sie auf die ursprüngliche Syntax

<body>
    <div id="app"></div>

    <!-- react.xx.js会给Window对象添加一个React属性 -->
    <!-- React属性中包含了React的所有核心语法，负责定义组件 -->
    <script src="./react.16.8.6.js"></script>
    <!-- react-dom.xx.js会给Window对象添加一个ReactDOM属性 -->
    <!-- ReactDOM属性 中包含了将React属性定义的组件渲染到页面的所有的核心算法 -->
    <script src="./react-dom.16.8.6.js"></script>

    <script>
        // React.createElement()创建React元素(组件)
        var span = React.createElement('span', {
    
    }, '!!!!')
        var h1 = React.createElement('h1', {
    
     id: 'title', className: 't1 t2' }, span)
        // ReactDOM.render()渲染React元素到页面
        ReactDOM.render(h1, document.querySelector('#app'));
    </script>
</body>

 <div id="app"></div>

    <!-- react.xx.js会给Window对象添加一个React属性 -->
    <!-- React属性中包含了React的所有核心语法，负责定义组件 -->
    <script src="./react.16.8.6.js"></script>
    <!-- react-dom.xx.js会给Window对象添加一个ReactDOM属性 -->
    <!-- ReactDOM属性 中包含了将React属性定义的组件渲染到页面的所有的核心算法 -->
    <script src="./react-dom.16.8.6.js"></script>

    <script>
        // React.createElement()创建React元素(组件)
        // var span = React.createElement('span', {}, '!!!!')
        // var h1 = React.createElement('h1', { id: 'title', className: 't1 t2' }, span)
        // ReactDOM.render()渲染React元素到页面
        // ReactDOM.render(h1, document.querySelector('#app'));

        // 使用jsx语法写组件模板
        // var h1 = <h1>学习reactjs！</h1>//报错，要将代码转化
        // jsx语法的特点：可以直接在js代码中写标签，最终执行时需要转换为js才不会报错
        // babel插件可以将无法直接在浏览器中运行的jsx语法转换为js
        // 自己用原生的写会很费劲，所有需要脚手架，脚手架中会提供好多个插件
        // var h1 = <h1 id="title" class="t1 t2">学习reactjs！</h1>最终会转换为React.createElement('h1', { id: 'title', className: 't1 t2' }, span)
        var h1 = <h1 id="title" class="t1 t2">学习reactjs!</h1>
		//之所以这么写是因为直观高效
        
    </script>

Es wird sehr mühsam sein, selbst nativ zu schreiben. Alle benötigen ein Gerüst, und im Gerüst werden viele Plug-Ins bereitgestellt

Das Schreiben von Code in der ursprünglichen Syntax ist ineffizient, und jsx kann diesen Mangel beheben

Verwenden Sie die jsx-Syntax, um Komponenten zu schreiben. In was wird jedes Tag am Ende konvertiert, konvertiert in einen React.createElement-Funktionsaufruf

7. Strenger Modus

 /*  <React.StrictMode> */
    <App />
  /* </React.StrictMode> */

React.StrictMode-Komponenten im strikten Modus führen standardmäßig dazu, dass die Komponente zweimal aktualisiert wird, um die kleinen Probleme in der Komponente zu vergrößern. Der strikte Modus kann auch deaktiviert werden

2. Projektaufbau

1. Schritte zum Aufbau einer Gerüstumgebung

Installieren Sie die Create-React-App global (auch als Cra bezeichnet, und Projekte, die mit dem Create-React-App-Scaffolding erstellt wurden, werden auch als Projekte bezeichnet, die auf dem Cra-Scaffolding basieren)

Befehl installieren:npm i create-react-app –g
Versionsnummer drucken

create-react-app --version
Erstellen Sie ein Projekt mit dem Befehl „create-react-app“.

create-react-app 项目名称
Geben Sie das Projektverzeichnis ein

cd 项目名
Startup-Projekt

npm start

2. Verzeichnisstruktur

App

node_modules

öffentlich

src

3. Konfigurieren Sie den @-Pfad-Alias, damit das Gerüstbau-Tool @ erkennen kann.

CRA (create-react-app) verbirgt alle technischen Konfigurationen im React-Scripts-Paket, sodass im Projekt keine Konfigurationsinformationen oder Konfigurationsdateien sichtbar sind.

Wenn Sie die Standardkonfiguration von CRA ändern möchten, gibt es mehrere Möglichkeiten:

[Empfehlung] Ändern Sie es über eine Bibliothek eines Drittanbieters, zum Beispiel @craco/craco
Geben Sie alle Konfigurationen in React-Scripts für das Projekt frei, indem Sie den Befehl „garn eject“ ausführen (Hinweis: Dieser Vorgang ist irreversibel!!!)

Die Schritte zur Verwendung von Craco

Installieren Sie das Paket npm i -D @craco/craco

Erstellen Sie im Stammverzeichnis des Projekts eine Konfigurationsdatei: craco.config.js. Sie können in der Konfigurationsdatei benutzerdefinierte Änderungen vornehmen. Konfigurieren Sie Pfadaliase in craco.config.js

const path = require('path')
module.exports = {
      
      
 webpack: {
      
      
 alias: {
      
      
 '@': path.join(__dirname, 'src')
 }
 }
}

Ändern Sie Skriptbefehle in package.json

In package.json: Ändern Sie die drei Befehle start/build/test in den Craco-Modus

„Skripte“: {

„start“: „craco start“,

„build“: „craco build“,

„test“: „Risstest“,

„eject“: „react-scripts eject“

},
Starten Sie das Projekt neu, damit die Konfiguration wirksam wird
Im Code können Sie @ verwenden, um den absoluten Pfad des src-Verzeichnisses anzugeben

Reagieren lernen --- Lernen Sie React kennen