从零实现React函数组件支持：核心原理与实现过程

背景与目标

在React开发中，函数组件因其简洁性广受欢迎。本文将手把手实现React框架对函数组件的支持，揭示其核心运行原理。通过实现函数组件渲染、props传递和多组件支持，深入理解虚拟DOM和协调机制。

---

一、函数组件的初步支持

1.1 问题现象

当我们尝试渲染函数组件时，控制台报错：

function Counter() {
  return <div>count</div>
}
// 报错：无法将函数作为DOM类型创建

1.2 核心解决思路

• 类型判断：在虚拟DOM处理阶段识别函数组件类型
• 组件展开：通过执行函数获取实际子节点

function performWorkOfUnit(fiber) {
  const isFunctionComponent = typeof fiber.type === 'function'
  const children = isFunctionComponent 
    ? [fiber.type(fiber.props)] 
    : fiber.props.children
}

---

二、DOM树处理机制

2.1 无DOM节点的处理

函数组件本身没有DOM节点，需要在提交阶段向上查找有效父节点：

function commitWork(fiber) {
  let fiberParent = fiber.parent
  // 循环查找有效DOM父节点
  while(!fiberParent.dom) {
    fiberParent = fiberParent.parent
  }
  if(fiber.dom) {
    fiberParent.dom.append(fiber.dom)
  }
}

2.2 多级嵌套组件支持

通过循环向上查找机制，可支持任意层级的组件嵌套：

function Parent() {
  return <Child />
}

---

三、Props处理与内容渲染

3.1 Props传递实现

通过函数参数传递props对象：

const children = fiber.type(fiber.props)

3.2 文本节点增强

支持数字类型子节点的渲染处理：

function createElement(type, props, ...children) {
  children.map(child => {
    const isTextNode = typeof child === "string" || typeof child === "number"
    return isTextNode ? createTextNode(child) : child
  })
}

---

四、同级多组件渲染支持

4.1 兄弟节点遍历算法

通过循环查找兄弟节点和父级节点，实现完整DOM树构建：

function getNextFiber(fiber) {
  let nextFiber = fiber
  while(nextFiber) {
    if(nextFiber.sibling) return nextFiber.sibling
    nextFiber = nextFiber.parent
  }
}

---

实现效果验证

function App() {
  return (
    <div>
      <Counter num={10} />
      <Counter num={20} />
    </div>
  )
}

成功渲染两个计数器组件，分别显示"count: 10"和"count: 20"。

---

总结与启示

通过四个关键步骤实现函数组件支持：1）类型判断执行组件函数获取子节点；2）DOM查找机制处理无容器组件；3）完善props传递和文本处理；4）兄弟节点遍历算法。核心启示：组件本质是返回虚拟DOM的函数，框架需要递归处理组件树，通过协调算法构建完整DOM结构。该实现方案仅需200行代码，却完整呈现了React核心设计思想，对理解现代前端框架原理具有重要参考价值。