HTML-based front-end interface development is becoming more and more complex, and its essential problem can basically be attributed to how to efficiently reflect dynamic data from the server or user input to the complex user interface. The React framework from Facebook is a solution to this problem. According to the official website, its starting point is: Building large applications with data that changes over time. Compared with traditional front-end development, React has opened up a rather alternative way to achieve high-efficiency and high-performance development of front-end interfaces.
First of all, for React, there are some misunderstandings, here is a summary:
- React is not a complete MVC framework, it can be considered as V (View) in MVC at most, and even React does not recognize the MVC development mode very much;
- The server-side rendering capability of React can only be regarded as a icing on the cake, not its core starting point. In fact, the official website of React hardly mentions its application on the server side;
- Some people compare React and Web Component, but the two are not completely competitive. You can use React to develop a real Web Component;
- React is not a new templating language, JSX is just a facade, React will work without JSX.
1. The principle of React
In web development, we always need to reflect the changed data to the UI in real time, and then we need to operate the DOM. And 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). React introduced the virtual DOM (Virtual DOM) mechanism for this: a set of DOM APIs are implemented in Javascript on the browser side. When developing based on React, all DOM constructions are performed through virtual DOM. Whenever the data changes, React will rebuild the entire DOM tree, and then React will compare the current entire DOM tree with the previous DOM tree to get the DOM structure. The difference, then only the parts that need to change do the actual browser DOM update. Moreover, React can batch the refresh of the virtual DOM, and the two data changes in an event loop (Event Loop) will be merged. For example, if you continuously change the node content from A to B, and then from B to A, React will think that nothing has changed in the UI, and this logic is usually extremely complex if controlled manually. Although a complete virtual DOM tree needs to be constructed every time, because the virtual DOM is memory data, the performance is extremely high, and only the Diff part is operated on the actual DOM, so the purpose of improving performance can be achieved. In this way, while ensuring performance, developers no longer need to pay attention to how a change in a certain data is updated to one or more specific DOM elements, but only need to care about how the entire interface is rendered in any data state.
Related Sponsors
ArchSummit Shenzhen 2017, July 7-8, InterContinental Hotel Shenzhen Overseas Chinese Town, first look at the exciting content
If you wrote pure web pages with server-side rendering like in the 90s, you should know that all the server-side has to do is to render HTML according to the data and send it to the browser. If a certain state text needs to be changed due to a user's click at this time, it is also done by refreshing the entire page. The server side doesn't need to know which piece of HTML has changed, it just needs to refresh the entire page based on the data. In other words, any UI changes are done with an overall refresh. React brings this development mode to the front end in a high-performance way. Every time you make a little interface update, you can think that the entire page is refreshed. As for how to perform local updates to ensure performance, it is what the React framework has to do.
Using the example of the chat application in Facebook’s introduction to React , when a new message comes, the traditional development idea is as shown in the figure above. Your development process needs to know which data has come and how to add a new DOM node to the current DOM. On the tree; and the development idea based on React is as shown in the figure below, you always only need to care about the data as a whole, and how the UI changes between the two data is completely handed over to the framework.
It can be seen that the use of React greatly reduces the logic complexity, which means that the development difficulty is reduced, and there are fewer opportunities for bugs. As for how React can reduce the original O(n^3) complexity of the Diff algorithm to O(n), you can refer to this article .
2. Componentized development ideas
Virtual DOM not only brings simple UI development logic, but also brings the idea of component development. The so-called components are encapsulated UI components with independent functions. React recommends rethinking the UI composition in the way of components, defining each relatively independent module on the UI as a component, and then combining or nesting small components to form large components, and finally completing the construction of the overall UI. For example, Facebook's instagram.com uses React to develop the entire site. The entire page is a large component, which contains a large number of other components nested. If you are interested, you can take a look at the code behind it.
If the idea of MVC allows you to achieve the separation of view-data-controller, then the way of thinking of componentization brings the separation between UI functional modules. Let's look at the difference between MVC and componentized development ideas through a typical Blog comment interface.
For the MVC development model, the developer defines the three into different classes to achieve the separation of presentation, data and control. Developers split the UI more from a technical point of view to achieve loose coupling.
For React, it is a completely new idea. From a functional point of view, developers divide the UI into different components, each of which is packaged independently.
In React, you organize and write your code according to the natural division of interface modules. For the comment interface, the entire UI is a large component composed of small components. Each component only cares about its own logic and is independent of each other. . In this way, the Render of the outermost interface only needs the following code:
In this way, the UI and logic of each component are defined inside the component, and interact with the outside completely through API, and realize complex functions through combination. React believes that a component should have the following characteristics:
(1) Composeable: A component is easy to use with other components, or nested inside another component. If another component is created inside a component, then the parent component owns the child components it creates. Through this feature, a complex UI can be split into multiple simple UI components;
(2) Reusable: Each component has independent functions, and it can be used in multiple UI scenarios;
(3) Maintainable: Each small component only contains its own logic, which is easier to understand and maintain;
(4) Testable: Because each component is independent, it is obviously much easier to test each component separately than to test the entire UI.
3. An example of React component development: Tab selector
The above generally introduces the new front-end development method brought by React and its impact, but does not introduce how to use it. In order to give everyone a specific impression of it, here is a simple component actually developed: the Tab selector. Product pages for online stores often require such controls to select product attributes, such as choosing the color of clothes. This control accepts a data source to display multiple Tabs for clicking. After clicking, a certain color is selected. The interface is usually shown in the following figure.
Traditionally, we can implement a jQuery plugin with the following code:
In React, the code is as follows:
It can be seen from the comparison that in the jQuery plug-in method, developers first need to consider the DOM construction when the control is rendered for the first time; secondly, they need to know how to switch the selected state on the UI.
In the React method, developers only need to consider the DOM construction of the overall interface, and no longer need to care about local updates. Every time the setState method is called on a React Component, the render will be triggered to rebuild the entire interface. From the perspective of development thinking, you can think that each data update will do a complete refresh of the whole. The logic is simple and straightforward.
If we think about it a bit further, the value of the control can not only be set at initialization and click, but also dynamically set by the program. Then for the jQuery solution, we need additional methods and entries to do the corresponding UI updates. For the React method, you don't need to make any changes. You only need to call the setState method to change its state. This is the benefit of simplifying UI logic.
The complete code and demo have been uploaded on Github: https://github.com/supnate/react-tab-selector , you can try it out.
4 Conclusion
As mentioned above, React is a new front-end UI framework. It completely takes over the most complex partial update part in UI development, and is good at ensuring high performance in complex scenarios; at the same time, it introduces component-based development ideas, from Another angle to re-examine the composition of the UI. This approach not only improves development efficiency, but also makes the code easier to understand, maintain and test. In this way, Facebook has completely open-sourced the accumulation of years of front-end development experience and technology, which is worthy of reference and learning by all front-end developers. And React has received a lot of attention within a year of its release. There are more than 10,000 Stars on Github. I believe it will have a certain impact on the direction of front-end development and even the standards of Web Component.