What is the difference between vue and react rendering?

Difference: 1. React renders templates through JSX; while Vue renders through an expanded HTML syntax. 2. Vue will track the dependencies of each component during the rendering process and does not need to re-render the entire component tree; while React will re-render all sub-components when the application status is changed.

Related recommendations: "React Video Tutorial", "vue.js Tutorial"

The difference between vue and react rendering

1. The difference in template rendering methods

On the surface, the syntax of templates is different. React renders templates through JSX. Vue renders through an extended HTML syntax, but in fact this is just a superficial phenomenon. After all, React does not have to rely on JSX.

At a deep level, the principles of templates are different. This is their essential difference: React implements common syntax in templates through native JS in the component JS code, such as interpolation, conditions, loops, etc. It is implemented through JS syntax, which is purer and more native. Vue is implemented through instructions in a separate template that is separated from the component JS code. For example, conditional statements require v-if to achieve this. This approach seems a bit unique and will mess up the HTML.

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

2. Different rendering processes

Vue can calculate the difference of Virtual DOM faster. This is because it tracks the dependencies of each component during the rendering process and does not need to re- Render the entire component tree.

React will re-render all sub-components when the application state is changed. It can be controlled through the shouldComponentUpdate life cycle method, but Vue regards this as a default optimization.

If the interactions in the application are complex and need to handle a large number of UI changes, then using Virtual DOM is a good idea. If updating elements is infrequent, then Virtual DOM may not be suitable, and the performance may not be as good as directly manipulating the DOM.

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of What is the difference between vue and react rendering?. For more information, please follow other related articles on the PHP Chinese website!