在目前更新props的逻辑中,我们发现,如果更新一个子组件的话,会导致整个dom树都会更新,这样就造成了性能的浪费,所以我们只需要更新变化的子组件即可。
旧的逻辑:
在 update()
函数中,是将根节点重新赋值给nextUnitOfFier
后重新启动 perfromFiberOfUnit
,创建dom,建立链表关系,对新旧dom树的props进行更新、删除、新建操作,最后重新挂载到根节点
优化后的逻辑:
在 update()
函数中,将需要更新的组件赋值给nextUnitOfFier
后重新启动后面的逻辑,并且在下一个组件更新前终止。
按照优化逻辑,我们需要获取到开始点和结束点:
重新创建一个wipFiber参数用来表示当前更新的组件fiber
let wipFiber = null
function updateFunctionComponent(fiber) {
// 获取正在更新的组件
wipFiber = fiber;
const children = [fiber.type(fiber.props)];
reconcileChildren(fiber, children);
}
但由于是个全局变量,会导致后面的组件参数覆盖之前的组件参数,所以可以采用闭包的方式来存下当前组件fiber。
将这个currentFiber赋值给wipRoot后,我们就获取到了开始点,然后赋值给nextUnitOfFier后启动更新。