React Fiber 树思想解决业务实际场景详解

type Fiber = {
  type: any, //类型  
  return: Fiber, //父节点
  child: Fiber, // 指向第一个子节点
  sibling: Fiber, // 指向下一个弟弟
}

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

// 1. taskFlowData 任务流数据
// 2. currentTaskData 当前完成的任务数据
export const getFinishedStatus = (task) => task.status === 1; // 1 代表完成
export const setFinishedStatus = (task) => task.status = 1;
// 首先，将当前任务的状态更新
setFinishedStatus(currentTaskData);
// 第一步，将现有数据转换为 Fiber 树结构
const createNode = (value, parent) => (
  { value, return: parent, child: null, sibling: null }
);
// 1-1. 创建 root fiber 根节点，即 任务流
const rootNode = createNode(taskFlowData, undefined);
let currentNode = rootNode, currentTaskNode = null;
// 1-2. child 存放的是任务组，为第二级数据创建 Fiber 节点
currentNode.value.child.forEach((taskGroup, taskGroupIndex) => {
  const node = createNode(taskGroup, rootNode);
  // 1-3. 建立关系
  taskGroupIndex === 0 ? (currentNode.child = node) : (currentNode.sibling = node);
  // 1-4. 为第三级任务创建 Fiber 节点
  taskGroup.child.forEach((task, taskIndex) => {
    const childNode = createNode(task, node);
    taskIndex === 0 ? (node.child = childNode) : (currentNode.sibling = childNode);
    currentNode = childNode;
    // 1-5. 记录当前任务对应的 Fiber 节点
    if (task.id === currentTaskData.id) currentTaskNode = currentNode;
  });
  currentNode = node;
});
// 第二步，根据 Fiber 树结构，来查找并更新状态
let parentNode = currentTaskNode.return;
while (parentNode) {
  let isFinished = true;
  // 2-1. 找到第一个任务
  let workInprgress = parentNode.child;
  // 2-2. 从第一个任务开始，依次查看每个任务的状态
  while (workInprgress) {
    // 2-3. 如果查找的当前任务处于未完成状态，无需更新父级状态
    if (!getFinishedStatus(workInprgress.value)) {
      isFinished = false;
      break;
    }
    workInprgress = workInprgress.sibling;
  }
  // 2-4. 更新任务组状态，再向上查找，确定是否更新任务流状态
  if (isFinished) {
    setFinishedStatus(parentNode.value);
    parentNode = parentNode.return;
  } else {
    // 2-5. 任务组状态不需要更新，直接结束
    break;
  }
}