深入解析React Fiber架构与Hooks实现原理-代码聚汇网

深入解析React Fiber架构与Hooks实现原理

金宇澄·2026-08-23·阅读 21 GEO检测（免费）

ReactFiber架构Hooks

|难度：普通|阅读约 23 分钟

1. 为什么我们需要理解 React 的底层架构？

在当今前端开发领域，React 已经成为构建用户界面的首选框架之一。但很多开发者在使用 React 时，往往停留在 API 调用的层面，对底层实现机制知之甚少。这种"黑盒"式的开发方式，在遇到性能瓶颈或复杂场景时，常常让开发者束手无策。

Fiber 架构是 React 16 引入的全新协调算法实现，它彻底改变了 React 的渲染机制。理解 Fiber 架构不仅能帮助我们写出性能更好的 React 应用，还能深入理解 React 的设计哲学。而 Hooks 作为 React 16.8 引入的革命性特性，改变了我们组织组件逻辑的方式，但它的实现原理与 Fiber 架构密不可分。

提示：本文将从零开始构建一个简化版的 React 实现，重点解析 Fiber 架构和 Hooks 的工作机制。通过这个过程，你将获得对 React 内部工作原理的深刻理解，而不仅仅是停留在 API 使用层面。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 从虚拟 DOM 到 Fiber 架构的演进

2.1 传统虚拟 DOM 的局限性

在 Fiber 架构之前，React 使用的是基于堆栈的协调算法。这种算法在递归处理组件树时存在几个关键问题：

不可中断的渲染过程：一旦开始渲染，就必须完成整个组件树的处理，这可能导致主线程长时间被占用，影响用户交互的响应性。
缺乏优先级调度：所有更新都被同等对待，无法区分高优先级（如用户输入）和低优先级（如数据加载）的更新。
递归调用的限制：深度嵌套的组件可能导致调用栈溢出，特别是在处理大型应用时。

javascript复制// 传统的递归式虚拟DOM diff算法
function reconcile(oldNode, newNode) {
  // 比较节点类型
  if (oldNode.type !== newNode.type) {
    // 类型不同，直接替换
    return replaceNode(oldNode, newNode);
  }
  
  // 更新属性
  updateProperties(oldNode, newNode);
  
  // 递归处理子节点
  for (let i = 0; i < newNode.children.length; i++) {
    reconcile(oldNode.children[i], newNode.children[i]);
  }
}

2.2 Fiber 架构的核心设计

Fiber 架构通过引入以下概念解决了上述问题：

增量渲染：将渲染工作分割成小的任务单元，可以在浏览器空闲时执行，避免长时间占用主线程。
优先级调度：不同类型的更新可以分配不同的优先级，确保用户交互等高优先级任务能够及时响应。
链表结构：将组件树转换为链表结构，使得渲染过程可以被暂停、恢复或中止。

javascript复制// Fiber节点的基本结构
const fiber = {
  tag: HOST_COMPONENT, // 节点类型（函数组件、类组件、宿主组件等）
  type: 'div',        // DOM节点的类型
  parent: null,       // 父Fiber
  child: null,        // 第一个子Fiber
  sibling: null,      // 下一个兄弟Fiber
  alternate: null,    // 上一次渲染的Fiber
  stateNode: null,    // 对应的真实DOM节点
  props: {},          // 属性
  partialState: null, // 组件状态更新
  effectTag: PLACEMENT, // 副作用标记（插入、更新、删除等）
  nextEffect: null    // 下一个有副作用的Fiber
};

2.3 Fiber 的工作循环

Fiber 架构的核心是一个工作循环，它负责调度和执行渲染任务：

requestIdleCallback：利用浏览器的空闲时段执行渲染任务。
任务分片：将渲染工作分成小的任务单元。
时间切片：每个任务单元执行时间有限，确保不阻塞用户交互。

javascript复制// 简化的Fiber工作循环
function workLoop(deadline) {
  let shouldYield = false;
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    shouldYield = deadline.timeRemaining() < 1;
  }
  
  if (!nextUnitOfWork && wipRoot) {
    commitRoot();
  }
  
  requestIdleCallback(workLoop);
}

requestIdleCallback(workLoop);

3. 实现简化的 Fiber 渲染器

3.1 创建 DOM 元素

首先，我们需要实现创建真实 DOM 元素的功能：

javascript复制function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === 'object' 
          ? child 
          : createTextElement(child)
      ),
    },
  };
}

function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: [],
    },
  };
}

3.2 渲染函数与 Fiber 树的构建

接下来是实现渲染函数，它将启动整个渲染过程：

javascript复制function render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element],
    },
    alternate: currentRoot,
  };
  deletions = [];
  nextUnitOfWork = wipRoot;
}

let nextUnitOfWork = null;
let currentRoot = null;
let wipRoot = null;
let deletions = null;

3.3 执行单元工作

每个 Fiber 节点都是一个工作单元，performUnitOfWork 函数负责处理当前节点并返回下一个要处理的节点：

javascript复制function performUnitOfWork(fiber) {
  // 1. 创建DOM节点（如果需要）
  if (!fiber.dom) {
    fiber.dom = createDom(fiber);
  }
  
  // 2. 协调子元素
  const elements = fiber.props.children;
  reconcileChildren(fiber, elements);
  
  // 3. 返回下一个工作单元
  if (fiber.child) {
    return fiber.child;
  }
  let nextFiber = fiber;
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling;
    }
    nextFiber = nextFiber.parent;
  }
}

3.4 协调子节点

reconcileChildren 函数负责比较新旧 Fiber 节点，决定是复用、更新还是替换：

javascript复制function reconcileChildren(wipFiber, elements) {
  let index = 0;
  let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
  let prevSibling = null;
  
  while (index < elements.length || oldFiber != null) {
    const element = elements[index];
    let newFiber = null;
    
    // 比较新旧Fiber
    const sameType = oldFiber && element && element.type == oldFiber.type;
    
    if (sameType) {
      // 类型相同，更新属性
      newFiber = {
        type: oldFiber.type,
        props: element.props,
        dom: oldFiber.dom,
        parent: wipFiber,
        alternate: oldFiber,
        effectTag: 'UPDATE',
      };
    }
    
    if (element && !sameType) {
      // 类型不同，创建新节点
      newFiber = {
        type: element.type,
        props: element.props,
        dom: null,
        parent: wipFiber,
        alternate: null,
        effectTag: 'PLACEMENT',
      };
    }
    
    if (oldFiber && !sameType) {
      // 删除旧节点
      oldFiber.effectTag = 'DELETION';
      deletions.push(oldFiber);
    }
    
    // 移动指针
    if (oldFiber) {
      oldFiber = oldFiber.sibling;
    }
    
    // 构建Fiber链表
    if (index === 0) {
      wipFiber.child = newFiber;
    } else if (element) {
      prevSibling.sibling = newFiber;
    }
    
    prevSibling = newFiber;
    index++;
  }
}

4. Hooks 的实现原理

4.1 Hooks 的基本概念

Hooks 允许我们在函数组件中使用状态和其他 React 特性。要实现 Hooks，我们需要理解几个关键点：

Hooks 调用顺序必须稳定：这就是为什么不能在条件或循环中调用 Hooks。
Hooks 状态存储在 Fiber 节点上：每个组件实例对应的 Fiber 节点保存了它的 Hooks 状态。
Hooks 队列：多个状态更新会被排队并按顺序处理。

javascript复制// 简化的useState实现
let hookIndex = null;
let wipFiber = null;

function useState(initial) {
  const oldHook =
    wipFiber.alternate &&
    wipFiber.alternate.hooks &&
    wipFiber.alternate.hooks[hookIndex];
  
  const hook = {
    state: oldHook ? oldHook.state : initial,
    queue: [],
  };
  
  // 应用队列中的更新
  const actions = oldHook ? oldHook.queue : [];
  actions.forEach(action => {
    hook.state = action(hook.state);
  });
  
  const setState = action => {
    hook.queue.push(action);
    wipRoot = {
      dom: currentRoot.dom,
      props: currentRoot.props,
      alternate: currentRoot,
    };
    nextUnitOfWork = wipRoot;
    deletions = [];
  };
  
  wipFiber.hooks.push(hook);
  hookIndex++;
  return [hook.state, setState];
}

4.2 在渲染流程中集成 Hooks

为了支持 Hooks，我们需要修改渲染流程：

javascript复制function updateFunctionComponent(fiber) {
  wipFiber = fiber;
  hookIndex = 0;
  wipFiber.hooks = [];
  const children = [fiber.type(fiber.props)];
  reconcileChildren(fiber, children);
}

function performUnitOfWork(fiber) {
  const isFunctionComponent = fiber.type instanceof Function;
  
  if (isFunctionComponent) {
    updateFunctionComponent(fiber);
  } else {
    updateHostComponent(fiber);
  }
  
  // 返回下一个工作单元...
}

4.3 useEffect 的实现原理

useEffect 的实现比 useState 更复杂，因为它需要处理副作用和清理函数：

javascript复制function useEffect(callback, deps) {
  const oldHook =
    wipFiber.alternate &&
    wipFiber.alternate.hooks &&
    wipFiber.alternate.hooks[hookIndex];
  
  const hasChangedDeps = oldHook
    ? !deps.every((dep, i) => dep === oldHook.deps[i])
    : true;
  
  const hook = {
    callback: hasChangedDeps ? callback : oldHook.callback,
    deps,
    cleanup: oldHook ? oldHook.cleanup : null,
  };
  
  wipFiber.hooks.push(hook);
  hookIndex++;
  
  // 在commit阶段执行effect
  if (hasChangedDeps) {
    wipFiber.effectTag = 'EFFECT';
  }
}

5. 提交阶段与副作用处理

5.1 commitRoot 实现

当所有渲染工作完成后，我们需要将变更提交到 DOM：

javascript复制function commitRoot() {
  deletions.forEach(commitWork);
  commitWork(wipRoot.child);
  currentRoot = wipRoot;
  wipRoot = null;
}

function commitWork(fiber) {
  if (!fiber) return;
  
  let domParentFiber = fiber.parent;
  while (!domParentFiber.dom) {
    domParentFiber = domParentFiber.parent;
  }
  const domParent = domParentFiber.dom;
  
  if (fiber.effectTag === 'PLACEMENT' && fiber.dom != null) {
    domParent.appendChild(fiber.dom);
  } else if (fiber.effectTag === 'UPDATE' && fiber.dom != null) {
    updateDom(
      fiber.dom,
      fiber.alternate.props,
      fiber.props
    );
  } else if (fiber.effectTag === 'DELETION') {
    commitDeletion(fiber, domParent);
  } else if (fiber.effectTag === 'EFFECT') {
    // 执行useEffect的清理函数
    if (fiber.alternate && fiber.alternate.hooks) {
      const oldEffects = fiber.alternate.hooks
        .filter(hook => hook.cleanup);
      oldEffects.forEach(effect => effect.cleanup());
    }
    // 执行新的effect
    fiber.hooks.forEach(hook => {
      if (hook.callback) {
        hook.cleanup = hook.callback();
      }
    });
  }
  
  commitWork(fiber.child);
  commitWork(fiber.sibling);
}

5.2 DOM 属性更新

updateDom 函数负责处理 DOM 属性的更新：

javascript复制function updateDom(dom, prevProps, nextProps) {
  // 移除旧的属性
  Object.keys(prevProps)
    .filter(isProperty)
    .filter(key => !(key in nextProps))
    .forEach(name => {
      dom[name] = '';
    });
  
  // 设置新的属性
  Object.keys(nextProps)
    .filter(isProperty)
    .filter(key => prevProps[key] !== nextProps[key])
    .forEach(name => {
      dom[name] = nextProps[name];
    });
  
  // 处理事件监听器
  Object.keys(prevProps)
    .filter(isEvent)
    .filter(key => !(key in nextProps) || prevProps[key] !== nextProps[key])
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.removeEventListener(eventType, prevProps[name]);
    });
  
  Object.keys(nextProps)
    .filter(isEvent)
    .filter(key => prevProps[key] !== nextProps[key])
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.addEventListener(eventType, nextProps[name]);
    });
}

6. 性能优化与边界情况处理

6.1 时间切片与任务优先级

在实际的 React 实现中，Fiber 架构支持多种优先级的任务调度：

javascript复制const NoPriority = 0;
const ImmediatePriority = 1;
const UserBlockingPriority = 2;
const NormalPriority = 3;
const LowPriority = 4;
const IdlePriority = 5;

function scheduleTask(priority, callback) {
  switch (priority) {
    case ImmediatePriority:
      // 同步执行
      callback();
      break;
    case UserBlockingPriority:
      // 使用setTimeout(0)
      setTimeout(callback, 0);
      break;
    case NormalPriority:
    case LowPriority:
      // 使用requestIdleCallback
      requestIdleCallback(callback);
      break;
    case IdlePriority:
      // 最低优先级
      requestIdleCallback(callback, { timeout: 1000 });
      break;
  }
}

6.2 错误边界与组件卸载

在简化实现中，我们还需要考虑错误处理和组件卸载：

javascript复制function commitDeletion(fiber, domParent) {
  if (fiber.dom) {
    domParent.removeChild(fiber.dom);
  } else {
    // 处理函数组件
    commitDeletion(fiber.child, domParent);
  }
  
  // 执行卸载生命周期和effect清理
  if (fiber.hooks) {
    fiber.hooks.forEach(hook => {
      if (hook.cleanup) {
        hook.cleanup();
      }
    });
  }
}

6.3 并发模式与 Suspense

虽然我们的简化实现不包含完整的并发模式支持，但可以模拟基本的 Suspense 行为：

javascript复制function createResource(promise) {
  let status = 'pending';
  let result;
  
  const suspender = promise.then(
    r => {
      status = 'success';
      result = r;
    },
    e => {
      status = 'error';
      result = e;
    }
  );
  
  return {
    read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    }
  };
}

function useSuspense(promise) {
  const resource = useMemo(() => createResource(promise), [promise]);
  return resource.read();
}

7. 从零构建的完整示例

现在，让我们将这些部分组合起来，创建一个完整的、简化版的 React 实现：

javascript复制// 完整的微型React实现
const MiniReact = {
  createElement,
  render,
  useState,
  useEffect,
};

// 示例应用
function Counter() {
  const [count, setCount] = MiniReact.useState(0);
  const [text, setText] = MiniReact.useState('');
  
  MiniReact.useEffect(() => {
    console.log('Effect ran:', count);
    return () => console.log('Cleanup:', count);
  }, [count]);
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <input 
        value={text} 
        onInput={e => setText(e.target.value)} 
        placeholder="Type something..."
      />
      <p>You typed: {text}</p>
    </div>
  );
}

// 渲染应用
const container = document.getElementById('root');
MiniReact.render(<Counter />, container);

这个简化实现包含了 React 的核心机制：Fiber 架构的增量渲染、Hooks 的状态管理、以及基本的副作用处理。虽然它缺少许多生产环境需要的功能（如上下文、refs、更复杂的调度器等），但它展示了 React 内部工作原理的关键部分。

注意：在实际项目中，你应该始终使用官方的 React 实现。这个简化版本仅用于教育目的，帮助你理解 React 的内部机制。