Schreiben Sie ein React-ähnliches Framework von Grund auf

Kürzlich habe ich im Internet den Artikel „Build your own React“ gesehen. Der Autor hat ein einfaches React-ähnliches Framework von Grund auf implementiert. Obwohl es nicht viel Optimierung gab, wurden die Kernideen von React, wie Concurrent Mode und Fiber Reconciler, alle implementiert. Nachdem ich ihn gelesen hatte, war er sehr hilfreich für das Verständnis von React. Daher möchte ich den Code basierend auf „Build your own React“ aufteilen, mein eigenes Framework-Projekt erstellen und dann andere Funktionen verbessern, die im Tutorial nicht abgeschlossen wurden. Der Code ist in rac.

Projektkonstruktion

Für den Technologie-Stack habe ich TypeScript für die Entwicklung und Rollup für die Paketierung gewählt. Dies sind Technologien, die ich nicht sehr oft verwende, daher werde ich sie zusammen üben. Im Vergleich zu Webpack ist die Rollup-Konfiguration einfacher. Erstellen Sie im Projekt eine tsconfig.json und eine rollup.config.js und installieren Sie dann die erforderlichen Rollup-Plugins, etwa rollup-plugin-typescript2, rollup-plugin-terser. Bereiten Sie außerdem einen Ordner mit Beispielen vor, erstellen Sie ein kleines Demoprojekt und verwenden Sie tsx zur Entwicklung

Unterstützt jsx

Wenn TypeScript jsx unterstützen soll, müssen Sie jsx in tsconfig aktivieren. TypeScript verfügt über drei Modi: „preserve“, „react“ und „react-native“. Wenn wir es auf „react“ setzen, übersetzt TypeScript das jsx im Code in „React.createElement“. Aus diesem Grund muss React im Gültigkeitsbereich sein, wenn jsx verwendet wird.

Wenn wir jedoch selbst ein React-ähnliches Framework implementieren möchten, können wir React.createElement einfach umbenennen. In „Build your own React“ verwendet der Autor den Kommentar /** @jsx Didact.createElement */, um den Compiler anzuweisen, die Ausgabefunktion von jsx in Didact.createElement zu ändern. Diese Methode ist nur für die aktuelle Datei wirksam. Wenn sie in einem Projekt verwendet wird, ist es mühsam, für jede Datei eine Kommentarzeile hinzuzufügen. Wir verwenden eine andere Methode, um es über das jsxFactory-Attribut in tsconfig anzugeben, das wir hier h nennen. Zusätzlich zu React.createEmenent gibt es auch ein spezielles Element – ​​Fragment. TypeScript übersetzt es standardmäßig in React.Fragment. Wir ändern es direkt über jsxFragmentFactory in Fragment.

tsconfig.json:

{
  "Compileroptionen": {
    "Ziel": "esnext",
    "Modul": "commonjs",
    "moduleResolution": "Knoten",
    "jsx": "reagieren", // jsx aktivieren
    "jsxFactory": "h", // React.createElement => h
    "jsxFragmentFactory": "Fragment", // React.Fragment => Fragment
    "rootDir": "./src",
    "lib": ["dom", "es2015"]
  }
}

Rollup-Konfiguration

Die Konfiguration von Rollup ist relativ einfach. Neben Ein- und Ausgabe können noch einige weitere Plugins hinzugefügt werden:

const Pfad = require('Pfad')
const typescript = erforderlich('rollup-plugin-typescript2')
const { terser } = erfordern('rollup-plugin-terser')
const eslint = erfordern('@rollup/plugin-eslint')

Standard exportieren {
  Eingabe: 'src/index.ts',
  Ausgabe: [
    { Datei: 'dist/rac.umd.js', Format: 'umd', Name: 'rac' }
  ],
  Plugins: [
    terser(),
    eslint({
      throwOnError: wahr,
      einschließen: ['src/**/*.ts']
    }),
    Typoskript({
      Ausführlichkeit: 0,
      tsconfig: Pfad.auflösen(__dirname, 'tsconfig.json'),
      useTsconfigDeclarationDir: true
    })
  ]
}

Eslint in TypeScript

Damit Eslint TypeScript unterstützen kann, sind einige zusätzliche Konfigurationen für Eslint erforderlich:

modul.exporte = {
  Parser: '@typescript-eslint/parser',
  Umgebung: {
    es6: wahr,
    Browser: wahr
  },
  Plugins: [
    '@typescript-eslint'
  ],
  erweitert: [
    'eslint:empfohlen',
  ],
  Parseroptionen: {
    Quelltyp: „Modul“
  },
  Regeln:
    ...
  }
}

Projektstruktur

Die neue Fiber-Architektur von React hat mehrere Kernkonzepte. In Build your own React folgt der Autor

• Schritt I: Die Funktion createElement
• Schritt II: Die Renderfunktion
• Schritt III: Gleichzeitiger Modus
• Schritt IV: Fasern
• Schritt V: Render- und Commit-Phasen
• Schritt VI: Abstimmung
• Schritt VII: Funktionskomponenten
• Schritt VIII: Haken

Diese Schritte implementieren schrittweise ein Mini-React. Um die Lesbarkeit und Wartbarkeit des Codes zu verbessern, werden diese Funktionen in verschiedene Dateien aufgeteilt:

.
├── README.md
├── Beispiele // Demo-Verzeichnis├── package.json
├── rollup.config.js
├── Quelle
│ ├── dom.ts
│ ├── h.ts
│ ├── hooks.ts
│ ├── index.ts
│ ├── versöhnlich.ts
│ ├── scheduler.ts
│ └── Typ.ts
└── tsconfig.json

• Erledigen Sie DOM-bezogene Arbeiten in dom.ts
• h.ts ist die Implementierung von jsxFactory und jsxFragmentFactory
• hooks.ts ist die Implementierung von Hooks
• reconciler.ts ist die Implementierung der Reconcile- und Commit-Phasen
• shceduler.ts ist die Implementierung des Taskplaners
• type.ts ist eine Typdefinition

An diesem Punkt ist das Projekt fertig. Die Struktur des gesamten Projekts und einige Codeimplementierungen basieren auf dem fre-Framework.

Dies ist das Ende dieses Artikels über die Projektkonstruktion und Implementierung des von Grund auf neu geschriebenen React-ähnlichen Frameworks. Weitere relevante Inhalte zur React-ähnlichen Konstruktion finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!