Une discussion approfondie sur les techniques du framework front-end React_Javascript

Résumé :

Récemment, l'entreprise va créer une application imbriquée dans l'application, et envisage d'utiliser la réaction de Facebook pour développer la vue, j'ai donc fait quelques recherches. Voici les pièges que j'ai rencontrés lors du développement. J'espère que cela pourra vous aider.

Adresse du projet : https://github.com/baixuexiyang/react
Problème :https://github.com/baixuexiyang/react/issues

Bienvenue dans Star and Fork !

Avantages de React :

•Exprimez simplement à quoi devrait ressembler votre application à tout moment, et lorsque les données sous-jacentes changent, React gérera automatiquement toutes les mises à jour de l'interface utilisateur.

•Après les modifications des données, React est conceptuellement similaire à un clic sur le bouton "Actualiser", mais seules les parties modifiées seront mises à jour.

•React consiste à créer des composants réutilisables, facilitant la réutilisation du code, les tests et la séparation des problèmes.

Remarque :

1. Mettez en majuscule la première lettre du composant chargé, par exemple :
2. La couche de rendu la plus externe de chaque composant doit avoir un élément d'emballage

3.this.props ne peut pas être modifié, mais this.state peut être modifié

4. L'événement page oclick ne fonctionne pas dans Safari sur iOS, onClick={this.detail.bind(this, item)} doit utiliser d'autres méthodes, telles que l'événement de liaison de jQuery

5.Convertir la chaîne en HTML, dangereusementSetInnerHTML={{__html : ''}}

6.getInitialState : appelé une fois avant le montage du composant. La valeur de retour sera utilisée comme valeur initiale de this.state.

getDefaultProps : appelé une fois lorsque la classe de composant est créée, puis la valeur de retour est mise en cache. Si le composant parent ne spécifie pas de clé dans props, la propriété correspondante dans l'objet renvoyé ici sera fusionnée dans this.props (à utiliser dans pour détecter la propriété).

Cette méthode est appelée avant la création d'une instance et ne peut donc pas s'appuyer sur this.props. De plus, tous les objets complexes renvoyés par getDefaultProps() seront partagés entre les instances, plutôt que d'en avoir une copie par instance.

Cycle de vie des composants :

composantWillMount：

Le serveur et le client ne sont appelés qu'une seule fois, immédiatement avant l'exécution initiale du rendu.

composantDidMount :

Appelé une fois immédiatement après l'exécution initiale du rendu, il n'est valable que côté client (il ne sera pas appelé côté serveur).

composantWillReceiveProps :

Appelé lorsque le composant reçoit de nouveaux accessoires. Cette méthode ne sera pas appelée lors du rendu initial.

devraitComponentUpdate：

Appelé après avoir reçu de nouveaux accessoires ou un nouvel état avant le rendu. Cette méthode ne sera pas appelée lors de l'initialisation du rendu, ni lors de l'utilisation de la méthode forceUpdate.

S'il est déterminé que les nouveaux accessoires et l'état n'entraîneront pas la mise à jour du composant, false doit être renvoyé ici.

composantWillUpdate：

Appelé immédiatement avant de recevoir de nouveaux accessoires ou un nouvel état. Cette méthode ne sera pas appelée lors du rendu initial.

composantDidUpdate :

Appelé immédiatement après la synchronisation des mises à jour du composant avec le DOM. Cette méthode ne sera pas appelée lors de l'initialisation du rendu.

composantWillUnmount：

Appelé immédiatement lorsque le composant est supprimé du DOM.

Résumé :

En utilisant React pour développer, tout le HTML est écrit dans des fichiers js, donc le développement n'est pas très fluide. Recommander un plug-in Chrome : React Developer Tools

Il y a quelques malentendus à propos de React. Laissez-moi les résumer ici :

React n'est pas un framework MVC complet. Il peut tout au plus être considéré comme le V (View) dans MVC. Même React ne reconnaît pas pleinement le modèle de développement MVC ; La capacité de rendu côté serveur de React ne peut être considérée que comme une cerise sur le gâteau, et non comme son point de départ principal. En fait, le site officiel de React mentionne à peine son application côté serveur ;

Certaines personnes comparent React au Web Component, mais les deux ne sont pas complètement compétitifs. Vous pouvez utiliser React pour développer un vrai Web Component

;

React n'est pas un nouveau langage de modèle. JSX est juste une représentation.

Ce qui précède contient toutes les connaissances sur le framework front-end React, j'espère que vous l'aimerez.