Disruptive front-end UI development framework: React

HTML-based front-end interface development is becoming more and more complex, and its essential problem can be attributed to the efficient reflection of dynamic data from the server side or user input into a complex user interface. The react framework from Facebook is exactly one solution for this issue, as described by the official website, starting with the following: a large-scale application for developing data that is changing (Building large, applications with data, changes Over time). Compared with the traditional front-end development, react has opened up a rather alternative way to realize the high-efficiency and high-performance development of the front-end interface.

First of all, for react, there are some misunderstanding, here first summed up:

• React is not a complete MVC framework, it can be considered as a V (view) in MVC, and even react does not quite recognize the MVC development model;
• React server-side render capability can only be regarded as a icing on the cake, not its core point of departure, in fact, react official site almost no mention and its application on the server side;
• Some people take react and web Component in the same way, but they are not completely competitive relationship, you can use react to develop a real web Component;
• React is not a new template language, JSX is just a representation, no JSX react can work.

1. Principle of react

In web development, we need to manipulate the DOM in real time by reacting the changed data to the UI. Complex or frequent DOM operations are often the cause of performance bottlenecks (how high-performance complex DOM operations are often an important metric for measuring a front-end developer's skills). React introduced the virtual DOM mechanism for this purpose: a set of Dom APIs was implemented with JavaScript on the browser side. All DOM constructs are made based on the react, and each time the data changes, react reconstructs the entire DOM tree, then compares the current entire DOM tree with the previous DOM tree to get the difference between the DOM structure, Then only the parts that need to be changed are actually updated in the browser DOM. And react can batch the refresh of the virtual DOM, the two data changes in an event loop are merged, for example, if you change the node contents from a to B successively, and then from B to A,react, the UI does not change, and if you control it manually, This logic is often extremely complex. Although it is necessary to construct a complete virtual DOM tree every time, because the virtual DOM is memory data, the performance is very high, and the actual DOM operation is only the diff part, so it can achieve the purpose of improving performance. In this way, while ensuring performance, developers will no longer need to focus on how changes to one or more specific DOM elements can be updated, but only to be concerned about how the entire interface is being render in any given state of the data.

If you write a Web page of server-side render as you did in the 90 's, you should know that what the server is doing is sending HTML to the browser based on the data. If one of the user's clicks needs to change a state text, it is done by refreshing the entire page. The server side does not need to know which piece of HTML has changed, but simply refreshes the entire page based on the data. In other words, any changes to the UI are done through a whole refresh. Instead, react brings this development model to the front end in a high-performance way, and you can think of refreshing the entire page with every update to the interface. As for how to perform a partial update to ensure performance, this is what the react framework will do.

Using Facebook's example of a chat app in React's video, when a new message comes in, traditional development ideas like, your development process needs to know which data came up, how to add the new DOM node to the current DOM tree, and based on the react of development ideas such as, You always have to care about the data as a whole, and how the UI changes between the two data are completely left to the framework.

　　　　

　　

As you can see, the use of react greatly reduces the complexity of logic, meaning that development is less difficult and there are fewer opportunities for bugs to be generated. As for react how to do the original O (n^3) complexity of the diff algorithm down to O (n), you can refer to this article.

　　

2. Modular Development Ideas

Virtual DOM not only brings simple UI development logic, but also introduces the idea of component development, the so-called component, which is a packaged, self-contained UI component. React recommends a component-based rethinking of the UI composition, defining each module that is functionally independent on the UI as a component, and then building the overall UI by composing or nesting the small components into large components. For example, Facebook's instagram.com entire site was developed using react, and the entire page was a large component that contained a large number of other components nested, and it was interesting to see the code behind it.

If the idea of MVC allows you to separate the view-data-controller, then the modular way of thinking is to bring the separation between the UI function modules. We look at the differences between MVC and component development ideas through a typical blog review interface.

For the MVC development model, the developer defines the three as different classes to achieve the separation of performance, data, and control. Developers are more technical in the context of the UI to split, to achieve loose coupling.

　　

For react, it's a completely new approach, with developers starting from a functional perspective, dividing the UI into different components, each packaged individually.

　　

In react, you organize and write your code according to the natural partitioning of the interface module, and for the comment interface, the entire UI is a large component of widgets, each of which cares only for its own part of the logic and is independent of each other. The render of the outermost interface requires only the following code:

　　

In this way, the UI and logic of each component are defined within the component, and externally through the API to interact completely, by combining the methods to achieve complex functionality. React that a component should have the following characteristics:

(1) composable (composeable): One 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 (own) The subcomponents it creates, and with this feature, a complex UI can be split into multiple simple UI components;

(2) Reusable (REUSABLE): Each component is a standalone feature that can be used in multiple UI scenarios;

(3) maintainable (maintainable): Each small component contains only its own logic, which is easier to understand and maintain;

(4) testable (testable): Because each component is independent, it is obviously much easier to test each component individually than for the entire UI.

　　

3. An example of a react Component development: Tab Selector

The above overview introduces the new front-end development approach brought by react and its impact, and does not describe how to use it. To give you a concrete impression, here's a practical development of a simple component: Tab selector. The product page of an online store usually requires such controls to select Product properties, such as the color of the clothes you choose. This control accepts a data source to display multiple tabs for clicking, and then selects a color when clicked, usually as shown in the interface.

In the traditional way, we can implement a jquery plugin with the following code:

Using the React method, the code is as follows:

By comparison, you can see that the jquery plug-in method, the developer first need to consider the first time the control render the DOM construction, and secondly, need to know how to toggle the UI on the selected state.

The react way, developers just need to consider the overall interface of the DOM building, no longer need to care about the local update, each time in a react component the SetState method, will trigger render to reconstruct the entire interface. From the perspective of development thinking, you can think that every time the data update will do a whole full refresh. Logic is simple and straightforward.

If we take one more step, the value of the control is not only set when initialized and clicked, but can also be set dynamically by the program. So for the jquery scenario, we need additional methods and portals to do the corresponding UI updates. And for the react way, there is no need to make any changes, external only need to call the SetState method to change its state. This is the benefit of simplifying the UI logic.

The complete code and demo have been uploaded on GitHub: Https://github.com/supnate/react-tab-selector, you can actually try it out.

4. Conclusion

As mentioned above, react is a new approach to the front-end UI framework that takes over the most complex part of UI development, is adept at ensuring high performance in complex scenarios, and introduces component-based development ideas to revisit the composition of the UI from another perspective. This approach not only improves development efficiency, but also makes code easier to understand, maintain, and test. Facebook in such a way will precipitate years of front-end development experience and technology accumulation completely open source, it is worth all front-end developers to learn from. And react in the release of a year of great concern, on GitHub has more than 10,000 star, I believe that its front-end development direction, and even Web component standards, will have a certain impact.

Disruptive front-end UI development framework: React