Quelle est la différence entre réagir et webpack

Différence : 1. React est un framework JavaScript, tandis que webpack est un packager de modules statiques pour les applications JavaScript ; 2. React est principalement utilisé pour créer des interfaces utilisateur, tandis que webpack peut être rechargé et compilé, et toutes les ressources statiques peuvent être fusionnées, réduisant ainsi les requêtes io.

L'environnement d'exploitation de ce tutoriel : système Windows 7, React version 17.0.1, ordinateur Dell G3.

Qu'est-ce que React

React est un framework JavaScript permettant de créer des interfaces utilisateur.

Framework : code réutilisable. Plus les gens l’utilisent, plus il devient célèbre, et plus les gens l’utilisent, plus il a de la valeur. (rires)

Angular est aussi célèbre que React.

React est une bibliothèque JS pour le rendu de l'interface utilisateur, positionnée pour implémenter la solution UI

React Web App, le React Native dérivé est une solution d'application multi-écran

Caractéristiques :

• Conception déclarative : Paradigme de déclaration

• Efficace : utilisez VDOM pour réduire les interactions avec le DOM

• Flexible : fonctionne parfaitement avec des bibliothèques ou des frameworks connus

• JSX : Un langage indépendant qui tente de résoudre de nombreux défauts de JS, ES6 inclut Incorpore presque toutes les fonctionnalités JSX

• Composants : réutilisation du code

• Flux de données de réponse unidirectionnelle : plus simple et plus rapide que la liaison bidirectionnelle.

Pourquoi utiliser React ?

Les méthodes traditionnelles utilisent fréquemment le DOM et les performances ne peuvent pas répondre aux exigences ; React utilise le VDOM, qui a des performances élevées

Les coûts de maintenance du code JS traditionnel sont élevés et React est basé sur des composants. développement

Nécessite de prendre en charge le développement mobile

Inconvénients de React :

• Pour les frontaux traditionnels qui utilisent JS et jQuery, React est très peu convivial

• React met l'accent sur les composants et la gestion des états, et son la vision du monde est orientée vers les langages de programmation

• Vue.js Il met l'accent sur la synchronisation automatique des vues, et sa vision du monde est orientée vers les scripts d'interface utilisateur

• Le coût d'apprentissage de React est supérieur à celui de Vue.js .

• React n'a pas de compartiment familial, il n'a qu'une interface utilisateur

Qu'est-ce que webpack

Essentiellement, webpack est un bundler de modules statiques (groupeur de modules) pour les applications JavaScript modernes. Lorsque webpack traite une application, il crée de manière récursive un graphe de dépendances qui contient tous les modules dont l'application a besoin, puis regroupe tous ces modules dans un ou plusieurs bundles.

Webpack est comme une ligne de production. Il doit passer par une série de processus de traitement avant que les fichiers sources puissent être convertis en résultats de sortie. Chaque processus de traitement sur cette ligne de production a une responsabilité unique, et il existe des dépendances entre plusieurs processus seulement une fois le traitement en cours terminé, il peut être transmis au processus suivant pour traitement. Un plug-in est comme une fonction insérée dans la ligne de production, traitant les ressources sur la ligne de production à un moment précis.

webpack utilise Tapable pour organiser cette ligne de production complexe. Webpack diffusera les événements pendant le fonctionnement. Le plug-in n'a besoin que d'écouter les événements qui l'intéressent et peut rejoindre la ligne de production pour modifier le fonctionnement de la ligne de production. Le mécanisme de flux d'événements de webpack garantit l'ordre des plug-ins, rendant l'ensemble du système très évolutif.

Processus de construction du webpack

Le processus en cours d'exécution de Webpack est un processus en série. Le processus suivant sera exécuté du début à la fin :

• Paramètres d'initialisation : lire et fusionner les paramètres des fichiers de configuration et des instructions Shell, obtenir le paramètres finaux.

• Démarrer la compilation : initialisez l'objet Compiler avec les paramètres obtenus à l'étape précédente, chargez tous les plug-ins configurés et exécutez la méthode run de l'objet pour démarrer la compilation.

• Déterminer l'entrée : recherchez tous les fichiers d'entrée en fonction de l'entrée dans la configuration.

• Compilez le module : à partir du fichier d'entrée, appelez tous les chargeurs configurés pour traduire le module, puis recherchez les modules dont dépend le module, puis répétez cette étape jusqu'à ce que tous les fichiers dépendants de l'entrée aient été traités par celui-ci. étape.

• Compilation complète des modules : après avoir utilisé Loader pour traduire tous les modules à l'étape 4, le contenu final traduit de chaque module et les dépendances entre eux sont obtenus.

• Ressources de sortie : selon la relation de dépendance entre l'entrée et le module, assemblez-les en morceaux contenant plusieurs modules, puis convertissez chaque morceau en un fichier séparé et ajoutez-le à la liste de sortie. sortie Dernière chance pour le contenu.

• Sortie terminée : après avoir déterminé le contenu de sortie, déterminez le chemin de sortie et le nom du fichier en fonction de la configuration, et écrivez le contenu du fichier dans le système de fichiers.

Dans le processus ci-dessus, Webpack diffusera des événements spécifiques à des moments précis dans le temps. Le plug-in exécutera une logique spécifique après avoir écouté les événements qui vous intéressent, et le plug-in peut appeler l'API fournie par Webpack pour modifier. les résultats d'exécution de Webpack .

La différence entre React et Webpack

React est un framework JavaScript, une bibliothèque JS pour le rendu de l'interface utilisateur et utilisé pour créer des interfaces utilisateur.

Webpack est un bundler qui peut regrouper plusieurs fichiers js dans un seul fichier (en fait, il peut non seulement regrouper des fichiers js, mais également d'autres types de fichiers, tels que des fichiers css, des fichiers json, etc.).

Le rôle du webpack

• est de recharger et de compiler. En fait, il s'agit de compiler la syntaxe que le navigateur ne comprend pas en la syntaxe que le navigateur comprend. Par exemple, less est compilé en CSS, la syntaxe ES6 est convertie en ES5, etc.

• Réduisez les demandes d'io. Habituellement, après notre demande, nous renverrons un code HTML au navigateur. À ce moment-là, si nous ouvrons la console, nous trouverons les ressources statiques référencées via un script, un lien et d'autres balises dans la page HTML, et le navigateur fera une autre requête pour obtenir ces ressources. Cependant, le packaging de webpack fusionne toutes les ressources statiques et réduit les requêtes IO.

【Recommandations associées : Tutoriel vidéo Redis】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!