Talking about a series of problems caused by the implementation of native js drag-and-drop by React. js _ javascript skills

React originated from Facebook's internal project. Because the company was dissatisfied with all the JavaScriptMVC frameworks on the market, it decided to write a set of items for setting up Instagram websites. this article introduces React. javaScript achieves native js drag-and-drop effects. If you need to learn it together, React originated from Facebook's internal project because the company is not satisfied with all the JavaScript MVC frameworks on the market, I decided to write a set for setting up an Instagram website. After it was made, it was found that this set of things was very useful, and it was open-source in May 2013. Because React's design philosophy is extremely unique, it is a revolutionary innovation with outstanding performance, but the code logic is very simple. Therefore, more and more people are paying attention to and using it, and think it may be a mainstream tool for Web development in the future.

The drag and drop that I wrote a few days ago left my own questions... At the tip of enthusiastic bloggers, I corrected some small bugs and added the drag and drop Edge Detection part... Let's talk about drag and drop.

1. Do not directly operate on dom elements

The concept of virtual dom is used in react. The goal is to avoid directly operating dom elements as much as possible. Therefore, when operating dom elements, pay attention to it, I used var dragBox = document directly to get the form parameter. getElementById ('form') is used to find the dom, But it records the initial position of the from and can be called when its child component updates the parent component parameters. The following code is obtained from the MyFrom component:

OnChildChanged: function (newState) {/* The following is the modification */var computedStyle = document. defaultView. getComputedStyle (ReactDOM. findDOMNode (this. refs. dragBox), null); newState. left = computedStyle. left; newState. top = computedStyle. top;/* the above is the modification */this. setState (newState );},

In this way, you can operate on yourself directly in the parent component instead of calling it in the child component.

2. The onmousemove and onmouseup events should be bound to the document.

In the drag event, when you press the mouse in DragArea, you should check the distance and when the mouse moves in the document. Otherwise, if you bind it directly to the form, there will be an indecent point, that is, when you drag a bar near the edge, if the mouse speed is faster, it will become invalid, and the mouse will automatically drag the bar back. Therefore, the componentDidMount function in the react initialization phase is called only after the component is loaded. That is to say, when this method is called, the component has been rendered to the page, you can modify the DOM at this time. In other words, bind the corresponding event to the document at this time. The following code:

ComponentDidMount: function () {document. addEventListener ('mousemove ', (e) => {this. move (e) ;}, false);/* new feature of ES6, arrow function, must rely on jsx compilation tool to run correctly */document. addEventListener ('mouseup', (e) => {this. endDrag (e) ;}, false );},

This will eliminate the small bug!

3. added edge detection

In general, we do not want to drag out the visible window, so this requires detection. Detects the positions in the top, bottom, left, and right directions. Obviously, the distance between top and left must be greater than or equal to 0, and the distance between bottom and right must be smaller than the size of the view and the width and height of the from element.

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;/* Add drag range detection */var currentLeft = parseInt (this. state. left) + disX; var currentTop = parseInt (this. state. top) + disY; var docx1_document.doc umentElement. clientWidth | document. body. clientWidth; var docy1_document.doc umentElement. clientHeight | document. body. clientHeight; if (currentLeft <= 250) {// check the left side of the screen. Because my initial center here uses the margin of the box width of the negative 1/2, we use 250px to determine the boundary dBox. style. left = 250 + "px";} else if (currentLeft> = (docX-dBox.offsetWidth + 250) {// detect right dBox. style. left = (docX-this.state.offsetX) + "px";} else {dBox. style. left = currentLeft + "px";} if (currentTop <= 200) {// check the top of the screen, because the initial center here uses the margin of the box height of the negative 1/2, therefore, use 200px to determine the boundary.
DBox. style. top = 200 + "px ";
} Else if (currentTop >=( docY-dBox.offsetHeight + 200) {// detect bottom
DBox. style. top = (docY-this.state.offsetY) + "px ";
} Else {
DBox. style. top = currentTop + "px ";
}
}

PS: the new Code has been updated on my github. You can study it.

ReactJS background and principles

In Web development, we always need to reflect the changed data to the UI in real time. In this case, we need to perform DOM operations. Complex or frequent DOM operations are usually the cause of performance bottlenecks (how to perform high-performance complex DOM operations is usually an important indicator to measure the skills of a front-end Developer ). For this reason, React introduces the Virtual DOM mechanism: a dom api is implemented using Javascript on the browser side. During React-based development, all DOM structures are performed through virtual DOM. When data changes, React will re-build the entire DOM tree, then React compares the current DOM tree with the previous DOM tree to get the difference between the DOM structure, and then updates the actual browser DOM only. In addition, React can refresh virtual DOM in batches, and the two data changes in an Event Loop will be merged, for example, if you change the content of A node from A to B and then from B to A consecutively, React considers that the UI does not change. If you manually control the content, this logic is usually extremely complex. Although a complete virtual DOM tree needs to be constructed every time, because the virtual DOM is the memory data, the performance is extremely high, and the actual DOM operation is only the Diff part, therefore, the performance can be improved. In this way, while ensuring the performance, developers no longer need to pay attention to how a data change is updated to one or more specific DOM elements, but only need to care about any data status, how to Render the entire interface.

If you have written a pure Web page of the server-side Render as you did in 1990s, you should know that what the server-side has to do is to Render the HTML based on the data and send it to the browser. If a user needs to change the state text for a click, the whole page is refreshed. The server does not need to know which small HTML segment has changed, but only needs to refresh the entire page based on the data. In other words, all changes to the UI are done through overall refresh. React brings this development mode to the front-end in a high-performance manner. Every time you update a page, you can think that the whole page is refreshed. As for how to perform local updates to ensure performance, it is the React framework to complete.

I used Facebook to introduce the chat application example in the React video. When a new message comes in, the traditional development idea is as follows: what data does your development process need to know, how to add a new DOM node to the current DOM tree, And the React-based development idea, for example, you always need to care about the overall data and how the UI changes between the two data, then it is completely done by the framework. As you can see, using React greatly reduces the logic complexity, which means less development difficulty and less chance of generating bugs.