How are react and vue rendered? Introduction to the rendering process of react and vue

This article mainly introduces the rendering process of react and vue, with a detailed process diagram. Next, let us look at this article together

Comparison of rendering processes between react and vue

react is a framework created by Facebook. It promotes virtual dom and new js syntax----jsx. It was open sourced in May 2013. React is A JAVASCRIPT library for building user interfaces. React is mainly used to build UI. Many people think that React is the V (view) in MVC

Features of React

1. Declarative design −React uses declarations Paradigms, which can easily describe applications.

2. Efficient −React minimizes interaction with DOM by simulating DOM (virtual dom).

3. Flexible −React works well with known libraries or frameworks.

4. JSX − JSX is an extension of JavaScript syntax.

5. Components − Building components through React makes the code easier to reuse and can be well applied in the development of large projects

6. One-way responsive data flow − React implements one-way responsive data flow, thereby reducing duplicate code, which is why it is simpler than traditional data binding.

Vue author You Yuxi is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern tool chain and various supporting libraries, Vue is fully capable of providing drivers for complex single-page applications.

Features of vue

MVVM framework, two-way data binding principle, data-driven, componentized, lightweight, concise, efficient, module Friendly

Virtual DoM

What is the concept of virtual dom?

One of the biggest similarities between Vue.js (2.x) and React is that they both use There is something called 'Virtual DOM'. The so-called Virtual DOM basically means what its name means: virtual DOM.

Virtual representation of the DOM tree. It was born based on the concept that changing the actual DOM state is much more expensive than changing a JavaScript object.

Virtual DOM is a JavaScript object that maps the real DOM. If you need to change the state of any element, you must first make changes to the Virtual DOM instead of directly changing the real DOM. When a change occurs, a new Virtual DOM object is created and the difference between the old and new Virtual DOM is calculated. These differences will then be applied to the real DOM.

react’s rendering process

babel conversion tool address: http://babeljs.io/repl/

1. We use jsx in react To write a component, it will be converted into pure js by babel. Then Preact's h function will convert this js into a DOM tree. Finally, Preact's Virtual DOM algorithm will convert the virtual DOM into a real DOM tree to build our application. . (If you want to see more, go to the PHP Chinese website React Reference Manual column to learn)

2. The real Virtual DOM will be more complicated than the above example, but it is essentially an embedded A native object nested within an array. When a new item is added to this JavaScript object, a function calculates the difference between the old and new Virtual DOM and reflects it on the real DOM. Algorithms for calculating differences are the secret to high-performance frameworks.

Parsing process overview diagram

React relies on Virtual DOM, while Vue.js uses is a DOM template. The Virtual DOM used by React will perform dirty checks on the rendered results.

vue's rendering process

Vue claims to be able to calculate the difference in Virtual DOM faster because it tracks each step during the rendering process. A component's dependencies do not require re-rendering the entire component tree.

Process Example Diagram

After the Vue compiler compiles templates, it will compile these templates into a rendering function. When the function is called, it will render and return a virtual DOM tree. This tree is very lightweight, and its responsibility is to describe the state of the current interface.

After we have this virtual tree, we hand it over to a patch function, which is responsible for actually applying these virtual DOM to the real DOM. In this process, Vue has its own responsive system to detect the data sources it relies on during the rendering process.

During the rendering process, after the data source is detected, changes in the data source can be accurately sensed. At that time, you can re-render as needed.

After re-rendering, a new tree will be generated. By comparing the new tree with the old tree, you can finally get the changes that should be applied to the real DOM. Finally, the changes are applied through the patch function.

The main points can be summarized as

• #When a data attribute is used, the getter is triggered, and this attribute will be used as a dependency by the watcher record it.

• When the entire function is rendered, every data attribute used will be recorded.

• When the corresponding data changes, for example, giving it a new value, the setter will be triggered to notify the data object that the corresponding data has changed.

• At this time, the corresponding component will be notified that its data dependencies have changed and need to be re-rendered.

• The corresponding component mobilizes the rendering function again to generate Virtual DOM and implement DOM update.

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 them below Leave a message with a question.

The above is the detailed content of How are react and vue rendered? Introduction to the rendering process of react and vue. For more information, please follow other related articles on the PHP Chinese website!