Hello, everyone. I am Karsong.

Yesterday, when I was surfing happily on the Internet, I saw a frame evaluation, and the effect was really explosive.

The author developed the same Demo with React and Solid-.js. How to compare Solid-.js with React? Let’s look at the solid-.js API:

  • Hooks

  • The Context, the Portal API

  • Error Boundaries

React isn’t exactly like React, it’s almost the same. Also, Solid. Js uses JSX to describe views, so a React application can be converted to Solid.

What was the specific evaluation result? The difference was nearly 3 times. This wave of React was indeed targeted.

SolidJS VS React: I’ve Built the Same App On Both Libraries.

Why so much difference

A brief introduction to the Demo, the initial render blank list:

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

This is the result of two applications to the Chrome Dev Tools Performance panel:

Explain a few of the key metrics:

  • Loading: Time to initiate network requests and parse HTML

  • Scripting: Time to parse, compile, and execute JS (including garbage collection time)

  • Rendering: Style and layout calculation

  • Painting: Paint, Composite, decode picture

Scripting: 475ms left (React), 176ms right (solid-.js)

More than twice the difference?

What’s the problem

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

  1. Trigger interactions

  2. Compute which DOM interactions affect

  3. Performing DOM operations

The interaction here could be a first-screen rendering, a state change caused by a click, or a request for data……

In React, step 2 is done at runtime, while in solid-.js it is done at compile time.

Specifically, this step is referred to in React as Reconcile, and more commonly as the diff algorithm for the virtual DOM.

As you can see in the Call Tree below the Performance panel, there is a very time-consuming operation (Function Call) before the XHR Load (request list data) is executed, which is known as Reconcile.

This time-consuming operation is not available in the Solid. Js application:

At compile time, solid-.js compiles JSX directly as a link between state and methods that manipulate the DOM.

Because JSX is so flexible, solid-.js provides some control flow components based on the original React JSX component in order to provide more clues to this connection at compile time:

As an example, here are the differences between the two frameworks for iterating through list items:

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

The For component replaces the array map method in JS.

When Solid. Js does this at compile time, it actually only completes steps 1 and 3 per update at run time, saving most of the time for Step 2.

While React has an optimization strategy for Reconcile, as application volume increases or project members do not fully comply with best practices, it is inevitable that more and more time will be spent on Step 2.

Solid-.js pre-establishes the connection between the state and the method of manipulating the DOM, which takes up more memory at runtime to preserve the correspondence, but saves most of the time of step 2, a typical space-to-time strategy.

conclusion

Having said that, while Solid. Js seems to have an advantage over React in some aspects of the framework, it doesn’t shake React’s dominance.

After all, React’s popularity has nothing to do with how fast it is. What matters most is that the community thrives.

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

  • Solid. Js version

  • The React version

The API used to fetch data in Demo is rickandmortyapi.com, and there is a website called……

Welcome to join the Human high quality front-end framework research group, Band fly