在上一节中模仿实现了 Fiber 首次渲染性能,本节将持续模仿实现比照更新性能。
保留上一次 Fiber 对象
如果想要实现比照更新,就须要比对新旧两次 Fiber 对象,找出差别,新的 Fiber 对象能够通过调用 render 办法构建,旧的 Fiber 对象则须要在上一次构建中保留。
在 commitAllWork 办法的结尾:
// ... 其余原有代码
// 备份 Fiber 对象,stateNode 属性此时指向的是以后 Fiber 对象对应的 Dom 元素或者是组件实例对象
fiber.stateNode.__rootFiberContainer = fiber
在 getFirstTask 构建根 fiber 对象的办法中,为最终返回的 fiber 对象增加 alternate 属性,此属性指向上一次构建的 fiber 对象。
return {
props: task.props,
stateNode: task.dom,
tag: "host_root",
effects: [],
child: null,
// 上一次构建的 fiber 对象
alternate: task.dom.__rootFiberContainer
}
实现比照
除了根 Fiber 对象之外,其余的 fiber 对象是通过 reconcileChildren 办法构建的,此时须要批改此办法,比照新旧 fiber 对象,为 effectTag 属性赋相应值,如删除为 delete, 更新为 update。
const reconcileChildren = (fiber, children) => {
// 将 children 转换成数组
const arrifiedChildren = arrified(children)
let index = 0
let numberOfElements = arrifiedChildren.length
// 循环过程中的循环项 就是子节点的 virtualDOM 对象
let element = null
// 子级 fiber 对象
let newFiber = null
// 上一个兄弟 fiber 对象
let prevFiber = null
// 旧的 fiber 对象
let alternate = null
// 获取父 fiber 对象的子节点 fiber 对象,此对象肯定对应以后 children 数组的第一项
if (fiber.alternate && fiber.alternate.child) {alternate = fiber.alternate.child}
while (index < numberOfElements) {element = arrifiedChildren[index]
// 如果以后子项曾经不存在,然而对应的旧的 fiber 对象存在,则代表删除
if (!element && alternate) {
alternate.effectTag = "delete"
fiber.effects.push(alternate)
}
// 代表更新
else if (element && alternate) {
newFiber = {
type: element.type,
props: element.props,
tag: getTag(element),
effects: [],
effectTag: "update",
parent: fiber,
alternate
}
if (element.type === alternate.type) {
// 类型雷同就复用旧 fiber 对象的 stateNode 属性
newFiber.stateNode = alternate.stateNode
} else {newFiber.stateNode = createStateNode(newFiber)
}
}
// 代表初始化渲染
else if (element && !alternate) {
newFiber = {
type: element.type,
props: element.props,
tag: getTag(element),
effects: [],
effectTag: "placement",
parent: fiber
}
// 为 fiber 节点增加 DOM 对象或组件实例对象
newFiber.stateNode = createStateNode(newFiber)
}
// 构建关系
if (index === 0) {fiber.child = newFiber} else if (element) {prevFiber.sibling = newFiber}
// 更新上一个 fiber 对象
prevFiber = newFiber
index++
}
}
此办法中用到了 getTag 辅助办法:
const getTag = vdom => {if (typeof vdom.type === "string") {return "host_component"} else if (Object.getPrototypeOf(vdom.type) === Component) {return "class_component"} else {return "function_component"}
}
挂载阶段
在 reconcileChildren 办法的处理过程中,通过为 fiber 对象 effectTag 属性赋不同的值,指定了该 fiber 对象是须要插入,删除还是更新,所以在 commitAllWork 办法中须要依据 effectTag 不同的值进行不同的操作:
const commitAllWork = fiber => {
// 循环 effets 数组 构建 DOM 节点树
fiber.effects.forEach(item => {if (item.tag === "class_component") {item.stateNode.__fiber = item}
if (item.effectTag === "placement") {
let fiber = item
let parentFiber = item.parent
// 找到一般节点父级 排除组件父级,因为组件父级是不能间接追加实在 DOM 节点的
while (
parentFiber.tag === "class_component" ||
parentFiber.tag === "function_component"
) {parentFiber = parentFiber.parent}
// 如果子节点是一般节点 找到父级 将子节点追加到父级中
if (fiber.tag === "host_component") {parentFiber.stateNode.appendChild(fiber.stateNode)
}
}
else if (item.effectTag === "delete") {item.parent.stateNode.removeChild(item.stateNode)
} else if (item.effectTag === "update") {if (item.type === item.alternate.type) {
// 类型雷同更新属性,复用之前模仿 React 虚构 Dom 实现中的代码
updateNodeElement(item.stateNode, item, item.alternate)
} else {
// 类型不同间接替换
item.parent.stateNode.replaceChild(
item.stateNode,
item.alternate.stateNode
)
}
}
})
}
此时通过 render 触发的 fiber 比照更新操作曾经大抵模仿实现实现,前面将通过一个大节模仿实现类组件中通过 setState 实现更新。
类组件 setState
定义 Component 类时,提供 setState 办法:
export class Component {constructor(props) {this.props = props}
setState(partialState) {scheduleUpdate(this, partialState)
}
}
setState 办法调用了 scheduleUpdate 办法,并将组件实例和以后更改的 state 传递过来。
在 scheduleUpdate 办法中,向工作队列增加一个工作,并指定闲暇时执行该办法:
const scheduleUpdate = (instance, partialState) => {
taskQueue.push({
from: "class_component",
instance,
partialState
})
requestIdleCallback(performTask)
}
此时,工作指向的根并不是前文中始终应用的容器 Dom 对象,而是组件实例,因而须要批改 getFirstTask 办法:
const getFirstTask = () => {const task = taskQueue.pop()
// 如果当前任务的 from 指向的是类组件
if (task.from === "class_component") {const root = getRoot(task.instance)
task.instance.__fiber.partialState = task.partialState
return {
props: root.props,
stateNode: root.stateNode,
tag: "host_root",
effects: [],
child: null,
alternate: root
}
}
return {
props: task.props,
stateNode: task.dom,
tag: "host_root",
effects: [],
child: null,
alternate: task.dom.__rootFiberContainer
}
}