React.js의 기본 js 드래그 앤 드롭 effect_javascript 기술 구현으로 인해 발생하는 일련의 문제에 대해 다시 이야기하겠습니다.

React는 Facebook의 내부 프로젝트로 시작되었습니다. 회사는 시장에 있는 모든 JavaScript MVC 프레임워크에 만족하지 않았기 때문에 Instagram 웹 사이트를 구축하기 위해 자체적으로 작성하기로 결정했습니다. 만들고 나서 이 세트가 매우 유용하다는 것을 알게 되었고, 2013년 5월에 오픈 소스로 공개되었습니다. React의 디자인 아이디어는 매우 독특하고 혁명적인 혁신이며 뛰어난 성능을 가지고 있으며 코드 로직이 매우 간단하기 때문입니다. 따라서 앞으로 웹 개발의 주류 도구가 될 수 있다고 생각하며 주목하고 사용하는 사람들이 늘어나고 있습니다.

제가 며칠 전에 쓴 드래그는 제가 남긴 질문입니다. . . 이번에는 열정적인 블로거들의 요청에 따라 몇 가지 사소한 버그가 수정되었으며 드래그의 가장자리 감지 부분도 추가되었습니다. . . 드래그에 대해 다시 이야기해보자

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에서 마우스를 눌렀을 때 문서 내에서 마우스가 이동한 거리와 튀어오르는 시점을 감지해야 합니다. 그렇지 않고 폼에 직접 바인딩되면 우아하지 않은 점이 있습니다. 즉, 드래그 바를 가장자리 근처로 드래그할 때 마우스 속도가 더 빠르면 마우스가 다시 돌아올 때 드래그가 실패합니다. 바는 자동으로 마우스를 유인합니다. 따라서 React 초기화 단계에서 이 함수는 컴포넌트가 로드된 후에 호출됩니다. 즉, 이 메소드가 호출되면 컴포넌트가 페이지에 렌더링되고 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> }

PS: 새로운 코드가 내 github에 업데이트되었습니다. 공부하실 수 있습니다.

ReactJS의 배경과 원리

웹 개발에서는 항상 변화하는 데이터를 실시간으로 UI에 반영해야 하고, 그 다음에는 DOM을 운영해야 합니다. 복잡하거나 빈번한 DOM 작업은 일반적으로 성능 병목 현상의 원인입니다. 고성능의 복잡한 DOM 작업을 수행하는 방법은 일반적으로 프런트 엔드 개발자의 기술을 나타내는 중요한 지표입니다. React는 이러한 목적을 위해 가상 DOM(Virtual DOM) 메커니즘을 도입합니다. DOM API 세트는 Javascript를 사용하여 브라우저 측에서 구현됩니다. React를 기반으로 개발할 때 모든 DOM 구성은 데이터가 변경될 때마다 전체 DOM 트리를 재구성한 다음 React는 현재 전체 DOM 트리와 이전 DOM 트리를 비교하여 DOM 구조를 얻습니다. 그러면 변경이 필요한 부분만 실제 브라우저 DOM에서 업데이트됩니다. 또한 React는 가상 DOM을 일괄 새로 고칠 수 있습니다. 이벤트 루프(이벤트 루프)의 두 가지 데이터 변경 사항이 병합됩니다. 예를 들어 노드 내용을 A에서 B로, 그리고 B에서 A로 계속 변경하면 React는 생각합니다. UI는 변경되지 않았으며, 수동으로 제어하는 ​​경우 이 로직은 일반적으로 매우 복잡합니다. 매번 완전한 가상 DOM 트리를 구축해야 하지만, 가상 DOM이 메모리 데이터이기 때문에 성능이 매우 높고, 실제 DOM에서 Diff 부분만 동작시켜 성능을 향상시킨다. 이러한 방식으로 성능을 보장하면서 개발자는 특정 데이터 변경 사항이 하나 이상의 특정 DOM 요소로 업데이트되는 방식에 더 이상 주의를 기울일 필요가 없으며 전체 인터페이스가 모든 데이터 상태에서 렌더링되는 방식에만 주의하면 됩니다.

1990년대처럼 서버 측 렌더링으로 순수 웹 페이지를 작성했다면 서버 측에서 해야 할 일은 데이터를 기반으로 HTML을 렌더링하여 브라우저에 보내는 것뿐이라는 것을 알아야 합니다. 사용자 클릭으로 인해 특정 상태 텍스트를 변경해야 하는 경우 전체 페이지를 새로 고쳐도 됩니다. 서버는 HTML의 어떤 작은 부분이 변경되었는지 알 필요가 없으며 데이터를 기반으로 전체 페이지를 새로 고치기만 하면 됩니다. 즉, 모든 UI 변경은 전체 새로고침을 통해 수행됩니다. React는 이 개발 모델을 고성능 방식으로 프런트 엔드에 가져옵니다. 인터페이스를 업데이트할 때마다 전체 페이지가 새로 고쳐졌다고 생각할 수 있습니다. 성능을 보장하기 위해 부분 업데이트를 수행하는 방법은 React 프레임워크가 수행해야 하는 작업입니다.

React를 소개하는 Facebook의 동영상에서 채팅 애플리케이션의 예를 빌리면, 전통적인 개발 아이디어는 위와 같습니다. 어떤 데이터가 왔는지, 어떻게 새로운 DOM을 추가하는지 알아야 합니다. node.node를 현재 DOM 트리에 추가하고 React 기반의 개발 아이디어는 아래와 같습니다. 두 데이터 간의 UI 변경은 전적으로 프레임워크에 맡겨집니다. React를 사용하면 로직 복잡도가 크게 줄어들어 개발 난이도가 낮아지고 버그가 발생할 확률이 줄어든다는 것을 알 수 있습니다.