前言

今天我们就来这个有趣的话题。从两个框架的设计哲学出发，理解它们各自的性能调整策略。怎么说呢，

一、Vue为什么不需要Fiber？

说到痛点，在大型表单或数据密集型页面中。频繁的数据变更导致页面整体重新渲染，出现明显卡顿。

响应式程序的天然优势

Vue从一开始就采用了响应式程序的设计，这是它不需要Fiber的根本原因。

Vue的更新机制：

// Vue的响应式原理简化版
class Vue {
constructor {
this.data = this.observe;this.compile;}
observe {
Object.keys.forEach(key => {
let value = data;Object.defineProperty(data,key。{
get {
// 收集依赖
Dep.target && Dep.target.addDep;return value;},set {
if {
value = newValue;// 精确通知相关组件更新
this.dep.notify;}
}
})，});return data，怎么说呢，}
}

Vue的主要优势：

• 精确更新Vue知道哪个数据变了只更新相关的组件
• 自动调整响应式程序自动追踪依赖关系
• 无需手动调整开发者不需要写shouldComponentUpdate或useMemo

组件级别的更新粒度

Vue的更新是组件级别的。而不是整个应用树：

// Vue组件更新示例
const ParentComponent = {
data {
return { parentData: 'parent',childData: 'child' };},template: `


{{ parentData }}


`
};
// 当parentData变化时只有父组件重新渲染
// 当childData变化时只有子组件重新渲染

这种设计让Vue天然避免了React早期版本的问题：不必要的组件重新渲染.

模板编译时调整

Vue的模板编译器在编译时就能做很多调整：

// Vue模板

// 编译后的调整代码
function render {
return h('div',);}

Vue 3更是引入了静态提高和补丁标记等编译时调整技术。

二、React为什么需要Fiber？

说到痛点。在复杂交互页面中，即使只修改一个小部件，也会导致整个页面卡死。

React早期的性能问题

React在Fiber之前采用的是递归调和算法，这带来了一些问题：

// React 15及之前的调和过程
function reconcileChildren {
// 递归处理所有子节点
newChildren.forEach => {
const childFiber = reconcileChild;if {
reconcileChildren;// 递归调用
}
});}
// 问题：一旦开始更新，就必须完成整个组件树的遍历
// 无法中断。可能导致主线程阻塞

主要问题：

• 不可中断: 更新过程一旦开始就必须完成

React的设计哲学差异

React采用的是

// React 的更新方式
class ParentComponent extends React.Component {
state = { parentData: 'parent',childData: 'child' };updateParent = => {
this.setState;// 问题：setState会触发整个组件子树的重新渲染检查
};render {
return (


{this.state.parentData}


);}}

C Fiber 架构的方法

React Fiber 引入了

code class= " hljs language - javascript "> // fiber 的 工作 原理 function workLoop{ let shouldYield = false;while { nextUnitOfWork = performUnitOfWork;shouldYield = deadline.timeRemaining<1; } if { requestIdleCallback; } else { commitRoot; } } function performUnitOfWork{ //处理当前fiber节点 reconcileChildren; //返回下一个要处理 的 fiber 节点 if  return fiber.child; if  return fiber.sibling; return fiber.parent?.sibling; }   / pre>

 Fiber 的 主要 特性 ：  


 时间 切片 ** : 将工作分解成 小块，可以 被 中断 ** 

 优先级 调度 ** : 高优先级任务 可以 打断低优先级任务 ** 

 增量 更新 ** : 可以 暂停 、 恢复 、 重启 渲染 工作 ** 


三、React Fiber 架构详细说明 

Fiber 节点结构 

每个 Fiber 节点 包含了 丰富的信息 ： 

// Fiber 节点 的结构
const FiberNode ={
再看type。'div',key:null,child:null,// 第一个 子节点
sibling:null,// 下一个兄弟 节点
parent的观点是，null,// 父节点
memoizedState:null,// 上次 渲染 的 state
pendingProps:{},memoizedProps:{},effectTag:'UPDATE',nextEffect:null,expirationTime:,//过期时间
从lanes来看，// 优先级车道};/ code>

双 缓冲 技术