React?Fiber?樹思想解決業(yè)務(wù)實(shí)際場景詳解

更新時(shí)間：2022年12月19日 11:01:16 作者：明里人

這篇文章主要為大家介紹了React?Fiber?樹思想解決業(yè)務(wù)實(shí)際場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

熟悉 Fiber 樹結(jié)構(gòu)

我們知道，React 從 V16 版本開始采用 Fiber 樹架構(gòu)來實(shí)現(xiàn)渲染和更新機(jī)制。

Fiber 在 React 源碼中可以看作是一個(gè)任務(wù)執(zhí)行單元，每個(gè) React Element 都會(huì)有一個(gè)與之對應(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 樹：

return 表示父 Fiber 節(jié)點(diǎn)（頂級元素沒有 return 指針）
sibling 表示下一個(gè)兄弟 Fiber 節(jié)點(diǎn)（如果沒有下一個(gè)兄弟節(jié)點(diǎn)，也就沒有這個(gè)指針）
child 表示第一個(gè)子 Fiber 節(jié)點(diǎn)（如果沒有第一個(gè)子節(jié)點(diǎn)，也就沒有這個(gè)指針）。

舉個(gè)例子，假如我們的組件結(jié)構(gòu)如下：

function App() {
  return (
    <div>
      名稱：
      <span>明里人</span>
    </div>
  )
}

對應(yīng)的 Fiber 樹結(jié)構(gòu)如下：

通過 Fiber 樹結(jié)構(gòu)我們可以很方便的查找一個(gè)節(jié)點(diǎn)的上級、下級和同級。

接下來我們一起來看看實(shí)際的業(yè)務(wù)場景。

業(yè)務(wù)場景

有時(shí)我們會(huì)去實(shí)現(xiàn)一些任務(wù)類的需求，任務(wù)自身存在 status 狀態(tài)，比如進(jìn)行中、逾期、完成狀態(tài)，每個(gè)任務(wù)都可以通過完成按鈕被完成。

假設(shè)現(xiàn)在有一個(gè)「任務(wù)流」作為第一級數(shù)據(jù)出現(xiàn)，它的子集由一個(gè)或多個(gè)「任務(wù)組」組成，作為第二級數(shù)據(jù)出現(xiàn)，任務(wù)組的子集由一個(gè)或多個(gè)「任務(wù)」組成，作為第三級數(shù)據(jù)出現(xiàn)。

現(xiàn)有需求如下：

第三級的「任務(wù)」在完成時(shí)更新自身狀態(tài)，但要考慮同步上級節(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ù)完成后，判斷同級任務(wù)是否都已完成，若都已完成，則將父級（任務(wù)組）狀態(tài)更新為完成。

如果我們將現(xiàn)有的菜單樹結(jié)構(gòu)改造為 Fiber 樹結(jié)構(gòu)，通過 return 可以很方便的找到父節(jié)點(diǎn)，然后通過 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 樹結(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ù)組，為第二級數(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. 為第三級任務(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ù)對應(yīng)的 Fiber 節(jié)點(diǎn)
    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. 找到第一個(gè)任務(wù)
  let workInprgress = parentNode.child;
  // 2-2. 從第一個(gè)任務(wù)開始，依次查看每個(gè)任務(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ù)實(shí)際場景詳解的詳細(xì)內(nèi)容，更多關(guān)于React Fiber樹業(yè)務(wù)場景的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: