The Origin and Development of React
React originated from an internal project on Facebook, as the company was not satisfied with all the JavaScript MVC frameworks on the market and decided to write its own set for setting up an Instagram website. After making it, I found this set of things to be very useful and opened it up in May 2013.
The Relationship between React and Traditional MVC
Lightweight view layer library! A JavaScript library for building user interfaces
React is not a complete MVC framework, at most it can be considered as V (View) in MVC, and even React does not fully recognize the MVC development model; React is a library for building page UI. It can be simply understood that React divides the interface into independent small pieces, each of which is a component. These components can be combined and nested to form our page.
The principle of React high-performance
In web development, we always need to reflect the changing data in real time to the UI, which requires manipulating the DOM. Complex or frequent DOM operations are often the cause of performance bottlenecks (how to perform high-performance complex DOM operations is often an important indicator of a front-end developer’s skills).
React introduced the mechanism of Virtual DOM (Virtual DOM) for this: a set of DOM APIs was implemented in JavaScript on the browser side. When developing based on React, all DOM constructions are carried out through virtual DOM. Whenever data changes, React will rebuild the entire DOM tree, and then compare the current and previous DOM trees to obtain the differences in DOM structures. Only the parts that need to be modified will be updated in the actual browser DOM. Moreover, React can batch process the refresh of virtual DOM, and two data changes within an Event Loop will be merged. For example, if you continuously change the node content from A-B, B-A, React will consider A to B, and then from B to A without any changes in the UI. However, if manually controlled, this logic is usually extremely complex.
Although it is necessary to construct a complete virtual DOM tree every time, because virtual DOM is memory data, its performance is extremely high, and only Diff points are used to operate on actual DOM, thus achieving the goal of improving performance. In this way, while ensuring performance, developers will no longer need to focus on how changes in a certain data are updated to one or more specific DOM elements, but only need to care about how the entire interface is rendered in any data state.
React Fiber
React Fiber, a core algorithm released after React 16, is a re implementation of the core algorithm (according to the official website). Previously, the diff algorithm was used.
In the previous React, the update process was synchronous, which could lead to performance issues.
When React decides to load or update the component tree, it will do many things, such as calling the lifecycle functions of each component, calculating and comparing Virtual DOM, and finally updating the DOM tree. This entire process is synchronous, which means that as long as a loading or updating process starts, there will be no interruption in the middle. Due to the single threaded nature of JavaScript, if the component tree is large and each synchronization task takes too long, it can cause lag.
The method of React Fiber is actually very simple – sharding. Divide a time-consuming task into many small pieces, each with a short running time. Although the total time is still very long, after each small piece is executed, give other tasks a chance to execute, so that the only thread is not monopolized, and other tasks still have a chance to run.
The characteristics and advantages of React
- Virtual DOM,Our previous way of operating the DOM was through the method of document. getElementById(). This process actually involves first reading the DOM structure of the HTML, converting the structure into variables, and then performing the operationReactjs defines a set of variable form DOM models, where all operations and conversions are directly in the variables, reducing the need for real DOM operations and achieving high performance. It is fundamentally different from mainstream MVC frameworks and does not deal with DOM.
- component system,The core idea of React is to treat any area or element on a page as a component, which refers to a collection of HTML, CSS, JavaScript, and image elements. The core of developing with React is to split the page into several components, and React couples CSS, JavaScript, and image in one component. This pattern completely subverts the traditional way of development in the past.
- Unidirectional data flow,In fact, the core content of Reactjs is data binding. Data binding refers to simply binding some server-side data with front-end pages, and developers only focus on implementing the business.
- JSX syntax,In Vue, we use the render function to build the DOM structure of the component, which has higher performance because it eliminates the process of searching and compiling templates. However, when using the createElement to create the structure in the render, the code readability is lower and more complex. In this case, we can use the JSX syntax to create the DOM in the render to solve this problem, but the prerequisite is to use tools to compile JSX.
