React18, not far?

calzone 2021-06-18 11:05:51
react18 react far

stay React Not long ago PR #21488 in , Core members Brian Vaughn Yes React Some inside API、 And inside flag Make adjustments .

One of the most striking changes is :React Entrance increase createRoot API.

The industry interprets this change as :Concurrent Mode( Hereinafter referred to as CM) Will be stable in the near future , And in the official version .

React17 It's a transitional version , To stabilize CM. once CM Stable , that v18 It's going to speed up a lot .

It can be said from 18 Year to 21 year ,React The main work of the team is around CM In the , that :

  • CM What is it? ?
  • CM Can solve React What's the problem? ?
  • Why experience fast 4 year , stride across 16、17 Two versions ,CM Is not stable ?

This article will answer .

CM What is it?

To understand CM( Concurrent mode ) What is it? , The first thing you need to know is React The running process of the source code .

React It can be divided into two phases :

  • render Stage

stay render Stage accounting is the changing part of an update ( adopt diff Algorithm ), Because of the render The function is called in this phase .

render Stage Probably It's asynchronous ( Depending on the scenario that triggers the update ).

  • commit Stage

stay commit The stage will be render The part of phase computation that needs to change is rendered in the view . Corresponding ReactDOM I'll do it appendChildremoveChild etc. .

commit Phase must be synchronous call ( This way users won't see incomplete rendering UI

We go through ReactDOM.render The created app belongs to legacy Pattern .

In this mode, once render The stage corresponds to one commit Stage .

If we pass ReactDOM.createRoot( This is not available in the current stable version API) The created application belongs to the one mentioned at the beginning CMconcurrent Pattern )

stay CM Next , Update has the concept of priority ,render Phase may be interrupted by high priority updates .

therefore render The phase may repeat many times ( Be interrupted and start over ).

Maybe many times render The stage corresponds to one commit Stage .

Besides , There's another. blocking Patterns are used to facilitate developers to learn from legacy Mode transition to CM.

You can start your Feature comparison See the features supported by different patterns :

 Features supported by different patterns

Why CM?

got it CM What is it? , So what's the use of him ? Why? React The core team will take time 3 More years (18 Year begins ) To realize him ?

This has to be done from React We're talking about .

We can get it from the official website React philosophy notice React Design concept of :

We think , React Yes, it is JavaScript structure Respond quickly Large scale Web The preferred way for applications .

among Respond quickly It's the point .

So what impact Respond quickly Well ?React The answer given by the team :

CPU The bottleneck and IO Bottleneck

CPU Bottleneck

Consider the following demo, Let's play up 3000 List items of :

function App() {
const len = 3000;
return (
{Array(len).fill(0).map((_, i) => <li>{i}</li>)}
const rootEl = document.querySelector("#root");
ReactDOM.render(<App/>, rootEl); 

Just said , stay legacy In mode render The stage is not interrupted , Then this 3000 individual li Of render All have to be done in the same browser macro task .

Long time computation can block threads , Causes the page to drop the frame , This is it. CPU Bottleneck .

The solution is : Enable CM, take render The stage becomes interruptible Of ,

When the browser does not have much time left in a frame, the control is given to the browser . Wait for the spare time of the next frame to continue the component render.

IO Bottleneck

In addition to the long calculation caused by the stuck , When the network requests loading State also makes the page non interactive , This is it. IO Bottleneck .

IO The bottleneck is objective .

As front-end , All you can do is request the data you need as soon as possible .

however , Usually : Code maintainability And Request efficiency It's contrary .

What does that mean , for instance :

Suppose we encapsulate the method of requesting data useFetch, Distinguish whether to request data by the existence of return value .

function App() {
const data = useFetch();
return {data ? <User data={data}/> : null};

In order to improve the Code maintainability ,useFetch With the component to render User Exist in the same component App in .

However , If User You need to further request data in the component ( as follows profile data )?

function User({data}) {
const {id, name} = data?.id || {};
const profile = useFetch(id);
return (
{profile ? <Profile data={profile} /> : null}

In line with Code maintainability principle ,useFetch With the component to render Profile Exist in the same component User in .

however , So organize the code ,Profile Components can only wait User render Later render.

Data can only be like waterfall water , One layer at a time .

This inefficient way of requesting data is called waterfall.

In order to improve the Request efficiency , We can “ request Profile Operation of data required by component ” mention App In component , Merge in useFetch in :

function App() {
const data = useFetch();
return {data ? <User data={data}/> : null};

But that reduces Code maintainability Profile Component separation profile The data is too far away ).

React Team from Relay The team learns from experience , With the help of Suspense characteristic , Put forward Server Components.

Just to deal with IO When it comes to bottlenecks Code maintainability And Request efficiency .

The implementation of this feature requires CM in Updates have different priorities .

CM Why did it take so long ?

Next , We from Source code characteristic ecology Three aspects , From the bottom up CM How difficult it is to popularize .

Source level

Priority algorithm transformation

stay v16.13 Before ,React Basic... Has been achieved CM function .

We talked about ,CM There is the concept of update priority . Before it was through a millisecond expirationTime Mark to update The expiration time of .

  • By comparing different updated expirationTime Judge the priority
  • By comparing the updated expirationTime Determine whether the update is expired with the current time ( Expiration needs to be synchronized )

however ,expirationTime As a time-dependent floating-point number , Can't express A batch of priorities The concept .

In order to achieve a higher level of Server Components characteristic , Need to have A batch of priorities The concept .

therefore , Core members Andrew Clark Started a long-term priority algorithm transformation , see :PR lanes

Offscreen Support

At the same time , Another member Luna Ruan Developing a new API —— Offscreen.

Understandably, this is React Version of Keep-Alive characteristic .

Subscribe to external sources

Did not open CM front , In one update, the following three lifecycles are called only once :

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

But turn on CM after , because render The phase may be interrupted 、 repeat , So they can be called many times .

Subscribing to external sources ( For example, registering event callbacks ) when , May not be updated in time or memory leak .

for instance :bindEvent It's based on Publish subscribe The external dependence of ( Like a native DOM event ):

class App {
componentWillMount() {
bindEvent('eventA', data => {
componentWillUnmount() {
render() {
return <Card data={}/>;

stay componentWillMount In the binding , stay componentWillUnmount Untie in .

When an event is received , to update data.

When render The stages are repeatedly interrupted 、 After suspension , Possible :

Before the event is finally bound ( bindEvent Before execution ), The event source triggered the event

here App The component has not registered the event yet (bindEvent Not yet implemented ), that App Acquired data It's the old one .

To solve this potential problem , Core members Brian Vaughn Developed features :create-subscription

Used in React To standardize the subscription and update of external sources .

In short, it is to register and update external sources in commit Phase is bound to the component's state update mechanism .

At the characteristic level

When Source level After the support of , be based on CM The development of new features of is put on the agenda .

This is Suspense.

[[Umbrella] Releasing Suspense #13206]( Responsible for the record Suspense The development of properties .

Umbrella The mark represents this PR Will affect a lot of Libraries 、 Components 、 Tools

You can see , A long timeline from 18 It's been a few years until the last few days .

first Suspense It's just Front end features , at that time React SSR It can only be passed forward character string data ( It's also known as dehydration

later React A set of SSR Components of time streaming Transfer protocol , Sure streaming Transport components , Not just HTML character string .

here ,Suspense Given more responsibilities . It also has more complex priorities , This is what I just said Priority algorithm transformation A big reason for .

The final result , It was launched earlier this year Server Components Concept .

On the ecological level

When Source level Support 、 characteristic And the development is complete , Is it possible to connect seamlessly ?

Still early .

As a ship 8 The great ship of the year ,React Every time I upgrade to the final community popularization , There's a lot of work to do in the middle .

To help the community make a slow transition to CM,React We have done the following work :

  • Development ScrictMode characteristic , And it's enabled by default , Standardize the way developers write
  • take componentWillXXX Marked as unsafe, Remind users not to use , Will be scrapped in the future
  • A new life cycle (getDerivedStateFromPropsgetSnapshotBeforeUpdate) Replace, for example, the life cycle that will be abandoned
  • Developed legacy Patterns and CM Intermediate mode of transition —— blocking Pattern

And this , It's just in the interim The most simple Part of .

The hard part is :

A lot of the current accumulation in the community is based on legacy How to migrate the library of pattern ?

A lot of animation Libraries 、 State Management Library ( such as mobX) It's not a simple migration .


We introduced CM The context of his life and the difficulties of his migration .

Through this article , I'm sure you know that the first one is React increase createRoot( Turn on CM Methods ) It's not easy .

Fortunately, everything is worth it , In the past React The barrier to success is : Open source is early 、 The community is big .

So from CM Start ,React Probably It's going to be the most complex view framework in the front end .

When the , There won't be any React-like The framework can realize React alike feature.

But others say ,CM These functions are chicken ribs , I don't need to .

You feel CM What about? ? Welcome to leave your discussion .

本文为[calzone ]所创,转载请带上原文链接,感谢

  1. HTML + CSS + JavaScript to achieve cool Fireworks (cloud like particle text 3D opening)
  2. HTML + CSS + JavaScript realizes 520 advertising love tree (including music), which is necessary for programmers to express themselves
  3. Solve the problem of Web front-end deployment server (it can be deployed online without a server)
  4. HTML + CSS + JS make wedding countdown web page template (520 / Tanabata Valentine's Day / programmer advertisement)
  5. What else can driverless minibus do besides "Park connection"?
  6. Cloud native leads the era of all cloud development
  7. NRM mirror source management tool
  8. Bring it to you, flex Jiugong
  9. Lolstyle UI component development practice (II) -- button group component
  10. Deconstruction assignment in ES6
  11. Luo 2 peerless Tang clan was officially launched. The official gave a key point, and the broadcast time was implied
  12. 20初识前端HTML(1)
  13. 当新零售遇上 Serverless
  14. 20 initial knowledge of front-end HTML (1)
  15. When new retail meets serverless
  16. [golang] - go into go language lesson 5 type conversion
  17. [golang] - go into go language lesson 6 conditional expression
  18. HTML5(八)——SVG 之 path 详解
  19. HTML5 (8) -- detailed explanation of SVG path
  20. 需要开通VIP以后页面内容才能复制怎么办?控制台禁用javascript即可
  21. Web前端|CSS入门教程(超详细的CSS使用讲解,适合前端初学者)
  22. 实践积累 —— 用Vue3简单写一个单行横向滚动组件
  23. Serverless 全能选手,再下一城
  24. What if you need to open a VIP to copy the page content? Just disable JavaScript on the console
  25. Web front end | CSS introductory tutorial (super detailed CSS explanation, suitable for front-end beginners)
  26. Practice accumulation - write a single line horizontal scroll component simply with vue3
  27. Dili Reba is thin again. She looks elegant and high in a strapless hollow skirt, and her "palm waist" is beautiful to a new height
  28. Serverless all-round player, next city
  29. The difference between MySQL semi synchronous replication and lossless semi synchronous replication
  30. Vue表单设计器的终极解决方案
  31. The ultimate solution for Vue form designer
  32. Nginx从理论到实践超详细笔记
  33. Yu Shuxin's red backless swimsuit is split to the waist and tail, with a concave convex figure and excessive color matching, and his face is white to dazzling
  34. Nginx ultra detailed notes from theory to practice
  35. 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
  36. typecho全站启用https
  37. CCTV has another popular employee. The off-site interpretation is very professional, and the appearance ability is no less than that of Wang Bingbing
  38. [animation Xiaole | CSS] 086. Cool water wave loading transition animation
  39. Enable HTTPS in Typecho
  40. 50天用JavaScript完成50个web项目,我学到了什么?
  41. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  42. What have I learned from completing 50 web projects with JavaScript in 50 days?
  43. "My neighbor doesn't grow up" has hit the whole network. There are countless horse music circles, and actor Zhou Xiaochuan has successfully made a circle
  44. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  45. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  46. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  47. 30 + women still wear less T-shirts and jeans. If they wear them like stars, they will lose weight
  48. 数栈技术分享前端篇:TS,看你哪里逃~
  49. Several stack technology sharing front end: TS, see where you escape~
  50. 舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践
  51. Abandon the landing practice of Kong and nginx, Apache apisik on the baas platform of fun chain technology
  52. 浪迹天涯king教你用elementui做复杂的表格,去处理报表数据(合并表头,合并表体行和列)
  53. 前端HTML两万字图文大总结,快来看看你会多少!【️熬夜整理&建议收藏️】
  54. Wandering around the world king teaches you to use elementui to make complex tables and process report data (merge header, merge table body rows and columns)
  55. 路由刷新数据丢失 - vuex数据读取的问题
  56. Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]
  57. Route refresh data loss - vuex data reading problem
  58. Systemctl系统启动Nginx服务脚本
  59. Systemctl system startup nginx service script
  60. sleepless