preface

I was impressed by the excellent design patterns, flexible tool extensions, and rich data structures of cornerstone (a Web framework for medical imaging services) when I read and studied the source code for the business of the company. Now with the improvement of coding skills and experience, I found that behind the source is in this paper a design concept, from the top down, design abstract gradually fall to the ground, and to every line of code, at the same time I also have further understand, soft * * * * a structure to some extent is to service its design idea, its technology balance.

React design: React

The React concept

The website tells us: “We believe React is the preferred way to build large, responsive Web applications using JavaScript. It’s doing great on Facebook and Instagram.”

It’s characterized by “fast response,” “large Web applications,” so how does it handle fast response, first of all, what are the performance bottlenecks for fast response? There are two types of scenarios that affect this “quick response” :

  • When encountering a large number of tag renderings, such as 800 Li renderings, or hundreds of thousands of color graphics renderings on canvas, it will cause a lag

  • Network requests that need to wait for data to return before further rapid response

So how does React work?

The first challenge of fast response is solved — converting synchronous update rendering to interruptible asynchronous updates

We know that the refresh frequency of mainstream browsers is 60Hz, that is, the browser refreshes every 16.6ms. However, the lag occurs during this period. For example, the JS script execution time is too long, the page frames get stuck, or even the frames drop.

What to do? React uses this time to update components. The time allowed is 5ms.

The Scheduler controller will observe if there is any other work occupying the main rendering thread every 5ms. If there is no work, I will continue to update component rendering; if there is, I will pause first. In other words, the complex and long tasks will be divided into each frame of rendering, and js execution time is about 5ms. The HTML layout and CSS rendering are then performed.

Where is this mechanism? It’s in Scheduler’s slice of time (more on that later).

// Enable Concurrent Mode by using reactdom.unstable_createroot // reactdom.render (<App/>, rootEl); ReactDOM.unstable_createRoot(rootEl).render(<App/>);Copy the code

The second problem with fast response is solved — the front end is not solved

The front-end of network delay cannot be solved, so it can only minimize the user’s experience perception of network delay.

React’s answer to this question was found by the user experience team:

  • Interactions such as hovering and text entry need to be handled in a short amount of time

  • Clicks and page transitions can wait a little longer without feeling sluggish

  • Too many intermediate loading states when switching between screens can slow the switch down

So react tries to internally use different “priorities” in Concurrent mode, corresponding to the interaction categories in human perception studies. Suspense function and supporting hook – useDeferredValue are designed

conclusion

React has made a lot of efforts in rendering and network requests to achieve the goal of “building large and responsive Web applications”, and in architectural design, words and deeds are integrated, such as the design of Fiber architecture, optimization of diff algorithm, etc. In the next part, we will discuss the old and new architectures of React and the efforts made in this regard.

Cosmetic surgery with talent. I mean it.

Welcome to pay attention to the public number: plastic surgery by talent, a little dry, a little dry, a little goods