K60 Pro官方停產(chǎn) 第三方瞬間漲價
雖然沒有官方宣布，但Redmi的一些高管也已經(jīng)透露了，Redmi K60 Pro已經(jīng)停產(chǎn)且不會補貨，這一切都是為了即將到來的K60 Ultra鋪路，屬于廠家的正常操作。但有意思的是該機在停產(chǎn)之后
顧名思義，React底層在函數(shù)式組件的Fiber節(jié)點設(shè)計中帶入了hooks鏈表的概念（memorizedState），在此變量上專門存儲每一個函數(shù)式組件對應(yīng)的鏈表。
而對于副作用（useEffect or useLayoutEffect）來說，對應(yīng)其hook類型就是Effect。
單個的effect對象包括以下幾個屬性：
單純看這些字段，和平時使用層面來聯(lián)想還是很通俗易懂的，這里還是補充一下hooks鏈表的概念，有如下的例子：
const Hello = () => { const [ text, setText ] = useState('hello') useEffect(() => { console.log('effect1') return () => { console.log('destory1'); } }) useLayoutEffect(() => { console.log('effect2') return () => { console.log('destory2'); } }) return <div>effect</div>}掛載到Hello組件fiber上memoizedState如下：
圖片
可以看到，打印出來結(jié)果和組件中聲明hook的順序是一樣的，不難看出這是一個鏈表，這也是為什么react hook要求hook的使用不能放在條件分支語句中的原因，如果第一次mount走的是A情況，第二次updateMount走的是B情況，就會出現(xiàn)hooks鏈表混亂的情況，保證官方范式是比較重要的原因。
從上圖的例子中可以看到，memorizedState的值會根據(jù)不同hook來決定。
Hook類型如下：
export type Hook = { memoizedState: any, // Hook 自身維護的狀態(tài) baseQueue: any, baseState: any, queue: UpdateQueue<any, any> | null, // Hook 自身維護的更新隊列 next: Hook | null, // next 指向下一個 Hook };基于上面的數(shù)據(jù)結(jié)構(gòu)，對于use（Layout）Effect來說，React做的事情就是
第二點提到了一個重點，就是useEffect和useLayoutEffect的執(zhí)行時機不一樣，前者被異步調(diào)度，當(dāng)頁面渲染完成后再去執(zhí)行，不會阻塞頁面渲染。 后者是在commit階段新的DOM準備完成，但還未渲染到屏幕之前，同步執(zhí)行。
useEffect的工作是在currentlyRenderingFiber加載當(dāng)前的hook，具體流程就是判斷當(dāng)前fiber是否已經(jīng)存在hook（就是判斷fiber.memoizedState），存在的話則創(chuàng)建一個effect hook到鏈表的最后，也就是.next，沒有的話則創(chuàng)建一個memoizedState。
先看一下創(chuàng)建一個Effect的入口函數(shù)：
function mountEffect( create: () => (() => void) | void, deps: Array<mixed> | void | null): void { return mountEffectImpl( UpdateEffect | PassiveEffect, HookPassive, create, deps, );};可以看到本質(zhì)上是調(diào)用了mountEffectImpl函數(shù)，傳了上一節(jié)所說的Effect type中的字段，這里有個問題，為什么destroy沒傳呢？獲取上一次effect的destroy函數(shù)，也就是useEffect回調(diào)中return的函數(shù)，在創(chuàng)建階段是第一次，所以為undefined。
這里看一下創(chuàng)建階段調(diào)用的mountEffectImpl函數(shù)：
function mountEffectImpl(fiberFlags, hookFlags, create, deps): void { // 創(chuàng)建hook對象 const hook = mountWorkInProgressHook(); // 獲取依賴 const nextDeps = deps === undefined ? null : deps; // 為fiber打上副作用的effectTag currentlyRenderingFiber.flags |= fiberFlags; // 創(chuàng)建effect鏈表，掛載到hook的memoizedState上和fiber的updateQueue hook.memoizedState = pushEffect( HookHasEffect | hookFlags, create, undefined, nextDeps, );}接下來我們都知道，React或Vue都是狀態(tài)改變導(dǎo)致頁面重渲染，而useEffect or useLayoutEffect都會會根據(jù)deps變化重新執(zhí)行，所以猜都猜得到，在更新時調(diào)用的updateEffectImpl函數(shù)，對比mountEffectImpl函數(shù)多出來的一部分內(nèi)容其實就是對比上一次的Effect的依賴變化，以及執(zhí)行上一次Effect中的destroy部分內(nèi)容~代碼如下：
function updateEffectImpl(fiberFlags, hookFlags, create, deps): void { const hook = updateWorkInProgressHook(); const nextDeps = deps === undefined ? null : deps; let destroy = undefined; if (currentHook !== null) { // 從currentHook中獲取上一次的effect const prevEffect = currentHook.memoizedState; // 獲取上一次effect的destory函數(shù)，也就是useEffect回調(diào)中return的函數(shù) destroy = prevEffect.destroy; if (nextDeps !== null) { const prevDeps = prevEffect.deps; // 比較前后依賴，push一個不帶HookHasEffect的effect if (areHookInputsEqual(nextDeps, prevDeps)) { pushEffect(hookFlags, create, destroy, nextDeps); return; } } } currentlyRenderingFiber.flags |= fiberFlags; // 如果前后依賴有變，在effect的tag中加入HookHasEffect // 并將新的effect更新到hook.memoizedState上 hook.memoizedState = pushEffect( HookHasEffect | hookFlags, create, destroy, nextDeps, );}可以看到在mountEffectImpl和updateEffectImpl中，最后的結(jié)果走向都是pushEffect函數(shù)，它的工作很純粹，就是創(chuàng)建出effect對象，把對象掛到鏈表中。
pushEffect代碼如下：
function pushEffect(tag, create, destroy, deps) { // 創(chuàng)建effect對象 const effect: Effect = { tag, create, destroy, deps, // Circular next: (null: any), }; // 從workInProgress節(jié)點上獲取到updateQueue，為構(gòu)建鏈表做準備 let componentUpdateQueue: null | FunctionComponentUpdateQueue = (currentlyRenderingFiber.updateQueue: any); if (componentUpdateQueue === null) { // 如果updateQueue為空，把effect放到鏈表中，和它自己形成閉環(huán) componentUpdateQueue = createFunctionComponentUpdateQueue(); // 將updateQueue賦值給WIP節(jié)點的updateQueue，實現(xiàn)effect鏈表的掛載 currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any); componentUpdateQueue.lastEffect = effect.next = effect; } else { // updateQueue不為空，將effect接到鏈表的后邊 const lastEffect = componentUpdateQueue.lastEffect; if (lastEffect === null) { componentUpdateQueue.lastEffect = effect.next = effect; } else { const firstEffect = lastEffect.next; lastEffect.next = effect; effect.next = firstEffect; componentUpdateQueue.lastEffect = effect; } } return effect;}這里的主要邏輯其實就是本節(jié)開頭所說的，區(qū)分兩種情況，鏈表為空或鏈表存在的情況，值得一提的是這里的updateQueue是一個環(huán)形鏈表。
以上，就是effect鏈表的構(gòu)建過程。我們可以看到，effect對象創(chuàng)建出來最終會以兩種形式放到兩個地方：單個的effect，放到hook.memorizedState上；環(huán)狀的effect鏈表，放到fiber節(jié)點的updateQueue中。兩者各有用途，前者的effect會作為上次更新的effect，為本次創(chuàng)建effect對象提供參照（對比依賴項數(shù)組），后者的effect鏈表會作為最終被執(zhí)行的主體，帶到commit階段處理。
當(dāng)我們完成更新，進入提交重渲染視圖時，主要在commitRoot函數(shù)中執(zhí)行，而在這之前創(chuàng)建Effect以及插入到hooks鏈表中，useEffect和useLayoutEffect其實做的都是一樣的，也是共用的，在提交階段，我們會看出兩者執(zhí)行時機不同的實現(xiàn)點。
// src/react-reconciler/src/ReactFiberWorkLoop.jsfunction commitRoot(root) { // 已經(jīng)完成構(gòu)建的fiber，上面會包括hook信息 const { finishedWork } = root; // 如果存在useEffect或者useLayoutEffect if ((finishedWork.flags & Passive) !== NoFlags) { if (!rootDoesHavePassiveEffect) { rootDoesHavePassiveEffect = true; // 開啟下一個宏任務(wù) requestIdleCallback(flushPassiveEffect); } } console.log('start commit.'); // 判斷自己身上有沒有副作用 const rootHasEffect = (finishedWork.flags & MutationMask) !== NoFlags; // 如果自己的副作用或者子節(jié)點有副作用就進行DOM操作 if (rootHasEffect) { console.log('DOM執(zhí)行完畢'); commitMutationEffectsOnFiber(finishedWork, root); // 執(zhí)行l(wèi)ayout Effect console.log('開始執(zhí)行l(wèi)ayoutEffect'); commitLayoutEffects(finishedWork, root); if (rootDoesHavePassiveEffect) { rootDoesHavePassiveEffect = false; rootWithPendingPassiveEffects = root; } } // 等DOM變更之后，更改root中current的指向 root.current = finishedWork;}這里的rootDoesHavePassiveEffect是核心判斷點，還記得Effect類型中的tag參數(shù)嗎？就是依靠這個參數(shù)來標(biāo)識區(qū)分useEffect和useLayoutEffect的。
rootDoesHavePassiveEffect === false，則執(zhí)行宏任務(wù)，將Effect副作用推入宏任務(wù)執(zhí)行棧中。我們可以簡單理解成useEffect的回調(diào)函數(shù)包裝在了requestIdleCallback中去異步執(zhí)行，根據(jù)fiber的知識接下來會去走瀏覽器當(dāng)前幀是否有空余時間來判斷副作用函數(shù)的執(zhí)行時機。
繼續(xù)往下走，如果rootHasEffect === true，代表有副作用，如果是useEffect，副作用已經(jīng)在上面進入宏任務(wù)隊列了，所以如果是useLayoutEffect，就會在這個條件中去執(zhí)行，所以在這里我們可以理解到那一句"useEffect和useLayoutEffect的區(qū)別是，前者會異步執(zhí)行副作用函數(shù)不會阻塞頁面更新，后者會立即執(zhí)行副作用函數(shù)，會阻塞頁面更新，不適合寫入復(fù)雜邏輯。"的原因了。
useEffect與useLayoutEffect十分相似，就連簽名都一樣，不同之處就在于前者會在瀏覽器繪制后延遲執(zhí)行，而后者會在所有DOM變更之后同步調(diào)用effect，希望你看到這里，可以對于這個結(jié)論的來源有一定的了解和學(xué)習(xí)，希望可以幫到你~
本文鏈接：http://www.www897cc.com/showinfo-26-44381-0.html面試官：useEffect和useLayoutEffect有什么區(qū)別？你能說說嗎？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 改善代碼質(zhì)量，試試這十種方法
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號