Preliminary Study of JavaScript React Library
Author/ZiYi Yang [Issue Date: 2015/6/5]
Preface
Today, developers often use convenient template language tools like asp.net when developing Web applications. Due to the great importance attached to the user experience, the design of user interfaces has become more complex. As a result, the disadvantages of these kinds of template languages are gradually becoming apparent. In this case, developers need a tool that can be used to build a large-scale user interface.
React is a JavaScript Library that is based on this point with View handling in the MVC architecture.
Summary
React is an open-source JavaScript Library created by Facebook. It is also known as ReactJS and React.js. It is primarily used to create user interfaces for single-page applications, this can help developers build large applications which regularly need to exchange data, such as Facebook, Instagram, Airbnb, etc. In recent years, many people have considered using React to deal with the View in the MVC architecture.
In order to achieve this requirement, React has two core concepts.
Simple
At any time point, the application should convey the same information, and React will automatically control the update of all user interfaces when backend data changes.
Declarative
The module's data updating should not be controlled from the outside, but rather defining the data sources and update mode from the interior of the module. When data will be changed, in concept, it will seem that React triggering a refresh button, updating the appropriate data.
Characteristic
Virtual DOM：Increasingexecution speed
Operating DOM directly reduces efficiency, so React records the architecture of page by Virtual DOM, then when the data is changed, it compares the Virtual DOM with the actual DOM, updating the diff, it accelerates the render speed.
Figure 1: Direct operation of DOM
Figure 2: Operating DOM by Virtual DOM
Component：Improving Reusability
A node in the DOM structure is called an element, and a node in the DOM Virtual mechanism is called a component. Using the components is very important for React, because the design of the concept is used for calculate the difference between the Virtual DOM and the Real DOM. Compared to the whole structure, the complexity of and actual running time for the Virtual DOM will be significantly reduced.
The core concepts of React are built as components that can be reused. You simply need to build various components using React. React has very good encapsulation making established component's program code highly reusability, easy to test, and make separation of functionality easier.
Simple Example
The following syntax is used to show the CommentBox components:
Figure 3: Example Code
After executing the above syntax, the following will appear:
Figure 4: Showing Screen
Conclusion
React is a library that especially handles the View. It does not deal with any settings or changes that are related to the Model. A React component is a View-Level concept, and the state of the component is only UI. Any type of data model or L can be combined with React for operation.
Component's abstract concept of React is good for update operation of the DOM and further implements the update mechanism for high-authority DOM directly in the design.
React component is inconvenient to update directly from the DOM. Compared with libraries which transfer view to model automatically, using React to compile event handling mechanisms is inconvenient.
A defect in React is its abstract vulnerability characteristics but it also provides a method to avoid such problems. In most cases, the program is only available on Virtual DOM operations, but in some cases, it still needs to be operated directly on the DOM. At this point, you need to refer to related methods which are in the manual.
Reference
1. React (JavaScript library)
2. todomvc
3. https://facebook.github.io/react/
4. http://blog.reverberate.org/2014/02/react-demystified.html