Why Vue (by default) performs better than React

This article was first published on the WeChat public account: Big Move to the World, my WeChat: qq449245884, I will share with you the front-end industry trends, learning methods, etc. as soon as possible.
For more open source works, please see GitHub https://github.com/qq449245884/xiaozhi , including the complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

This article is not to debate whether Vue or React is better, but to see how the two frameworks are chosen at a low level.

I know some developers tend to look at benchmarks before choosing a framework. However, this is not the most critical aspect, because 99% of the performance comes from the code you write, not the framework you use.

So, how did I come to this conclusion?

Here we take three common web application problems and examine how responsive Vue and React are in each scenario.

project

Here's a TODO-like item, but instead of things, it adds fruit.

Here is the React code:

Vue code:

Test 1: Static Module

In the first test, we will compare how React and Vue compile the static part.

Let's take a look at React first:

As shown above, in JSX, the compiler is very simple. All JSX elements are replaced with React 的createElement functions. It will re-render all static elements on every state update of the application.

Let's see how it is done in Vue:

It may seem complicated, but here's a note on hoisted_1 variable and setup method. As we can see, the hoisted_1 variable contains our static content and is defined outside the setup function.

During compilation, Vue detects all static nodes that do not depend on the application state and hoists variables out of the component settings so that it doesn't have to regenerate these static nodes after every render.

summary

React only compiles JSX to JS, while Vue effectively optimizes static blocks through hoisting. This optimization is beneficial for huge pages with many nodes and deep tree structures.

Test 2: Re-render

Significant differences between React and Vue are revealed in this second test.

React app's console when we enter "TEST" in the text input:

We can see that the MyFruits component is rendered five times.

• Once on the first render of the parent component
• Each time a key is pressed in the input, there are four times (the number of tests).

Let's take a look at the situation with Vue:

The MyFruits component is only rendered once.

By default, any child component in Vue is cached. It will be re-rendered only if its props has changed.

React will re-render regardless of whether props has changed.

So the equivalent code in Vue is more performant than React 😎.

How does React solve this problem?

In React, developers can choose to enable memoization by using memo helper 4c2fdfc4a63c783769583c961b813a0c---. This can be done with the following code:

However, this requires additional code to achieve the same performance.

Test 3: Computed Properties

In Vue, a computed property is a value that will be recomputed based on other properties. For example, a hashed password will only be recomputed when the password is changed.

In React:

hash is called every time it is rendered.

In Vue, re-execution is only done when hashed is used. If the value is not required in the template, it will not be re-executed. Also, Vue implicitly detects dependencies and only evaluates them when password changes.

This is also possible in React, but also requires additional code:

We need to call useMemo and provide an array of dependencies. Also, React cannot detect if the hashed variable is used in the template and will calculate hash on the first render.

This is a very simple example, but consider complex operations. This will greatly affect the render time of the component, especially when computed properties are not used during the initial render.

So Vue > React?

No, after all the examples above, you might think that Vue is more performant than React. But this is wrong. In fact, the two libraries have different philosophies. Vue is implicit, React is explicit.

How to say?

Vue is the good guys and tends to automate as many things as possible so developers can focus on business logic. Vue provides better performance by default.

On the other hand, this also leads to some lack of flexibility if we want to develop more complex functionality. If you don't really grasp the life cycle of Vue components, you may spend a lot of time debugging some silly code.

In addition, React is lazy and requires developers to do it themselves, but this also gives us more flexibility. But it will also write more code, like the three examples above, to achieve the same performance as Vue.

To sum up, if you are a novice, you can start with vue, which is a better way to start. In contrast, React is suitable for developers who already have experience working with component-based frameworks.

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .

Author: Gui Milon Translator: Front-end Xiaozhi Source: mediun

https://medium.com/@gui.milon/why-vue-is-by-default-more-performant-than-react-34e1d9bbade6

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.