Lassen Sie uns noch einmal über eine Reihe von Problemen sprechen, die durch die Implementierung nativer js-Drag-and-Drop-Effekte_javascript-Fähigkeiten durch React.js verursacht werden

React entstand als internes Projekt bei Facebook. Da das Unternehmen mit allen JavaScript-MVC-Frameworks auf dem Markt unzufrieden war, beschloss es, ein eigenes Projekt zu schreiben, um die Instagram-Website zu erstellen. Nachdem ich es erstellt hatte, stellte ich fest, dass diese Reihe von Dingen sehr nützlich ist, und so wurde sie im Mai 2013 als Open Source veröffentlicht. Da die Designidee von React äußerst einzigartig ist, handelt es sich um eine revolutionäre Innovation, eine hervorragende Leistung und eine sehr einfache Codelogik. Daher achten und nutzen immer mehr Menschen darauf und glauben, dass es in Zukunft das Mainstream-Tool für die Webentwicklung sein könnte.

Der Drag, den ich vor ein paar Tagen geschrieben habe, ist eine Frage, die ich zurückgelassen habe. . . Dieses Mal wurden auf Anregung begeisterter Blogger einige kleinere Fehler behoben und auch der Kantenerkennungsteil des Ziehens hinzugefügt. . . Reden wir noch einmal über Drag

1. DOM-Elemente nicht direkt bedienen

React verwendet das Konzept des virtuellen Doms, um die direkte Bedienung von Dom-Elementen zu vermeiden. Daher muss ich darauf achten, dass ich var dragBox=document direkt verwende, um die Parameter des Formulars abzurufen. 'form') sucht nach dom, zeichnet jedoch tatsächlich die Anfangsposition von from auf, das aufgerufen werden kann, wenn seine untergeordnete Komponente die Parameter der übergeordneten Komponente aktualisiert. Rufen Sie es also in der MyFrom-Komponente ab, wie im folgenden Code gezeigt:

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);
},

Auf diese Weise können Sie sich direkt in der übergeordneten Komponente bedienen, anstatt sie in der untergeordneten Komponente aufzurufen.

2. Die Ereignisse onmousemove und onmouseup sollten an das Dokument gebunden sein

Wenn beim Drag-Ereignis die Maus in der DragArea gedrückt wird, sollte die Entfernung erkannt werden, um die sich die Maus im Dokument bewegt und wann sie nach oben springt. Andernfalls entsteht bei direkter Bindung an das Formular ein uneleganter Punkt. Das heißt, wenn die Mausgeschwindigkeit schneller ist, schlägt das Ziehen fehl, wenn die Maus zurückkommt Die Leiste zieht die Maus automatisch an. Verwenden Sie daher die Funktion „componentDidMount“ in der Reaktionsinitialisierungsphase. Diese Funktion wird aufgerufen, nachdem die Komponente geladen wurde. Das heißt, wenn diese Methode aufgerufen wird, wurde die Komponente auf der Seite gerendert und kann geändert werden diesmal. Das heißt, das entsprechende Ereignis ist zu diesem Zeitpunkt wie folgt an das Dokument gebunden:

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

Dadurch wird dieser kleine Fehler beseitigt!

3. Kantenerkennung hinzufügen

Im Allgemeinen möchten wir beim Ziehen nicht in der Lage sein, aus dem sichtbaren Fenster herauszuziehen, daher muss dies erkannt werden. Erkennen Sie Positionen in vier Richtungen, nämlich nach oben, unten, links und rechts. Offensichtlich muss der Abstand zwischen oben und links größer oder gleich 0 sein und der Abstand zwischen unten und rechts muss kleiner sein als die Größe des Ansichtsfensters abzüglich der Elementbreite und -höhe von sich selbst.

Spezifischer Code:

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.