小型网站网站建设需要,有口碑的装修设计公司,网站的设计思想,浙江高端网站建设首先#xff0c;Fiber Node是React用来描述组件树的数据结构#xff0c;每一个React组件都对应一个Fiber Node。下面是一个Fiber Node的基本结构#xff1a;
const fiber {// 标识这个Fiber Node的类型#xff08;函数组件#xff0c;类组件#xff0c;DOM节点类型等Fiber Node是React用来描述组件树的数据结构每一个React组件都对应一个Fiber Node。下面是一个Fiber Node的基本结构
const fiber {// 标识这个Fiber Node的类型函数组件类组件DOM节点类型等type: null,// 对应的React元素element: null,// 父级Fiber Nodereturn: null,// 子级Fiber Nodechild: null,// 兄弟Fiber Nodesibling: null,// Fiber Node对应的DOM节点或者组件实例stateNode: null,// Fiber Node的propspendingProps: null,// 保存旧的props用于比较memoizedProps: null,// 保存旧的state用于比较memoizedState: null,// 保存此Fiber Node上的更新updateQueue: null,// 标识Fiber Node的状态需要更新需要删除等effectTag: null,// 保存副作用需要被commit的更改nextEffect: null,// 其他的字段...
};在Reconciliation阶段React会遍历Fiber Node构成的Fiber树比较新旧props和state然后决定是否需要更新。可以通过以下伪代码来理解这个过程
function beginWork(currentFiber, nextProps) {// 比较新旧propsif (currentFiber.memoizedProps ! nextProps) {// 如果props有变化标记这个Fiber Node需要更新currentFiber.effectTag UPDATE;}// 处理子Fiber NodereconcileChildren(currentFiber, currentFiber.pendingProps.children);
}function reconcileChildren(currentFiber, nextChildrenElements) {// 这里省略了创建和更新Fiber Node的代码// 在实际的源码中React会比较新旧children// 然后决定是否需要创建新的Fiber Node或者复用旧的Fiber Node
}注意以上代码只是为了解释React Fiber的工作原理实际上React Fiber的源码中处理Fiber Node和Reconciliation的逻辑要复杂得多。
