框架简化了工程师的开发，这是我尝试简化 ReactJS 的幕后功能。
我开始使用 ReactJS。是的，我确实有。这就像一个梦想，推迟了两年，当时我对 UI / UX 设计和前端开发充满热情，然后才开始进入数据科学。 （我仍然像两年前一样热情。）
我现在是一家公司的实习生（这家公司称自己为初创公司，因为它的文化更像是初创公司而不是公司的文化），今天，在我的第一天，我实际上无所事事，因为我的 TL （团队负责人）没有来办公室，因为他正忙着开会。
我是否让时间从我手中溜走了？绝对不是。
我获得任务/项目来测试我的数据分析技能的可能性相当低。因此我开始亲自动手开发。我感觉到这可能是开始使用 ReactJS 的最佳时机。
React 是一个动词（双关语）。但在开发技术的背景下，“Web 和本机用户界面的库”，ReactJS 官方网站声称。
现在，如果您熟悉开发生态系统，您一定听说过其他两个竞争对手，或者更确切地说是 ReactJS 的兄弟姐妹，它们是 Angular 和 VueJS。
这是 3 种最流行的前端技术的简短比较。
| 核心理念 | 专注于 UI 的库 | 成熟的框架 | 渐进式框架 |
|---|---|---|---|
| 数据绑定 | 单向数据流 | 双向数据绑定 | 双向数据绑定（可选） |
| 组件结构 | 自定义组件 | 指令和组件 | 组件 |
| 学习曲线 | 中等 | 陡峭 | 温柔 |
| 性能 | 高（虚拟 DOM） | 由于双向数据绑定，可能会更慢 | 高（优化渲染） |
| 可扩展性 | 优秀，适合大型应用 | 对大型企业应用的强力支持 | 良好的可扩展性，但对于复杂的项目可能需要额外的库 |
| 社区和生态系统 | 最大社区，丰富生态 | 庞大的社区，强大的生态系统 | 不断发展的社区，良好的生态系统 |
| 灵活性 | 高，可以与其他库/框架一起使用 | 由于结构刚性而不太灵活 | 灵活，可以增量使用 |
Folgendes sind die Probleme, mit denen Sie konfrontiert werden, wenn Sie Folgendes verwenden:
Schwierigkeiten bei der Wartung großer Anwendungen:
Einfachem HTML und JS fehlt ein strukturierter Ansatz zum Organisieren von Code.
Komplexe Anwendungen können zu einem Wirrwarr aus Logik und UI-Manipulation innerhalb von Ereignis-Listenern und Skriptdateien führen.
Das macht es schwierig, Code zu verstehen, zu ändern und zu debuggen, wenn die Anwendung wächst.
Ineffiziente DOM-Manipulation:
Die direkte Manipulation des DOM in JS kann ineffizient sein.
Jede Statusänderung kann eine vollständige Neudarstellung der HTML-Struktur auslösen, selbst bei kleineren UI-Updates.
Dies kann mit zunehmender Anwendungskomplexität zu Leistungsengpässen führen.
Begrenzte Wiederverwendbarkeit:
Das Erstellen wiederverwendbarer UI-Komponenten mit einfachem HTML und JS kann umständlich sein.
Möglicherweise müssen Sie Codefragmente kopieren und in verschiedene Teile Ihrer Anwendung einfügen.
Das macht es schwierig, die Konsistenz aufrechtzuerhalten und Änderungen effizient umzusetzen.
Komplexes Zustandsmanagement:
Die Verwaltung des Status einer Anwendung (Daten, die das Verhalten der Benutzeroberfläche steuern) wird mit einfachem HTML und JS schwierig.
Das Verfolgen von Datenänderungen und den entsprechenden UI-Updates kann chaotisch und fehleranfällig werden, insbesondere bei komplexen Datenflüssen.
ReactJS geht auf diese Einschränkungen ein, indem es eine komponentenbasierte Architektur, virtuelles DOM für effiziente Updates und ein umfangreiches Ökosystem für die Verwaltung komplexer Benutzeroberflächen und des Anwendungsstatus bietet.
Verbesserte Wartbarkeit:
Verbesserte Leistung:
Code-Wiederverwendbarkeit:
Als ich meine ersten Bauteile erstellt habe, habe ich mich gefragt: „Was genau“ ist das? Ist es HTML oder JS?
Ich habe JS über Element oderElement. Aber das Schreiben von HTML in eine JS-Datei fühlt sich seltsam oder eher anders an.
Ich habe versucht, den HTML-Code in die JS-Datei eines Nicht-React-Projekts zu schreiben und rate mal, was nicht gut gelaufen ist.
Dann habe ich erfahren, dass diese spezielle Syntax (HTML wie innerhalb der JS-Datei) als JSX JavaScript XML bezeichnet wird undeine Erweiterung von JavaScript ist.
Wenn der Code, den Browser verstehen, letztendlich das einfache HTML und JS ist, bedeutet das, dass einige Vorgänge auf dem JSX (syntaktischer Zucker zum einfachen Erstellen komplexer Anwendungen) ausgeführt werden, den wir schreiben.
Diese Vorgänge hinter den Kulissen selbst werden als Build-Prozess bezeichnet.
Die übergeordnete Idee eines Build-Prozesses besteht darin, Ihren Entwicklungscode in eine optimierte Version umzuwandeln, die für die Bereitstellung in einer Produktionsumgebung bereit ist.
Während spezifische Tools und Konfigurationen je nach Technologie-Stack variieren können, gelten die allgemeinen Konzepte und Ziele des Build-Prozesses allgemein für die gesamte Frontend-Webentwicklung.
Wir haben gelernt, dass die übergeordnete Idee dieselbe bleibt, die verschiedenen Phasen im Build-Prozess von React jedoch wie folgt sind:
Ein Bundler wie Webpack nimmt alle diese separaten Dateien und kombiniert sie zu einer kleineren Anzahl optimierter Bundles.
Übersetzung:
Minimierung:
Optimierung:
Produktionsmodus:
Im Gegensatz dazu konzentriert sich der Produktionsmodus auf die Optimierung, indem er Minimierung, Tree-Shaking und andere Leistungsverbesserungen ermöglicht.
react-scripts ist ein internes Paket, das von Create React App (CRA) verwendet wird, um die Funktionen hinter den Kulissen in einem React-Projekt zu verwalten.
Entwickler interagieren die meiste Zeit nicht direkt damit, sind aber für die Entwicklungseffizienz unerlässlich.
Hier ist, wofür React-Scripts verantwortlich ist:
Die drei wichtigsten Aufgaben der React-Scripts sind die folgenden, die wir im Detail verstehen werden:
Bündelung:
Übersetzung:
Minimierung:
So funktioniert die Minimierung:
Unnötige Zeichen entfernen:
Variablen- und Funktionsnamen kürzen:
Kommentare entfernen:
Dies ist das Lernen von nur einem Tag zusammengefasst.
Ich hätte viel mehr bauen können, wenn ich GenAI-Tools verwendet hätte. Ich habe GenAI-Tools so oder so verwendet, aber zu Lernzwecken.
Ich glaube, dass Sie sich von denen unterscheiden werden, die die Entwicklung automatisieren, wenn Sie die richtigen Fragen stellen und dann die Konzepte in ihrer Tiefe verstehen.
In den Interviews geht es um das Verständnis und die Klarheit des Konzepts und nicht um Ihre Codierungsgeschwindigkeit, denn so oder so wird es bis zu einem gewissen Grad automatisiert.
Der einzige X-Faktor dafür, dass Sie ein großartiger Softwareentwickler sind, liegt also in Ihrem Wissen, zumindest zu validieren und zu verifizieren, ob das Ergebnis des GenAI-Modells Ihren technischen Anforderungen entspricht oder nicht.
Wenn Sie denken, dass meine Inhalte wertvoll sind oder Feedback haben,
Erlauben Sie es mir, indem Sie sich an meine folgenden Social-Media-Kontakte wenden, die Sie in meinem Profil und den folgenden finden:
LinkedIn: https://www.linkedin.com/in/shrinivasv73/
Twitter (X): https://twitter.com/shrinivasv73
Instagram: https://www.instagram.com/shrinivasv73/
E-Mail: shrinivasv73@gmail.com
? Hier ist Shrinivas, Abschied nehmen!
以上是React 中的构建过程（或任何与此相关的框架中的构建过程是什么？）的详细内容。更多信息请关注PHP中文网其他相关文章！
