This wave of React is really targeted

Hi everyone, I'm Kasong.

Yesterday, when I was surfing the Internet happily, I saw a framework test, and the effect was a real explosion.

The authors used React and Solid.js developed the same Demo . Why use Solid.js and React compare, let us look at Solid.js of API :

• Hooks
• Context、Portal API
• Error Boundaries

It can't be said that React much the same as 06170c9b008003, I can only say that it is exactly the same. And Solid.js also uses JSX describe the view, so React application to be changed to a Solid.js application is very small.

What about the specific evaluation results? The difference is three times faster. This wave of React targeted.

This article refers to SolidJS vs React: I've Built the Same App On Both Libraries.

Why so much difference

Briefly introduce this Demo , the initial rendering blank list:

After the first mount completed, a request is initiated to render the list data:

This is the result of two applications of the Chrome Dev Tools Performance

Explain some of the key indicators:

• Loading: time to initiate a network request and parse HTML
• Scripting: time to parse, compile, and execute JS (including garbage collection time)
• Rendering: style and layout calculation
• Painting: paint , composite , decoded picture

Specifically focus on Scripting , left 475ms ( React ), right 176ms ( Solid.js )

The gap of more than 2 times, so exaggerated?

What's the problem

The workflow of the front-end framework can be summarized in three simple steps:

1. Trigger interaction
2. What will be affected by computing interaction DOM
3. Perform operation DOM

The interaction here may be the first screen rendering, it may be a state change caused by a click, it may be a request for data...

In React , step 2 is done at runtime, and in Solid.js is done at compile time.

Specifically, this step React be called in reconcile , more commonly called a virtual DOM of diff algorithm.

In Performance panel below Call Tree can be seen, the execution XHR Load (data list request) has a very time-consuming operations (before Function Call ), i.e., the operation reconcile .

In the Solid.js application, there is no such time-consuming operation:

At compile time, Solid.js will JSX compiled directly state link between the operation method of the DOM.

Since JSX too flexible, in order to have more clues at compile time to establish such a link, Solid.js in React original JSX provides components based on control flow components:

For example, the following is traversal list items in the two frameworks:

// React
<ul>
  {list.map(
    item => <li>{item.name}</li>
  )}
</ul>
<ul>
  
// Solid.js
<ul>
  <For each={list}>
    {(item) => <li>{item.name}</li>}
  </For>  
</ul>

For assembly replaces JS array map method.

When Solid.js completes these tasks at compile time, it actually only needs to complete steps 1 and 3 for each update at runtime, saving most of the time for step 2.

Although React has an optimization strategy for reconcile , as the application volume increases, or project members do not fully comply with best practices, it will inevitably cause more and more time spent on step 2.

Solid.js Establish the between the 16170c9b00898a state and the method of operating the DOM in advance. Although it needs to take up more memory to save this correspondence at runtime, it saves most of the time in step 2, which is a typical space change Time strategy.

Summarize

Solid.js said that, although it seems that 06170c9b008a46 has advantages in some aspects of the framework compared to React , it cannot shake the dominance of React

After all, the React do with whether it is fast or not. The ecological prosperity of the community is the most important thing.

Another interesting thing, here are the two Demo addresses in the article:

• Solid.js version
• React version

The domain name of Demo that gets the data in API rickandmortyapi.com , there are such websites...

Welcome to join the human high-quality front-end framework research group , lead the flight