Shulou(Shulou.com)06/02 Report--

This article mainly introduces what is the difference between vue and react rendering, which can be used for reference by friends who need it. I hope you will learn a lot after reading this article. Next, let the editor take you to learn about it.

Differences: 1. React renders the template through JSX, while Vue renders through an extended HTML syntax. 2. During rendering, Vue tracks the dependencies of each component and does not need to re-render the entire component tree; when the state of the application of React is changed, all sub-components will be re-rendered.

The difference between vue and react rendering

1. Different rendering methods of templates.

On the surface, the syntax of the template is different, and React renders the template through JSX. Vue is rendered through an extended HTML syntax, but this is only superficial. After all, React does not have to rely on JSX.

At a deep level, the principles of templates are different, which is their essential difference: React is in the component JS code, through native JS to achieve common syntax in templates, such as interpolation, conditions, loops, etc., are achieved through JS syntax, more pure and more native. Vue is implemented through instructions in a separate template separate from the component JS code, such as conditional statements that require v-if to do this, which is a bit unique and messy with HTML.

For example, illustrate the benefits of React: the render function in react supports closure features, so our import components can be called directly in render. But in Vue, because the data used in the template must be hung on this for a transfer, we need to declare it again in components after we have finished import a component, which is obviously very strange but has to be done.

2. Rendering process is different

Vue can calculate Virtual DOM differences faster because it tracks the dependencies of each component during rendering without having to re-render the entire component tree.

When the state of the application of React is changed, all sub-components are re-rendered. This can be controlled through the lifecycle approach of shouldComponentUpdate, but Vue regards this as the default optimization.

If the interaction in the application is complex and you need to deal with a large number of UI changes, then using Virtual DOM is a good idea. If you update elements infrequently, then Virtual DOM is not necessarily applicable, and performance is probably not as good as direct manipulation of DOM.

Thank you for reading this article carefully. I hope it will be helpful for everyone to share the differences between vue and react rendering. At the same time, I also hope that you will support us, pay attention to the industry information channel, and find out if you encounter problems. Detailed solutions are waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.