React?Fiber?樹(shù)思想解決業(yè)務(wù)實(shí)際場(chǎng)景詳解
熟悉 Fiber 樹(shù)結(jié)構(gòu)
我們知道,React 從 V16 版本開(kāi)始采用 Fiber 樹(shù)架構(gòu)來(lái)實(shí)現(xiàn)渲染和更新機(jī)制。
Fiber
在 React 源碼中可以看作是一個(gè)任務(wù)執(zhí)行單元,每個(gè) React Element 都會(huì)有一個(gè)與之對(duì)應(yīng)的 Fiber 節(jié)點(diǎn)。
Fiber
節(jié)點(diǎn)的核心數(shù)據(jù)結(jié)構(gòu)如下:
type Fiber = { type: any, //類型 return: Fiber, //父節(jié)點(diǎn) child: Fiber, // 指向第一個(gè)子節(jié)點(diǎn) sibling: Fiber, // 指向下一個(gè)弟弟 }
其中,以下三個(gè)屬性可以構(gòu)成 Fiber 樹(shù):
return
表示父 Fiber 節(jié)點(diǎn)(頂級(jí)元素沒(méi)有 return 指針)sibling
表示下一個(gè)兄弟 Fiber 節(jié)點(diǎn)(如果沒(méi)有下一個(gè)兄弟節(jié)點(diǎn),也就沒(méi)有這個(gè)指針)child
表示第一個(gè)子 Fiber 節(jié)點(diǎn)(如果沒(méi)有第一個(gè)子節(jié)點(diǎn),也就沒(méi)有這個(gè)指針)。
舉個(gè)例子,假如我們的組件結(jié)構(gòu)如下:
function App() { return ( <div> 名稱: <span>明里人</span> </div> ) }
對(duì)應(yīng)的 Fiber 樹(shù)結(jié)構(gòu)如下:
通過(guò) Fiber 樹(shù)結(jié)構(gòu)我們可以很方便的查找一個(gè)節(jié)點(diǎn)的上級(jí)、下級(jí)和同級(jí)。
接下來(lái)我們一起來(lái)看看實(shí)際的業(yè)務(wù)場(chǎng)景。
業(yè)務(wù)場(chǎng)景
有時(shí)我們會(huì)去實(shí)現(xiàn)一些任務(wù)類的需求,任務(wù)自身存在 status 狀態(tài),比如進(jìn)行中、逾期、完成狀態(tài),每個(gè)任務(wù)都可以通過(guò)完成按鈕被完成。
假設(shè)現(xiàn)在有一個(gè)「任務(wù)流」作為第一級(jí)數(shù)據(jù)出現(xiàn),它的子集由一個(gè)或多個(gè)「任務(wù)組」組成,作為第二級(jí)數(shù)據(jù)出現(xiàn),任務(wù)組的子集由一個(gè)或多個(gè)「任務(wù)」組成,作為第三級(jí)數(shù)據(jù)出現(xiàn)。
現(xiàn)有需求如下:
第三級(jí)的「任務(wù)」在完成時(shí)更新自身狀態(tài),但要考慮同步上級(jí)節(jié)點(diǎn)的狀態(tài):
- 如果當(dāng)前任務(wù)所在的任務(wù)組下所有任務(wù)都已完成,更新當(dāng)前「任務(wù)組」?fàn)顟B(tài)為完成;
- 如果所有任務(wù)組及任務(wù)都已完成,更新「任務(wù)流」?fàn)顟B(tài)為完成。
當(dāng)「任務(wù)流」處于完成狀態(tài)時(shí),UI 的體現(xiàn)可能如下:
思路:
我們要在每個(gè)任務(wù)完成后,判斷同級(jí)任務(wù)是否都已完成,若都已完成,則將父級(jí)(任務(wù)組)狀態(tài)更新為完成。
如果我們將現(xiàn)有的菜單樹(shù)結(jié)構(gòu)改造為 Fiber 樹(shù)結(jié)構(gòu),通過(guò) return
可以很方便的找到父節(jié)點(diǎn),然后通過(guò) child 和 sibling
可以很方便的查找任務(wù)組下的每一個(gè)任務(wù),決定是否更新任務(wù)組狀態(tài)。
代碼實(shí)現(xiàn)如下:
// 1. taskFlowData 任務(wù)流數(shù)據(jù) // 2. currentTaskData 當(dāng)前完成的任務(wù)數(shù)據(jù) export const getFinishedStatus = (task) => task.status === 1; // 1 代表完成 export const setFinishedStatus = (task) => task.status = 1; // 首先,將當(dāng)前任務(wù)的狀態(tài)更新 setFinishedStatus(currentTaskData); // 第一步,將現(xiàn)有數(shù)據(jù)轉(zhuǎn)換為 Fiber 樹(shù)結(jié)構(gòu) const createNode = (value, parent) => ( { value, return: parent, child: null, sibling: null } ); // 1-1. 創(chuàng)建 root fiber 根節(jié)點(diǎn),即 任務(wù)流 const rootNode = createNode(taskFlowData, undefined); let currentNode = rootNode, currentTaskNode = null; // 1-2. child 存放的是任務(wù)組,為第二級(jí)數(shù)據(jù)創(chuàng)建 Fiber 節(jié)點(diǎn) currentNode.value.child.forEach((taskGroup, taskGroupIndex) => { const node = createNode(taskGroup, rootNode); // 1-3. 建立關(guān)系 taskGroupIndex === 0 ? (currentNode.child = node) : (currentNode.sibling = node); // 1-4. 為第三級(jí)任務(wù)創(chuàng)建 Fiber 節(jié)點(diǎn) taskGroup.child.forEach((task, taskIndex) => { const childNode = createNode(task, node); taskIndex === 0 ? (node.child = childNode) : (currentNode.sibling = childNode); currentNode = childNode; // 1-5. 記錄當(dāng)前任務(wù)對(duì)應(yīng)的 Fiber 節(jié)點(diǎn) if (task.id === currentTaskData.id) currentTaskNode = currentNode; }); currentNode = node; }); // 第二步,根據(jù) Fiber 樹(shù)結(jié)構(gòu),來(lái)查找并更新?tīng)顟B(tài) let parentNode = currentTaskNode.return; while (parentNode) { let isFinished = true; // 2-1. 找到第一個(gè)任務(wù) let workInprgress = parentNode.child; // 2-2. 從第一個(gè)任務(wù)開(kāi)始,依次查看每個(gè)任務(wù)的狀態(tài) while (workInprgress) { // 2-3. 如果查找的當(dāng)前任務(wù)處于未完成狀態(tài),無(wú)需更新父級(jí)狀態(tài) if (!getFinishedStatus(workInprgress.value)) { isFinished = false; break; } workInprgress = workInprgress.sibling; } // 2-4. 更新任務(wù)組狀態(tài),再向上查找,確定是否更新任務(wù)流狀態(tài) if (isFinished) { setFinishedStatus(parentNode.value); parentNode = parentNode.return; } else { // 2-5. 任務(wù)組狀態(tài)不需要更新,直接結(jié)束 break; } }
以上就是React Fiber 樹(shù)思想解決業(yè)務(wù)實(shí)際場(chǎng)景詳解的詳細(xì)內(nèi)容,更多關(guān)于React Fiber樹(shù)業(yè)務(wù)場(chǎng)景的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
教你如何實(shí)現(xiàn)在react項(xiàng)目中嵌入Blazor
這篇文章主要介紹了如何實(shí)現(xiàn)在react現(xiàn)有項(xiàng)目中嵌入Blazor,通過(guò)這個(gè)案例我們可以知道 blazor也可以像react那樣嵌入在任何的現(xiàn)有項(xiàng)目中,并且使用方便,需要的朋友可以參考下2023-01-01React?中使用?react-i18next?國(guó)際化的過(guò)程(react-i18next?的基本用法)
i18next?是一款強(qiáng)大的國(guó)際化框架,react-i18next?是基于?i18next?適用于?React?的框架,本文介紹了?react-i18next?的基本用法,如果更特殊的需求,文章開(kāi)頭的官方地址可以找到答案2023-01-01react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果
本篇文章通過(guò)完整的代碼給大家介紹了react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-01-01ReactQuery系列React?Query?實(shí)踐示例詳解
這篇文章主要為大家介紹了ReactQuery系列React?Query?實(shí)踐示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11react native 文字輪播的實(shí)現(xiàn)示例
這篇文章主要介紹了react native 文字輪播的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07