Parlons à nouveau d'une série de problèmes causés par l'implémentation par React.js des compétences natives de glisser-déposer js effect_javascript

React est né d'un projet interne à Facebook. Parce que l'entreprise n'était pas satisfaite de tous les frameworks JavaScript MVC du marché, elle a décidé d'écrire le sien pour créer le site Web Instagram. Après l'avoir réalisé, j'ai trouvé que cet ensemble de choses était très utile, c'est pourquoi il est devenu open source en mai 2013. Parce que l'idée de conception de React est extrêmement unique, il s'agit d'une innovation révolutionnaire, offre des performances exceptionnelles et la logique du code est très simple. Par conséquent, de plus en plus de gens y prêtent attention et l’utilisent, pensant qu’il pourrait devenir l’outil principal de développement Web à l’avenir.

Le drag que j'ai écrit il y a quelques jours est une question que j'ai laissée derrière moi. . . Cette fois, sous l'impulsion de blogueurs enthousiastes, quelques bugs mineurs ont été corrigés et la partie détection des contours du glisser a également été ajoutée. . . Parlons encore de drag

1. Ne faites pas fonctionner directement les éléments du DOM

React utilise le concept de dom virtuel. Le but est d'éviter autant que possible d'opérer directement les éléments dom, nous devons donc faire attention lors de l'utilisation des éléments dom. J'ai utilisé directement var dragBox=document pour obtenir les paramètres du formulaire. .getElementById('form') recherche dom, mais enregistre en fait la position initiale de from, qui peut être appelée lorsque son composant enfant met à jour les paramètres du composant parent. Autrement dit, récupérez-le dans le composant MyFrom, comme indiqué dans le code suivant :

onChildChanged:function(newState){
/*以下为修改处*/
var computedStyle=document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.dragBox),null);
newState.left=computedStyle.left;
newState.top=computedStyle.top;
/*以上为修改处*/
this.setState(newState);
},

De cette façon, vous pouvez vous opérer directement dans le composant parent au lieu de l'appeler dans le composant enfant.

2. Les événements onmousemove et onmouseup doivent être liés au document

Dans l'événement glisser, lorsque la souris est enfoncée dans la DragArea, la distance parcourue par la souris dans le document et le moment où elle rebondit doivent être détectés. Sinon, s'il est directement lié au formulaire, il y aura un point inélégant, c'est-à-dire que lorsque la barre de déplacement est déplacée près du bord, si la vitesse de la souris est plus rapide, elle échouera. Lorsque la souris reviendra, le déplacement échouera. la barre attirera automatiquement la souris. Par conséquent, utilisez la fonction composantDidMount dans la phase d'initialisation de réaction. Cette fonction sera appelée après le chargement du composant, c'est-à-dire que lorsque cette méthode est appelée, le composant a été rendu sur la page et le DOM peut être modifié. cette fois. C'est-à-dire que l'événement correspondant est lié au document à cet instant, de la manière suivante :

componentDidMount:function(){
document.addEventListener('mousemove',(e)=>{this.move(e);},false);/*ES6新特性，箭头函数，需要依赖jsx编译工具才能正确运行*/
document.addEventListener('mouseup',(e)=>{this.endDrag(e);},false);
},

Cela éliminera ce petit bug !

3. Ajouter une détection de bord

En général, nous ne voulons pas pouvoir faire glisser hors de la fenêtre visible lors du glisser, cela doit donc être détecté. Détectez la position dans quatre directions, à savoir haut, bas, gauche et droite. Évidemment, la distance entre le haut et la gauche doit être supérieure ou égale à 0, et la distance entre le bas et la droite doit être inférieure à la taille de la fenêtre d'affichage moins la largeur et la hauteur de l'élément par rapport à lui-même.

Code spécifique :

move:function(event){
var e = event ? event : window.event;
var dBox=ReactDOM.findDOMNode(this.refs.dragBox);
if (this.state.flag) {
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - this.state.currentX, disY = nowY - this.state.currentY;
/*增加拖拽范围检测*/
var currentLeft=parseInt(this.state.left) + disX;
var currentTop=parseInt(this.state.top) + disY;
var docX=document.documentElement.clientWidth||document.body.clientWidth;
var docY=document.documentElement.clientHeight||document.body.clientHeight;
if(currentLeft<=250){//检测屏幕左边，因为我这里的初始居中是利用了负1/2的盒子宽度的margin，所以用250px判断边界
dBox.style.left=250+"px";
}else if(currentLeft>=(docX-dBox.offsetWidth+250)){ //检测右边
dBox.style.left=(docX-this.state.offsetX)+"px";
}else{
dBox.style.left =currentLeft+ "px";
}
if(currentTop<=200){ //检测屏幕上边，因为我这里的初始居中是利用了负1/2的盒子高度的margin，所以用200px判断边界 <br> dBox.style.top=200+"px"; <br> }else if(currentTop>=(docY-dBox.offsetHeight+200)){ //检测下边<br> dBox.style.top=(docY-this.state.offsetY)+"px";<br> }else{<br> dBox.style.top = currentTop + "px"; <br> }<br> }

PS: Der neue Code wurde auf meinem Github aktualisiert, Sie können ihn studieren.

Hintergrund und Prinzipien von ReactJS

Bei der Webentwicklung müssen wir sich ändernde Daten immer in Echtzeit auf der Benutzeroberfläche widerspiegeln und dann das DOM bedienen. Komplexe oder häufige DOM-Vorgänge sind in der Regel die Ursache für Leistungsengpässe (die Durchführung komplexer DOM-Vorgänge mit hoher Leistung ist normalerweise ein wichtiger Indikator für die Fähigkeiten eines Front-End-Entwicklers). React führt zu diesem Zweck einen virtuellen DOM-Mechanismus (Virtual DOM) ein: Eine Reihe von DOM-APIs werden auf der Browserseite mithilfe von Javascript implementiert. Bei der Entwicklung basierend auf React wird die gesamte DOM-Konstruktion über das virtuelle DOM durchgeführt. Wenn sich die Daten ändern, vergleicht React den aktuellen gesamten DOM-Baum mit dem vorherigen DOM-Baum, um die DOM-Struktur zu erhalten dann werden nur die Teile, die geändert werden müssen, im eigentlichen Browser-DOM aktualisiert. Darüber hinaus kann React das virtuelle DOM stapelweise aktualisieren, wenn Sie beispielsweise den Knoteninhalt kontinuierlich von A nach B und dann von B nach A ändern dass sich die Benutzeroberfläche nicht geändert hat und dass diese Logik bei manueller Steuerung normalerweise äußerst kompliziert ist. Obwohl jedes Mal ein vollständiger virtueller DOM-Baum erstellt werden muss, ist die Leistung extrem hoch, da das virtuelle DOM aus Speicherdaten besteht und nur der Diff-Teil auf dem tatsächlichen DOM ausgeführt wird, wodurch die Leistung verbessert wird. Auf diese Weise müssen Entwickler bei gleichzeitiger Sicherstellung der Leistung nicht mehr darauf achten, wie eine bestimmte Datenänderung auf ein oder mehrere spezifische DOM-Elemente aktualisiert wird, sondern müssen sich nur noch darum kümmern, wie die gesamte Schnittstelle in jedem Datenstatus gerendert wird.

Wenn Sie wie in den 1990er Jahren eine reine Webseite mit serverseitigem Rendering geschrieben haben, sollten Sie wissen, dass die serverseitige Seite lediglich HTML basierend auf den Daten rendern und an den Browser senden muss. Wenn aufgrund eines Benutzerklicks ein bestimmter Statustext geändert werden muss, kann dies auch durch eine Aktualisierung der gesamten Seite erfolgen. Der Server muss nicht wissen, welches kleine Stück HTML sich geändert hat, sondern muss nur die gesamte Seite basierend auf den Daten aktualisieren. Mit anderen Worten: Alle Änderungen an der Benutzeroberfläche werden durch eine Gesamtaktualisierung vorgenommen. React bringt dieses Entwicklungsmodell auf leistungsstarke Weise ins Frontend. Jedes Mal, wenn Sie die Benutzeroberfläche aktualisieren, können Sie davon ausgehen, dass die gesamte Seite aktualisiert wurde. Das React-Framework muss Teilaktualisierungen durchführen, um die Leistung sicherzustellen.

Ausleihen des Beispiels der Chat-Anwendung im Video zur Einführung von React. Wenn eine neue Nachricht eintrifft, ist die traditionelle Entwicklungsidee wie oben gezeigt. Ihr Entwicklungsprozess muss wissen, welche Daten eingegangen sind und wie ein neues DOM hinzugefügt wird Knoten zum aktuellen DOM-Baum; die auf React basierende Entwicklungsidee ist lediglich dem Framework überlassen. Es ist ersichtlich, dass die Verwendung von React die Komplexität der Logik erheblich reduziert, was bedeutet, dass die Entwicklungsschwierigkeiten verringert werden und weniger Möglichkeiten für das Auftreten von Fehlern bestehen.