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

熟悉 Fiber 树结构

我们知道，React 从 V16 版本开始采用 Fiber 树架构来实现渲染和更新机制。

Fiber 在 React 源码中可以看作是一个任务执行单元，每个 React Element 都会有一个与之对应的 Fiber 节点。

Fiber 节点的核心数据结构如下：

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

其中，以下三个属性可以构成 Fiber 树：

• return 表示父 Fiber 节点（顶级元素没有 return 指针）
• sibling 表示下一个兄弟 Fiber 节点（如果没有下一个兄弟节点，也就没有这个指针）
• child 表示第一个子 Fiber 节点（如果没有第一个子节点，也就没有这个指针）。

举个例子，假如我们的组件结构如下：

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

对应的 Fiber 树结构如下：

通过 Fiber 树结构我们可以很方便的查找一个节点的上级、