Mari kita bincangkan sekali lagi tentang satu siri masalah yang disebabkan oleh pelaksanaan React.js bagi kemahiran seret dan lepas js effect_javascript asli

React berasal sebagai projek dalaman di Facebook Oleh kerana syarikat itu tidak berpuas hati dengan semua rangka kerja JavaScript MVC di pasaran, ia memutuskan untuk menulis sendiri untuk membina tapak web Instagram. Selepas membuatnya, saya mendapati bahawa set perkara ini sangat berguna, jadi ia adalah sumber terbuka pada Mei 2013. Oleh kerana idea reka bentuk React sangat unik, ia merupakan inovasi revolusioner, mempunyai prestasi cemerlang, dan logik kodnya sangat mudah. Oleh itu, semakin ramai orang memberi perhatian dan menggunakannya, memikirkan bahawa ia mungkin alat arus perdana untuk pembangunan web pada masa hadapan.

Seretan yang saya tulis beberapa hari lalu adalah soalan yang saya tinggalkan. . . Kali ini, di bawah gesaan blogger yang bersemangat, beberapa pepijat kecil telah diperbetulkan, dan bahagian pengesanan tepi untuk menyeret juga telah ditambah. . . Mari kita bercakap tentang seret lagi

1 Jangan kendalikan elemen DOM secara langsung

React menggunakan konsep dom maya Tujuannya adalah untuk mengelakkan elemen dom beroperasi secara langsung, jadi kita perlu memberi perhatian semasa mengendalikan elemen dom saya menggunakan var dragBox=document secara langsung untuk mendapatkan parameter borang .getElementById(. 'form') mencari dom, tetapi sebenarnya merekodkan kedudukan awal dari, yang boleh dipanggil apabila komponen anaknya mengemas kini parameter komponen induk. Iaitu, dapatkannya dalam komponen MyFrom, seperti yang ditunjukkan dalam kod berikut:

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

Dengan cara ini anda boleh mengendalikan diri anda secara langsung dalam komponen induk dan bukannya memanggilnya dalam komponen anak.

2. Acara onmousemove dan onmouseup hendaklah diikat pada dokumen

Dalam acara seret, apabila tetikus ditekan dalam DragArea, jarak tetikus bergerak dalam dokumen dan apabila ia melantun ke atas harus dikesan. Jika tidak, jika ia terikat secara langsung dengan borang, akan ada titik yang tidak elegan, iaitu, apabila bar seret diseret dekat tepi, jika kelajuan tetikus lebih cepat, ia akan gagal apabila tetikus kembali, seret bar secara automatik akan menarik tetikus. Oleh itu, gunakan fungsi componentDidMount dalam fasa permulaan tindak balas Fungsi ini akan dipanggil selepas komponen dimuatkan, maksudnya, apabila kaedah ini dipanggil, komponen telah dipaparkan pada halaman, dan DOM boleh diubah suai. kali ini. Maksudnya, peristiwa yang sepadan terikat pada dokumen pada masa ini, seperti berikut:

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

Ini akan menghapuskan pepijat kecil itu!

3. Tambah pengesanan tepi

Secara amnya, kami tidak mahu dapat menyeret keluar daripada tetingkap yang kelihatan apabila menyeret, jadi ini perlu dikesan. Mengesan kedudukan dalam empat arah iaitu atas, bawah, kiri dan kanan. Jelas sekali, jarak antara atas dan kiri mestilah lebih besar daripada atau sama dengan 0, dan jarak antara bawah dan kanan mestilah kurang daripada saiz port pandangan tolak lebar dan ketinggian elemen daripada dirinya sendiri.

Kod khusus:

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 : Le nouveau code a été mis à jour sur mon github, vous pouvez l'étudier.

Contexte et principes de ReactJS

Dans le développement Web, nous devons toujours refléter les modifications des données dans l'interface utilisateur en temps réel, puis nous devons faire fonctionner le DOM. Les opérations DOM complexes ou fréquentes sont généralement à l'origine de goulots d'étranglement en termes de performances (la manière d'effectuer des opérations DOM complexes hautes performances est généralement un indicateur important des compétences d'un développeur front-end). React introduit à cet effet un mécanisme DOM virtuel (Virtual DOM) : un ensemble d'API DOM est implémenté côté navigateur à l'aide de Javascript. Lors du développement basé sur React, toute la construction du DOM est effectuée via le DOM virtuel. Chaque fois que les données changent, React reconstruit l'intégralité de l'arborescence DOM. Ensuite, React compare l'intégralité de l'arborescence DOM actuelle avec l'arborescence DOM précédente pour obtenir la structure DOM. alors seules les parties qui doivent changer sont mises à jour dans le DOM actuel du navigateur. De plus, React peut actualiser par lots le DOM virtuel. Deux modifications de données dans une boucle d'événement (Event Loop) seront fusionnées. Par exemple, si vous modifiez continuellement le contenu du nœud de A à B, puis de B à A, React réfléchira. que l'interface utilisateur n'a pas changé, et si elle est contrôlée manuellement, cette logique est généralement extrêmement compliquée. Bien qu'une arborescence DOM virtuelle complète doive être construite à chaque fois, étant donné que le DOM virtuel est constitué de données en mémoire, les performances sont extrêmement élevées et seule la partie Diff est exploitée sur le DOM réel, améliorant ainsi les performances. De cette manière, tout en garantissant les performances, les développeurs n'ont plus besoin de prêter attention à la manière dont une certaine modification de données est mise à jour vers un ou plusieurs éléments DOM spécifiques, mais doivent uniquement se soucier de la manière dont l'interface entière est restituée dans n'importe quel état de données.

Si vous avez écrit une page Web pure avec un rendu côté serveur comme vous l'avez fait dans les années 1990, sachez que tout ce que le côté serveur a à faire est de restituer le HTML en fonction des données et de l'envoyer au navigateur. Si un certain texte de statut doit être modifié en raison d'un clic de l'utilisateur, cela peut également être fait en actualisant la page entière. Le serveur n'a pas besoin de savoir quel petit morceau de HTML a changé, mais doit simplement actualiser la page entière en fonction des données. En d’autres termes, toute modification de l’interface utilisateur s’effectue via une actualisation globale. React met ce modèle de développement au premier plan de manière performante. Chaque fois que vous mettez à jour l'interface, vous pouvez penser que la page entière a été actualisée. Quant à savoir comment effectuer des mises à jour partielles pour garantir les performances, c'est ce que le framework React doit faire.

En empruntant l'exemple de l'application de chat dans la vidéo de Facebook présentant React, lorsqu'un nouveau message arrive, l'idée de développement traditionnelle est la suivante: votre processus de développement doit savoir quelle donnée est arrivée et comment ajouter un nouveau DOM. à l'arborescence DOM actuelle ; et l'idée de développement basée sur React est celle indiquée ci-dessous. Vous devez uniquement vous soucier de la manière dont l'interface utilisateur change entre les deux données. On peut constater que l'utilisation de React réduit considérablement la complexité logique, ce qui signifie que la difficulté de développement est réduite et qu'il y a moins de risques de bogues.