Why did React appear? Introduction to the historical background of the emergence of react

This article mainly talks about the reason why react was born, why react appeared, the historical background information of react, etc. Let us read this article together now

The reason why React was born

React is a JS library developed by Facebook, so why did Facebook create React?
Facebook believes that MVC cannot meet their expansion needs. Due to their very large code base and large organization, MVC quickly becomes complex. Whenever a new function or feature needs to be added, the complexity of the system becomes The growth of the series made the code brittle and unpredictable, and as a result, their MVC was falling apart. I think MVC is not suitable for large-scale applications. When there are many models and corresponding views in the system, its complexity will quickly expand, making it very difficult to understand and debug, especially since there may be two-way data flow between models and views.

Solving this problem requires "organizing the code in some way to make it more predictable", which has been accomplished through Flux and React

Flux is a system architecture, Used to promote one-way data flow in applications. React, a JavaScript framework for building "predictable" and declarative "Web user interfaces," has enabled Facebook to develop Web applications faster.

Mainly discuss React issues:
What problems is React used to solve? The official website says this:

We build React to solve one problem:building large applications with data that changes over time.

Building large applications with data that changes over time, React mainly has the following characteristics:

1. Simply describe what the application should look like at any point in time, and React will automatically manage the UI interface update when the data changes
2. When the data changes, React actually only updates part of the change
React is about building reusable components. In fact, when using React, we do more than build components. Encapsulation makes code reuse, testing, and separation of concerns easier.

From the React official website, we learned about the four reasons for creating React documents through "Why did we build React?":
1. React is not an MVC framework, React is A library for constructing composable user interfaces. It encourages the creation of reusable UI components that change data over time.
2.React does not use templates
Traditionally, web application UIs are constructed using templates or html instructions. These templates specify a complete set of abstractions that allow you to build your UI
The difference is that React handles building user interfaces by breaking them into components. This means that React uses a real, full-featured programming language to render views.
3. Responsive update is very simple
In a traditional JS application, you need to consider data changes and then instruct the DOM to make changes to keep it up to date. Even AngularJS, provides a declarative interface via directives and data binding to request an associated function to manually update DOM nodes. (If you want to see more, go to the PHP Chinese website React Reference Manual column to learn)

React uses different methods. When the component is initialized for the first time, the render method is called to try to generate A lightweight performance. With this representation, a tag string is generated and then inserted into the document. When the data changes, the render method is called again. In order to complete the update as efficiently as possible, we compare the value returned by the render call with the new value, and then produce a minimal change to the applied DOM.

#The data returned by render is neither a string nor a DOM node. It is a lightweight type that describes what the DOM should look like.

4.HTML5 is just the beginning
Because React has its own lightweight document representation, we can do some cool things with it
1. Facebook dynamic form HTML can be replaced by rendering.
2. Instagram is a 'single page' web application built entirely with React and Backbone.Router. Designers can write React code using JSX as usual.
3. I built an internal prototype application running React on a web workstation, using React to drive native iOS views through an Objective-C bridge.
4. You can run React on the server, which facilitates SEO, performance, code sharing and project flexibility.
5. Events are consistent and standardized in all modern browsers (including IE8), and event delegation is automatically used.

The main principles of React

Virtual DOM and virtual DOM
In traditional web applications, operating DOM is usually directly updated, but we know that DOM updates are usually relatively expensive. In order to reduce operations on the DOM as much as possible, React provides a different and powerful way to update the DOM instead of directly operating the DOM. It is Virtual DOM, a lightweight virtual DOM, which is an object abstracted by React and describes what the DOM should look like and how it should be presented. Use this Virtual DOM to update a more real DOM, and this Virtual DOM manages real DOM updates.
Why can it be faster through this extra layer of Virtual DOM operations? This is because React has a diff algorithm. Updating the Virtual DOM does not guarantee that it will affect the real DOM immediately. React will wait until the event loop ends, and then use this diff algorithm to calculate the smallest value by comparing the current new dom representation with the previous one. Steps to update the real DOM.

React Diff

1. The virtual DOM ensures that only the actual DOM operations are performed on the parts of the interface that actually change.
Web pages are composed of DOM trees. When a certain part of it changes, it actually corresponds to a change of a certain DOM node. In React, the idea of ​​building a UI interface is to determine the interface based on the current state. The two states before and after correspond to the two interfaces, and then react compares the differences between the two interfaces.
Facebook engineers made two simple assumptions about the web interface, which reduced the complexity of the Diff algorithm directly to O(n)
1. Two identical components produce similar DOM structures, and different components produce similar DOM structures. Different DOM structures
2. For a group of child nodes at the same level, they can be distinguished by unique ids

Different types of nodes are output before and after the same position of the node, React directly deletes the previous ones node, and then create and insert a new node. Deleting a node will completely destroy the node. If there are child nodes under the deleted node, then these child nodes will also be completely deleted, and they will not be compared by the user later

When React encounters different components at the same location, it simply destroys the first component and adds the newly created component. Different components generally produce different DOM structures. Instead of wasting time comparing their structures, their structures are basically not equivalent. It is better to create a new component completely.

2. Compare nodes level by level
In React, the tree algorithm is very simple. Two trees will only compare nodes at the same level. Compare the previous tree and the modified tree at the same node level. React compares all child nodes under the same parent node. When it is found that the node no longer exists, the node and its child nodes will be deleted completely, and no further comparison will be performed. Therefore, as long as the tree is traversed once, the comparison of the DOM structure can be completed.

React will only consider the transformation of the position of nodes on the same layer. For nodes on different layers, there is only simple deletion and creation. When the root node finds that A in the child node is missing, it will destroy A directly; and when D finds that it has one more child node, it will create A as a child node.

In order to maintain a stable structure that will help improve performance, we can hide or show a node through CSS instead of actually removing or adding DOM nodes.

For nodes of the same type, the algorithm is relatively simple, and React will reset its properties to achieve node conversion.
For example:
renderA:

renderB:

The style attribute of virtual DOM is slightly different. Its value is not a simple string but must be an object.

3. Comparison of list nodes:
React will destroy and re-create nodes that are not on the same layer, even if they are exactly the same. List nodes are used when they are on the same layer. Diff algorithm,

#If the key value of this li is not set, it will cause performance problems when the list is updated. React cannot update this list very efficiently

Components Components

The nodes in the DOM tree are called elements, but here it is different. They are called commponents on the Virtual DOM. The node of Virtual DOM is a complete abstract component, which is composed of commponents.

The use of components is extremely important in React, because the existence of components makes calculating DOM diff more efficient.

This article ends here (if you want to see more, go to the PHP Chinese website React User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of Why did React appear? Introduction to the historical background of the emergence of react. For more information, please follow other related articles on the PHP Chinese website!