React.js のネイティブ JS ドラッグ アンド ドロップ効果_JavaScript スキルの実装によって引き起こされる一連の問題についてもう一度話しましょう

React は Facebook の内部プロジェクトとして誕生しました。Facebook は市場にあるすべての JavaScript MVC フレームワークに不満を抱いていたため、独自のフレームワークを作成して Instagram Web サイトを構築することにしました。作ってみてこのセットがとても便利だったので、2013年5月にオープンソース化しました。 React の設計思想は非常にユニークであるため、革命的なイノベーションであり、優れたパフォーマンスを備えており、コード ロジックは非常にシンプルです。そのため、今後のWeb開発の主流ツールになるのではないかと注目し、利用する人が増えています。

数日前に書いたドラッグは、私が残した質問です。 。 。今回は熱心なブロガーの要望により、いくつかの細かいバグが修正され、ドラッグ時のエッジ検出部分も追加されました。 。 。またドラッグについて話しましょう

1. DOM 要素を直接操作しないでください

React は仮想 dom の概念を使用しており、dom 要素を直接操作することをできるだけ避けるため、dom 要素を直接操作する際には注意が必要です。 .getElementById('form') は dom を検索しますが、実際には from の初期位置を記録します。これは、その子コンポーネントが親コンポーネントのパラメーターを更新するときに呼び出すことができます。つまり、次のコードに示すように、MyFrom コンポーネントで取得します。

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

この方法では、子コンポーネントで呼び出すのではなく、親コンポーネントで直接自分自身を操作できます。

2. onmousemove および onmouseup イベントはドキュメント にバインドされる必要があります。

ドラッグ イベントでは、DragArea でマウスが押されたときに、ドキュメント内でマウスが移動した距離と、マウスが跳ね上がったときの距離を検出する必要があります。それ以外の場合、フォームに直接バインドされている場合、不適切な点が発生します。つまり、ドラッグ バーを端近くにドラッグすると、マウスの速度が速いと、マウスが戻るときにドラッグが失敗します。バーは自動的にマウスを引き付けます。したがって、反応初期化フェーズでは、componentDidMount 関数を使用します。この関数は、コンポーネントがロードされた後に呼び出されます。つまり、このメソッドが呼び出されるとき、コンポーネントはページ上にレンダリングされ、DOM を変更できます。この時。つまり、次のように、対応するイベントがこの時点でドキュメントにバインドされます:

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

これでその小さなバグは解消されます!

3. エッジ検出を追加します

一般に、ドラッグするときに表示されているウィンドウの外にドラッグできないようにする必要があるため、これを検出する必要があります。上下左右の4方向の位置を検出します。明らかに、上と左の間の距離は 0 以上である必要があり、下と右の間の距離はビューポート サイズから要素の幅と高さを引いたものより小さくなければなりません。

特定のコード:

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> }

追記: 新しいコードが私の github で更新されました。勉強してみてください。

ReactJS の背景と原則

Web開発では常に変化するデータをリアルタイムにUIに反映し、DOMを操作する必要があります。複雑な DOM 操作や頻繁な DOM 操作は、通常、パフォーマンスのボトルネックの原因となります (高パフォーマンスの複雑な DOM 操作をどのように実行するかは、通常、フロントエンド開発者のスキルを示す重要な指標です)。 React は、この目的のために仮想 DOM (Virtual DOM) メカニズムを導入しています。一連の DOM API は、JavaScript を使用してブラウザ側に実装されます。 React に基づいて開発する場合、データが変更されるたびに、React は DOM ツリー全体を再構築して、DOM 構造の差異を取得します。その後、変更が必要な部分のみが実際のブラウザ DOM で更新されます。さらに、React は仮想 DOM をバッチ更新することができます。たとえば、イベント ループ (Event Loop) 内の 2 つのデータ変更は、ノードの内容を A から B に変更し、次に B から A に変更するとマージされます。 UI は変更されていないため、手動で制御する場合、通常、このロジックは非常に複雑になります。毎回完全な仮想DOMツリーを構築する必要があるが、仮想DOMはメモリデータであるためパフォーマンスが非常に高く、実DOM上ではDiff部分のみを操作することでパフォーマンスが向上する。このようにして、パフォーマンスを確保しながら、開発者は、特定のデータ変更が 1 つ以上の特定の DOM 要素にどのように更新されるかに注意を払う必要がなくなり、インターフェイス全体が任意のデータ状態でどのようにレンダリングされるかのみを気にする必要があります。

1990 年代のように、サーバー側レンダリングを使用して純粋な Web ページを作成したことがある場合は、サーバー側で行う必要があるのは、データに基づいて HTML をレンダリングし、ブラウザーに送信することだけであることを知っておく必要があります。ユーザーのクリックにより特定のステータス テキストを変更する必要がある場合は、ページ全体を更新することによっても変更できます。サーバーは、HTML のどの小さな部分が変更されたかを知る必要はなく、データに基づいてページ全体を更新するだけで済みます。つまり、UI の変更は全体の更新によって行われます。 React は、インターフェイスを更新するたびに、この開発モデルをフロントエンドに高パフォーマンスの方法で導入します。ページ全体が更新されたように思えます。パフォーマンスを確保するために部分的な更新を実行する方法については、React フレームワークが行う必要があります。

Facebook の React 紹介ビデオのチャット アプリケーションの例を借用すると、新しいメッセージが来たとき、開発プロセスはどのデータが来たのか、そして新しい DOM を追加する方法を知る必要があります。ノードを現在の DOM ツリーに変換し、React に基づく開発アイデアは次のようになります。2 つのデータ間で UI がどのように変化するかは完全にフレームワークに任せられます。 React を使用するとロジックの複雑さが大幅に軽減され、開発の難易度が下がり、バグが発生する機会が少なくなることがわかります。