React18正式版源碼級(jí)剖析

本文適合對(duì)React18.0.0源碼感興趣的小伙伴閱讀。

歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～

一、前言

本文是廣東靚仔的好友bubucuo-高老師寫的，高老師最近在準(zhǔn)備React18的視頻，有興趣的小伙伴可以去學(xué)習(xí)學(xué)習(xí)。

React18最重要的改變必須是Concurrent，就像哪吒降生一樣，打磨了很長時(shí)間了，終于正式見人了。

Concurrent Or Concurrency，中文我們通常翻譯為并發(fā)，也有少部分翻譯成并行。React已經(jīng)著手開發(fā)Concurrent幾年了，但是一直只存在于實(shí)驗(yàn)版本。到了React18，Concurrent終于正式投入使用了。

Concurrent并不是API之類的特性，而是一種能讓你的React項(xiàng)目同時(shí)具有多個(gè)版本UI的幕后機(jī)制，相當(dāng)愛迪生背后的特斯拉。

Concurrent很重要，雖然它不是API之類的新特性，但是如果你想解鎖React18的大部分新特性，諸如transition、Suspense等，背后就要依賴Concurrent這位大佬。

是的，如果你不想追求high level，就別學(xué)了。

二、Concurrent

什么是Concurrent

Concurrent最主要的特點(diǎn)就是渲染是可中斷的。沒錯(cuò)，以前是不可中斷的，也就是說，以前React中的update是同步渲染，在這種情況下，一旦update開啟，在任務(wù)完成前，都不可中斷。

注意：這里說的同步，和setState所謂的同步異步不是一碼事，而且setState所謂的異步本質(zhì)上是個(gè)批量處理。

Concurrent模式特點(diǎn)

在Concurrent模式下，update開始了也可以中斷，晚點(diǎn)再繼續(xù)嘛，當(dāng)然中間也可能被遺棄掉。

關(guān)于可中斷

先說可中斷這件事情的重要性。對(duì)于React來說，任務(wù)可能很多，如果不區(qū)分優(yōu)先級(jí)，那就是先來后到的順序。雖然聽起來很合理，但是現(xiàn)實(shí)是普通車輛就應(yīng)該給救護(hù)車讓路，因?yàn)槭掠休p重緩急嘛。那么在React中呢，如果高優(yōu)先級(jí)任務(wù)來了，但是低優(yōu)先級(jí)任務(wù)還沒有處理完畢，就會(huì)造成高優(yōu)先級(jí)任務(wù)等待的局面。比如說，某個(gè)低優(yōu)先級(jí)任務(wù)還在緩慢中，input框忽然被用戶觸發(fā)，但是由于主線程被占著，沒有人搭理用戶，結(jié)果是用戶哐哐輸入，但是input沒有任何反應(yīng)。用戶一怒之下就走了，那你那個(gè)低優(yōu)先級(jí)的任務(wù)還更新個(gè)什么呢，用戶都沒了。

由此可見，對(duì)于復(fù)雜項(xiàng)目來說，任務(wù)可中斷這件事情很重要。那么問題來了，React是如何做到的呢，其實(shí)基礎(chǔ)還是fiber，fiber本身鏈表結(jié)構(gòu)，就是指針嘛，想指向別的地方加個(gè)屬性值就行了。

關(guān)于被遺棄

關(guān)于狀態(tài)復(fù)用

Concurrent模式下，還支持狀態(tài)的復(fù)用。某些情況下，比如用戶走了，又回來，那么上一次的頁面狀態(tài)應(yīng)當(dāng)被保存下來，而不是完全從頭再來。當(dāng)然實(shí)際情況下不能緩存所有的頁面，不然內(nèi)存不得爆炸，所以還得做成可選的。目前，React正在用Offscreen組件來實(shí)現(xiàn)這個(gè)功能。嗯，也就是這關(guān)于這個(gè)狀態(tài)復(fù)用，其實(shí)還沒完成呢。不過源碼中已經(jīng)在做了：

另外，使用OffScreen，除了可以復(fù)用原先的狀態(tài)，我們也可以使用它來當(dāng)做新UI的緩存準(zhǔn)備，就是雖然新UI還沒登場，但是可以先在后臺(tái)準(zhǔn)備著嘛，這樣一旦輪到它，就可以立馬快速地渲染出來。

Concurrent總結(jié)

三、React的新特性

前文說了那么多Concurrent并不是新特性，而是React18新特性的實(shí)現(xiàn)基礎(chǔ)。那么新特性都有哪些呢，下面來看吧：

react-dom/client中的createRoot

創(chuàng)建一個(gè)初次渲染或者更新，以前我們用的是ReactDOM.render，現(xiàn)在改用react-dom/client中的createRoot，這個(gè)函數(shù)的返回值是卸載函數(shù)。

ssr中的ReactDOM.hydrate也換成了新的hydrateRoot。

以上兩個(gè)API目前依然支持，只是已經(jīng)移入legacy模式，開發(fā)環(huán)境下會(huì)報(bào)warning。

自動(dòng)批量處理 Automatic Batching

如果你是React技術(shù)棧，那么你一定遇到過無數(shù)次這樣的面試題：

//?以前:?這里的兩次setState并沒有批量處理，React會(huì)render兩次
setTimeout(()?=>?{
??setCount(c?=>?c?+?1);
??setFlag(f?=>?!f);
},?1000);

//?React18:?自動(dòng)批量處理，這里只會(huì)render一次
setTimeout(()?=>?{
??setCount(c?=>?c?+?1);
??setFlag(f?=>?!f);
},?1000);

???//?import?{?flushSync?}?from?"react-dom";
???changeCount?=?()?=>?{
????const?{?count?}?=?this.state;

????flushSync(()?=>?{
??????this.setState({
????????count:?count?+?1,
??????});
????});

????console.log("改變count",?this.state.count);?//sy-log
??};
??
??//?change?count?合成事件

transition

React把update分成兩種：

• Urgent updates?緊急更新，指直接交互，通常指的用戶交互。如點(diǎn)擊、輸入等。這種更新一旦不及時(shí)，用戶就會(huì)覺得哪里不對(duì)。

• Transition updates?過渡更新，如UI從一個(gè)視圖向另一個(gè)視圖的更新。通常這種更新用戶并不著急看到。

startTransition

startTransition可以用在任何你想更新的時(shí)候。但是從實(shí)際來說，以下是兩種典型適用場景：

• 渲染慢：如果你有很多沒那么著急的內(nèi)容要渲染更新。

• 網(wǎng)絡(luò)慢：如果你的更新需要花較多時(shí)間從服務(wù)端獲取。這個(gè)時(shí)候也可以再結(jié)合Suspense。

import?{useEffect,?useState,?Suspense}?from?"react";
import?Button?from?"../components/Button";
import?User?from?"../components/User";
import?Num?from?"../components/Num";
import?{fetchData}?from?"../utils";

const?initialResource?=?fetchData();

export?default?function?TransitionPage(props)?{
??const?[resource,?setResource]?=?useState(initialResource);

??//?useEffect(()?=>?{
??//???console.log("resource",?resource);?//sy-log
??//?},?[resource]);

??return?(
????<div>
??????<h3>TransitionPageh3>
??????<Suspense?fallback={<h1>loading?-?userh1>}>
????????<User?resource={resource}?/>
??????Suspense>

??????<Suspense?fallback={<h1>loading-numh1>}>
????????<Num?resource={resource}?/>
??????Suspense>

??????<Button
????????refresh={()?=>?{
??????????setResource(fetchData());
????????}}
??????/>
????div>
??);
}

Button

import?{
??//startTransition,
??useTransition,
}?from?"react";

export?default?function?Button({refresh})?{
??const?[isPending,?startTransition]?=?useTransition();

??return?(
????<div?className="border">
??????<h3>Buttonh3>
??????<button
????????onClick={()?=>?{
??????????startTransition(()?=>?{
????????????refresh();
??????????});
????????}}
????????disabled={isPending}>
????????點(diǎn)擊刷新數(shù)據(jù)
??????button>
??????{isPending???<div>loading...div>?:?null}
????div>
??);
}

與setTimeout異同

useTransition

在使用startTransition更新狀態(tài)的時(shí)候，用戶可能想要知道transition的實(shí)時(shí)情況，這個(gè)時(shí)候可以使用React提供的hook api?useTransition。

import?{?useTransition?}?from?'react';
const?[isPending,?startTransition]?=?useTransition();

如果transition未完成，isPending值為true，否則為false。

useDeferredValue

使得我們可以延遲更新某個(gè)不那么重要的部分。

相當(dāng)于參數(shù)版的transitions。

舉例：如下圖，當(dāng)用戶在輸入框輸入“書”的時(shí)候，用戶應(yīng)該立馬看到輸入框的反應(yīng)，而相比之下，下面的模糊查詢框如果延遲出現(xiàn)一會(huì)兒其實(shí)是完全可以接受的，因?yàn)橛脩艨赡軙?huì)繼續(xù)修改輸入框內(nèi)容，這個(gè)過程中模糊查詢結(jié)果還是會(huì)變化，但是這個(gè)變化對(duì)用戶來說相對(duì)沒那么重要，用戶最關(guān)心的是看到最后的匹配結(jié)果。

用法如下：

import?{useDeferredValue,?useState}?from?"react";
import?MySlowList?from?"../components/MySlowList";

export?default?function?UseDeferredValuePage(props)?{
??const?[text,?setText]?=?useState("hello");
??const?deferredText?=?useDeferredValue(text);

??const?handleChange?=?(e)?=>?{
????setText(e.target.value);
??};
??return?(
????<div>
??????<h3>UseDeferredValuePageh3>
??????{/*?保持將當(dāng)前文本傳遞給?input?*/}
??????<input?value={text}?onChange={handleChange}?/>
??????{/*?但在必要時(shí)可以將列表“延后”?*/}
??????<p>{deferredText}p>

??????<MySlowList?text={deferredText}?/>
????div>
??);
}

MySlowList

import?React,?{memo}?from?"react";

function?ListItem({children})?{
??let?now?=?performance.now();
??while?(performance.now()?-?now?3)?{}
??return?<div?className="ListItem">{children}div>;
}

export?default?memo(function?MySlowList({text})?{
??let?items?=?[];
??for?(let?i?=?0;?i?80;?i++)?{
????items.push(
??????<ListItem?key={i}>
????????Result?#{i}?for?"{text}"
??????ListItem>
????);
??}
??return?(
????<div?className="border">
??????<p>
????????<b>Results?for?"{text}":b>
??????p>
??????<ul?className="List">{items}ul>
????div>
??);
});

Suspense

}>
??<Comments?/>
</Suspense>

基本使用：避免等待太久

import?{useState,?Suspense}?from?"react";
import?User?from?"../components/User";
import?Num?from?"../components/Num";
import?{fetchData}?from?"../utils";
import?ErrorBoundaryPage?from?"./ErrorBoundaryPage";

const?initialResource?=?fetchData();

export?default?function?SuspensePage(props)?{
??const?[resource,?setResource]?=?useState(initialResource);

??return?(
????<div>
??????<h3>SuspensePageh3>
??????<ErrorBoundaryPage?fallback={<h1>網(wǎng)絡(luò)出錯(cuò)了h1>}>
????????<Suspense?fallback={<h1>loading?-?userh1>}>
??????????<User?resource={resource}?/>
????????Suspense>
??????ErrorBoundaryPage>

??????<Suspense?fallback={<h1>loading-numh1>}>
????????<Num?resource={resource}?/>
??????Suspense>

??????<button?onClick={()?=>?setResource(fetchData())}>refreshbutton>
????div>
??);
}

錯(cuò)誤處理

export?default?class?ErrorBoundaryPage?extends?React.Component?{
??state?=?{hasError:?false,?error:?null};
??static?getDerivedStateFromError(error)?{
????return?{
??????hasError:?true,
??????error,
????};
??}
??render()?{
????if?(this.state.hasError)?{
??????return?this.props.fallback;
????}
????return?this.props.children;
??}
}

結(jié)合transitions

function?handleClick()?{
??setTab('comments');
}

}>
??{tab?===?'photos'???<Photos?/>?:?<Comments?/>}
</Suspense>

Comments：

function?handleClick()?{
??startTransition(()?=>?{
????setTab('comments');
??});
}

const?[isPending,?startTransition]?=?useTransition();

function?handleClick()?{
??startTransition(()?=>?{
????setTab('comments');
??});
}

}>
??<div?style={{?opacity:?isPending???0.8?:?1?}}>
????{tab?===?'photos'???<Photos?/>?:?<Comments?/>}
??div>
</Suspense>

SuspenseList

用于控制Suspense組件的顯示順序。

revealOrder?Suspense加載順序

together?所有Suspense一起顯示，也就是最后一個(gè)加載完了才一起顯示全部

forwards?按照順序顯示Suspense

backwards?反序顯示Suspense

tail是否顯示fallback，只在revealOrder為forwards或者backwards時(shí)候有效

hidden不顯示

collapsed輪到自己再顯示

import?{useState,?Suspense,?SuspenseList}?from?"react";
import?User?from?"../components/User";
import?Num?from?"../components/Num";
import?{fetchData}?from?"../utils";
import?ErrorBoundaryPage?from?"./ErrorBoundaryPage";

const?initialResource?=?fetchData();

export?default?function?SuspenseListPage(props)?{
??const?[resource,?setResource]?=?useState(initialResource);

??return?(
????<div>
??????<h3>SuspenseListPageh3>
??????<SuspenseList?tail="collapsed">
????????<ErrorBoundaryPage?fallback={<h1>網(wǎng)絡(luò)出錯(cuò)了h1>}>
??????????<Suspense?fallback={<h1>loading?-?userh1>}>
????????????<User?resource={resource}?/>
??????????Suspense>
????????ErrorBoundaryPage>

????????<Suspense?fallback={<h1>loading-numh1>}>
??????????<Num?resource={resource}?/>
????????Suspense>
??????SuspenseList>

??????<button?onClick={()?=>?setResource(fetchData())}>refreshbutton>
????div>
??);
}

四、新的Hooks

useId

用于產(chǎn)生一個(gè)在服務(wù)端與Web端都穩(wěn)定且唯一的ID，也支持加前綴，這個(gè)特性多用于支持ssr的環(huán)境下：

export?default?function?NewHookApi(props)?{
??const?id?=?useId();

??return?(
????<div>
??????<h3?id={id}>NewHookApih3>
????div>
??);
}

注意：useId產(chǎn)生的ID不支持css選擇器，如querySelectorAll。

useSyncExternalStore

const?state?=?useSyncExternalStore(subscribe,?getSnapshot[,?getServerSnapshot]);

此Hook用于外部數(shù)據(jù)的讀取與訂閱，可應(yīng)用Concurrent。

基本用法如下：

import?{?useStore?}?from?"../store";
import?{?useId,?useSyncExternalStore?}?from?"../whichReact";

export?default?function?NewHookApi(props)?{
??const?store?=?useStore();
??const?state?=?useSyncExternalStore(store.subscribe,?store.getSnapshot);

??return?(
????<div>
??????<h3>NewHookApih3>

??????<button?onClick={()?=>?store.dispatch({?type:?"ADD"?})}>{state}button>
????div>
??);
}

useStore是我另外定義的，

export?function?useStore()?{
??const?storeRef?=?useRef();

??if?(!storeRef.current)?{
????storeRef.current?=?createStore(countReducer);
??}

??return?storeRef.current;
}

function?countReducer(action,?state?=?0)?{
??switch?(action.type)?{
????case?"ADD":
??????return?state?+?1;
????case?"MINUS":
??????return?state?-?1;
????default:
??????return?state;
??}
}

這里的createStore用的redux思路：

export?function?createStore(reducer)?{
??let?currentState;
??let?listeners?=?[];

??function?getSnapshot()?{
????return?currentState;
??}

??function?dispatch(action)?{
????currentState?=?reducer(action,?currentState);
????listeners.map((listener)?=>?listener());
??}

??function?subscribe(listener)?{
????listeners.push(listener);

????return?()?=>?{
??????//???console.log("unmount",?listeners);
????};
??}

??dispatch({?type:?"TIANNA"?});

??return?{
????getSnapshot,
????dispatch,
????subscribe,
??};
}

對(duì)于還在用自定義store來做低代碼項(xiàng)目的我有點(diǎn)開心，可以用于升級(jí)我的項(xiàng)目了，原先定義的forceUpdate、unsubscribe之類的，可以去掉了~

useInsertionEffect

useInsertionEffect(didUpdate);

函數(shù)簽名同useEffect，但是它是在所有DOM變更前同步觸發(fā)。主要用于css-in-js庫，往DOM中動(dòng)態(tài)注入