What is the difference between vue and react rendering?

Differences: 1. React renders templates through JSX; Vue renders through an extended HTML syntax. 2. During the rendering process, Vue will track the dependencies of each component without re-rendering the entire component tree; while in React, when the state of the application is changed, all sub-components will be re-rendered.



Related recommendations: "React video tutorial", "vue.js tutorial"

The difference between vue and react rendering

1, the template rendering method is different

On the surface, the syntax of the template is different, and React uses JSX to render the template. Vue is rendered through an extended HTML syntax, but this is just a superficial phenomenon, after all, React does not have to rely on JSX.

At a deeper level, the principles of templates are different, and this is their essential difference: React implements common syntax in templates through native JS in component JS code, such as interpolation, conditions, loops, etc., which are all implemented through JS syntax , More pure and original. Vue is implemented through instructions in a separate template separated from the component JS code. For example, conditional statements need v-if to achieve this. This approach is somewhat unique and will mess up HTML.

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

2.

Vue can calculate the difference of Virtual DOM faster in different rendering processes . This is because it will track 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 child components when the state of the application is changed. It can be controlled through the lifecycle method shouldComponentUpdate, but Vue regards this as the default optimization.

If the interactions in the application are complex and need to deal with a lot of UI changes, then using Virtual DOM is a good idea. If the elements are not updated frequently, then Virtual DOM is not necessarily suitable, and the performance is probably not as good as directly manipulating the DOM.

Related recommendation:

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

vue tutorial recommendation: 2020 latest 5 vue.js video tutorial selection