React Fiber架构：Diff算法的演进

传统的React 15使用递归进行Diff，这个过程是不可中断的。当组件树很大时，会造成主线程阻塞，用户交互卡顿。

Fiber的核心思想

Fiber将渲染工作拆分成多个工作单元，每个Fiber节点对应一个工作单元。React可以：

一、暂停：高优先级任务可以打断低优先级渲染

1.1 React并发渲染：高优先级任务打断低优先级渲染

在React 18之前，一旦开始渲染就无法被打断，就像单线程的同步代码执行一样。React 18引入了并发特性，允许更高优先级的任务中断正在进行的低优先级渲染。

优先级分类 React内部定义了多种优先级：

// React内部的优先级类型（简化）
const PriorityLevels = {
  Immediate: 99,      // 最高：需要立即执行
  UserBlocking: 98,   // 用户交互：点击、输入等
  Normal: 97,         // 普通更新：数据获取、初始渲染
  Low: 96,            // 低优先级：分析、日志
  Idle: 95            // 空闲时执行：预加载、预渲染
};

具体场景示例：搜索框输入打断列表渲染

function SearchApp() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  // 模拟大数据列表
  const bigList = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
  
  useEffect(() => {
    // 低优先级：过滤大数据（耗时操作）
    const filtered = bigList.filter(item => 
      item.toLowerCase().includes(query.toLowerCase())
    );
    setResults(filtered);
  }, [query]);
  
  return (
    <div>
      {/* 高优先级：用户输入 */}
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)} // ⚡️ 高优先级
        placeholder="Search..."
      />
      
      {/* 低优先级：结果列表渲染 */}
      <ul>
        {results.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

执行过程：

1. 用户输入"a" → 触发setQuery('a')（高优先级）

2. React开始过滤10000条数据（低优先级工作）

3. 用户快速输入"ab" → 新的setQuery('ab')（更高优先级）

4. React中断当前的过滤工作

5. 立即处理输入更新，UI立即响应

6. 然后重新开始过滤"ab"的搜索

没有并发时的问题：

• 输入"a"后，必须完整过滤10000条数据

• 在此期间输入"ab"，输入框卡住，直到过滤完成

• 用户体验：输入延迟、卡顿

1.2 打断的具体实现机制----Fiber节点的中断与恢复

// 简化的Fiber节点结构
class FiberNode {
  constructor(type) {
    this.type = type;
    this.stateNode = null;
    this.child = null;
    this.sibling = null;
    this.return = null;
    this.pendingProps = null;
    this.memoizedProps = null;
    this.updateQueue = null;
    // 关键：保存当前工作进度
    this.currentProgress = null;
  }
}

// 工作循环（简化版）
function workLoop(deadline) {
  let shouldYield = false;
  
  while (nextUnitOfWork && !shouldYield) {
    // 执行一个工作单元
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    
    // 检查是否需要让出控制权
    // 1. 有更高优先级任务
    // 2. 当前帧时间用完了
    shouldYield = deadline.timeRemaining() < 1 || hasHigherPriorityWork();
  }
  
  if (nextUnitOfWork) {
    // 还有工作，下次继续
    requestIdleCallback(workLoop);
  }
}

function performUnitOfWork(fiber) {
  // 开始处理这个Fiber
  beginWork(fiber);
  
  if (fiber.child) {
    return fiber.child; // 深度优先
  }
  
  let currentFiber = fiber;
  while (currentFiber) {
    completeWork(currentFiber);
    
    if (currentFiber.sibling) {
      return currentFiber.sibling; // 处理兄弟节点
    }
    
    currentFiber = currentFiber.return; // 回到父节点
  }
}

// 中断发生时，React保存当前进度
function beginWork(fiber) {
  // 检查是否应该中断
  if (shouldYieldToHigherPriority()) {
    // 保存当前状态，以便恢复
    saveProgress(fiber);
    return null; // 返回null表示中断
  }
  
  // ... 正常处理逻辑
}

1.3 打断的具体实现机制----优先级队列管理

class PriorityScheduler {
  constructor() {
    // 不同优先级的任务队列
    this.taskQueues = {
      immediate: [],
      userBlocking: [],
      normal: [],
      low: [],
      idle: []
    };
    
    this.currentPriority = 'normal';
    this.isWorking = false;
  }
  
  // 调度任务
  scheduleTask(priority, task) {
    this.taskQueues[priority].push(task);
    
    // 如果新任务优先级更高，中断当前工作
    if (this.getPriorityLevel(priority) > this.getPriorityLevel(this.currentPriority)) {
      this.interruptCurrentWork();
    }
    
    this.ensureWorkIsScheduled();
  }
  
  // 中断当前工作
  interruptCurrentWork() {
    if (this.isWorking) {
      // 1. 保存当前Fiber树的进度
      saveCurrentProgress();
      
      // 2. 标记需要重新开始
      this.needsRestart = true;
      
      // 3. 暂停当前工作循环
      this.isWorking = false;
    }
  }
  
  // 执行工作
  performWork() {
    this.isWorking = true;
    
    // 按优先级顺序执行任务
    const priorities = ['immediate', 'userBlocking', 'normal', 'low', 'idle'];
    
    for (const priority of priorities) {
      this.currentPriority = priority;
      const queue = this.taskQueues[priority];
      
      while (queue.length > 0 && !this.shouldYield()) {
        const task = queue.shift();
        task();
        
        // 检查是否有更高优先级任务到达
        if (this.hasHigherPriorityTask()) {
          this.interruptCurrentWork();
          return; // 中断当前循环
        }
      }
    }
    
    this.isWorking = false;
  }
}

1.4实际开发中的API startTransition：明确标记低优先级

import { startTransition } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  const handleSearch = (newQuery) => {
    // 输入框即时更新（高优先级）
    setQuery(newQuery);
    
    // 搜索结果延迟更新（低优先级）
    startTransition(() => {
      fetchResults(newQuery).then(setResults);
    });
  };
  
  return (
    <div>
      <input 
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
      />
      <ResultsList results={results} />
    </div>
  );
}

1.5实际开发中的API useDeferredValue：延迟派生值

import { useDeferredValue } from 'react';

function FilteredList({ items }) {
  const [filter, setFilter] = useState('');
  // deferredFilter会在高优先级更新后"滞后"更新
  const deferredFilter = useDeferredValue(filter);
  
  const filteredItems = items.filter(item =>
    item.includes(deferredFilter)
  );
  
  return (
    <div>
      <input
        value={filter}
        onChange={e => setFilter(e.target.value)}
      />
      {/* 列表渲染可能滞后于输入 */}
      <List items={filteredItems} />
    </div>
  );
}

二、复用：复用之前的工作

在React Fiber架构中，"复用之前的工作"指的是当被打断的渲染任务重新开始时，React能够恢复之前已经完成的部分工作，而不是从头开始。

一个现实比喻：

想象你正在读一本1000页的书：

• 没有复用：每次被打断（如接电话），你都要从第1页重新开始读

• 有复用：被打断时，你夹个书签；回来时，从书签处继续读

2.1 示例：状态计算的复用

function ExpensiveComponent({ userId }) {
  // 昂贵的数据计算
  const userData = useMemo(() => {
    console.log('计算userData...'); // 这个log只会在userId变化时打印
    return fetchAndProcessUserData(userId); // 假设耗时100ms
  }, [userId]);
  
  const analytics = useMemo(() => {
    console.log('计算analytics...');
    return calculateAnalytics(userData); // 假设耗时50ms
  }, [userData]);
  
  // 组件被打断时：
  // 1. 如果userId没变，userData会被复用（100ms节省）
  // 2. 如果userData没变，analytics会被复用（50ms节省）
  
  return <div>{analytics.summary}</div>;
}

// 使用示例
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        打断渲染的按钮
      </button>
      <ExpensiveComponent userId="123" />
    </div>
  );
}

2.2 Fiber节点如何实现工作复用？

Fiber节点的进度保存

class FiberNode {
  constructor(type) {
    this.type = type;
    
    // 工作进度标记
    this.tag = null;           // 标记当前节点类型
    this.stateNode = null;     // 关联的DOM/组件实例
    
    // 树结构
    this.child = null;         // 第一个子节点
    this.sibling = null;       // 下一个兄弟节点  
    this.return = null;        // 父节点
    
    // 🔥 关键：工作进度保存
    this.pendingProps = null;  // 新的props（等待应用）
    this.memoizedProps = null; // 上次渲染使用的props
    this.memoizedState = null; // 上次渲染使用的state
    this.updateQueue = null;   // 状态更新队列
    
    // 工作状态标记
    this.effectTag = null;     // 需要执行的副作用类型
    this.alternate = null;     // 🔥 指向旧Fiber，用于复用比较
  }
}

双缓存机制：复用之前Fiber树的关键

React同时维护两棵Fiber树：

• current：当前屏幕上显示内容对应的Fiber树

• workInProgress：正在构建的新Fiber树

当workInProgress树构建完成，直接切换指向，就完成了更新。这种技术保证了渲染的连续性。

// React同时维护两棵Fiber树
let currentTree = null;    // 当前屏幕上显示的Fiber树
let workInProgressTree = null; // 正在构建的新Fiber树

function beginWork(currentFiber) {
  if (!currentFiber) {
    // 首次渲染：创建新Fiber
    return createFiber(...);
  }
  
  // 🔥 关键复用逻辑：尝试复用现有Fiber
  if (canReuseFiber(currentFiber, newProps)) {
    // 复用之前的Fiber节点
    const reusedFiber = cloneFiber(currentFiber);
    reusedFiber.pendingProps = newProps;
    
    // 复用子节点树
    reusedFiber.child = reconcileChildren(
      reusedFiber,
      currentFiber.child, // 复用旧的子节点
      newChildren
    );
    
    return reusedFiber; // 🎉 直接复用，跳过重新创建
  }
  
  // 不能复用：创建新Fiber
  return createNewFiber(...);
}

// 判断能否复用的条件
function canReuseFiber(currentFiber, nextProps) {
  // 条件1：类型相同（相同的组件/元素类型）
  if (currentFiber.type !== nextProps.type) return false;
  
  // 条件2：key相同（列表项需要）
  if (currentFiber.key !== nextProps.key) return false;
  
  // 条件3：props没有破坏性变化
  if (hasDestructiveChange(currentFiber.memoizedProps, nextProps)) {
    return false;
  }
  
  return true; // 可以复用
}

2.3 React DevTools中的可视化

在React DevTools Profiler中，你可以看到：

• 灰色条：已完成的、被复用的工作（没有重新执行）

• 彩色条：新执行的工作

• 中断点处有明显的分割线

三、跳过：跳过不需要更新的子树

在React的渲染过程中，"跳过"指的是当组件树的一部分确定不需要更新时，React会完全跳过该部分及其所有子组件的渲染工作 。这不是简单的"不执行render函数"，而是根本不进入该部分的协调过程。

3.1 跳过的判断时机

// 简化的协调过程
function reconcileChildFibers(parentFiber, newChildElements) {
  // 1. 检查是否可以跳过整个子树
  if (shouldSkipSubtree(parentFiber, newChildElements)) {
    // 🔥 关键：直接复用整个子树，不进行深入协调
    return cloneChildFibers(parentFiber);
  }
  
  // 2. 否则正常协调
  return reconcileChildren(parentFiber, newChildElements);
}

// 判断是否跳过子树的函数
function shouldSkipSubtree(currentFiber, nextProps) {
  // 条件1：组件被标记为bailout（提前退出）
  if (currentFiber.flags & BailoutFlag) {
    return true;
  }
  
  // 条件2：props和state都没有变化
  if (!havePropsChanged(currentFiber, nextProps)) {
    return true;
  }
  
  // 条件3：使用React.memo且props浅比较通过
  if (currentFiber.type.$$typeof === REACT_MEMO_TYPE) {
    if (shallowEqual(currentFiber.memoizedProps, nextProps)) {
      return true;
    }
  }
  
  return false;
}

3.2 具体的跳过场景

// ✅ 使用React.memo包裹的组件
const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  // 这个组件的渲染非常昂贵
  console.log('渲染ExpensiveComponent...'); // 只有data变化时才会打印
  
  const result = expensiveCalculation(data); // 耗时操作
  
  return <div>{result}</div>;
});

// 父组件频繁更新，但data不变
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [data] = useState({ value: 42 }); // data引用稳定
  
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        更新计数: {count}
      </button>
      
      {/* data没变 → React跳过整个ExpensiveComponent的协调 */}
      <ExpensiveComponent data={data} />
      
      {/* 这个子组件会被重新协调 */}
      <ChildComponent count={count} />
    </div>
  );
}

跳过过程

点击按钮后：
1. ParentComponent重新渲染（因为count变化）
2. React开始协调ParentComponent的子节点
3. 遇到ExpensiveComponent → 检查props
4. 发现data的引用没变 → 浅比较通过
5. 🔥 标记跳过整个ExpensiveComponent子树
6. 不调用ExpensiveComponent的render函数
7. 不协调ExpensiveComponent的子节点
8. 直接复用之前的DOM

3.3 不同类型组件的跳过策略

Class组件的跳过（shouldComponentUpdate）

class OptimizedComponent extends React.Component {
  // 🔥 手动控制是否跳过
  shouldComponentUpdate(nextProps, nextState) {
    // 返回false → React跳过此组件及其整个子树
    if (this.props.value === nextProps.value) {
      return false; // 跳过！
    }
    return true;
  }
  
  render() {
    // 如果跳过，这个函数不会被调用
    return <ExpensiveSubtree />;
  }
}

函数组件的跳过（React.memo）

// 自定义比较函数
const DeepCompareComponent = React.memo(
  function Component({ data, onClick }) {
    return <div onClick={onClick}>{data.value}</div>;
  },
  // 🔥 自定义比较逻辑
  function areEqual(prevProps, nextProps) {
    // 深度比较data对象
    if (!deepEqual(prevProps.data, nextProps.data)) {
      return false;
    }
    
    // onClick函数引用比较
    if (prevProps.onClick !== nextProps.onClick) {
      return false;
    }
    
    return true; // true表示props相等，应该跳过
  }
);

3.4跳过与副作用（Effects）的关系

const SkippableComponent = React.memo(function Component({ id }) {
  console.log('组件渲染', id);
  
  // 🔥 useEffect的处理
  useEffect(() => {
    console.log('副作用执行', id);
    // 数据获取、订阅等
    
    return () => {
      console.log('清理副作用', id);
    };
  }, [id]); // 依赖数组
  
  // 🔥 useLayoutEffect的处理
  useLayoutEffect(() => {
    console.log('布局副作用', id);
  }, [id]);
  
  return <div>ID: {id}</div>;
});

// 使用
function Parent() {
  const [toggle, setToggle] = useState(false);
  
  return (
    <div>
      <button onClick={() => setToggle(!toggle)}>
        切换
      </button>
      
      {/* 当id不变且组件被跳过时： */}
      <SkippableComponent id="stable-id" />
    </div>
  );
}

// 当组件被跳过时：
// 1. render函数不执行 ✓
// 2. useEffect不执行 ✓（依赖没变）
// 3. useLayoutEffect不执行 ✓
// 4. 返回的JSX被复用 ✓

3.5跳过带来的性能收益

假设一个典型的应用结构：

// 组件树深度和宽度
const componentTree = {
  depth: 5,           // 平均深度5层
  breadth: 3,         // 平均每个组件3个子组件
  totalComponents: 1 + 3 + 9 + 27 + 81 = 121, // 总共121个组件
  avgRenderTime: 0.5, // 每个组件平均渲染时间0.5ms
};

// 没有跳过（每次全部渲染）：
const totalTime = 121 * 0.5 = 60.5ms

// 有跳过（假设80%的组件不需要更新）：
const updatedComponents = 121 * 0.2 = 24.2个
const skippedComponents = 121 * 0.8 = 96.8个

const timeWithSkip = 24.2 * 0.5 = 12.1ms
// 跳过协调的时间：96.8 * 0.5 = 48.4ms（节省！）

// 性能提升：(60.5 - 12.1) / 60.5 ≈ 80% 的渲染时间节省！

四、总结与思考

通过本文和《虚拟Dom到Diff算法》的解析，我们可以看到React的设计哲学和实现原理：

1. 虚拟DOM不是银弹：它在大规模更新时表现优异，但在小规模更新时可能不如直接操作DOM。理解这点有助于我们正确使用React。

2. Diff算法的智慧：通过启发式策略（层级比较、类型判断、Key优化），React在通用性和性能之间找到了平衡点。

3. 演进的方向 ：从Stack Reconciler到Fiber，再到并发渲染，React一直在解决前端开发的核心痛点------用户体验的流畅性。

4. 学习建议：理解React原理的最好方式不是死记硬背，而是：

   • 尝试手写简化版实现

   • 使用React DevTools观察组件渲染

   • 在实际项目中遇到性能问题时，运用原理知识进行分析

最后，记住React只是一个工具，真正重要的是用它构建出优秀的产品。理解原理可以帮助我们更好地使用工具，但不要陷入过度优化的陷阱。