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