Vue、React 和原生 JavaScript 实现递归组件的三种方式详解递归是编程中处理树形结构的常用技巧，在前端开

递归是编程中处理树形结构的常用技巧，在前端开发中常用于渲染无限级菜单、组织结构图等场景。本文将通过 Vue、React 和原生 JavaScript 三种技术方案，详细讲解递归组件的实现方式。

一、Vue 实现递归组件

核心原理

在 Vue 中实现递归组件，需要给组件指定 name 属性，并在模板中直接引用自身。

代码实现

<template>
  <div class="node">
    {{ node.name }}
    <div v-if="node.children" class="children">
      <TreeNode 
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode', // 必须声明组件名称
  props: {
    node: {
      type: Object,
      required: true
    }
  }
}
</script>

<style>
.node {
  margin-left: 20px;
  border-left: 1px solid #ccc;
  padding: 5px;
}
</style>

使用示例

<TreeNode :node="{ 
  id: 1, 
  name: 'Root',
  children: [
    { id: 2, name: 'Child 1' },
    { id: 3, 
      name: 'Child 2',
      children: [{ id: 4, name: 'Grandchild' }]
    }
  ]
}"/>

特点分析

必须声明 name 属性才能递归调用
通过 props 传递当前节点数据
使用条件渲染 v-if 控制递归终止

二、React 实现递归组件

核心原理

React 函数组件可以直接在 JSX 中调用自身实现递归。

代码实现


function TreeNode({ node }) {
  return (
    <div className="node">
      {node.name}
      {node.children?.map(child => (
        <TreeNode 
          key={child.id}
          node={child}
        />
      ))}
    </div>
  );
}

// 使用方式
<TreeNode node={{
  id: 1,
  name: 'Root',
  children: [
    { id: 2, name: 'Child 1' },
    { id: 3, 
      name: 'Child 2',
      children: [{ id: 4, name: 'Grandchild' }]
    }
  ]
}} />

优化技巧

使用可选链操作符 ?. 处理可能不存在的 children
通过 key 属性提升渲染性能
添加样式控制缩进：

.node {
  margin-left: 20px;
  border-left: 2px solid #eee;
  padding-left: 10px;
}

三、原生 JavaScript 实现递归

核心原理

通过 DOM API 操作直接创建元素节点，递归构建嵌套结构。

function createTree(node, parentElement) {
  const div = document.createElement('div');
  div.className = 'node';
  div.textContent = node.name;

  if (node.children) {
    const childrenContainer = document.createElement('div');
    childrenContainer.className = 'children';
    node.children.forEach(child => {
      createTree(child, childrenContainer);
    });
    div.appendChild(childrenContainer);
  }

  parentElement.appendChild(div);
}

// 使用示例
const data = {
  name: 'Root',
  children: [
    { name: 'Child 1' },
    { 
      name: 'Child 2',
      children: [{ name: 'Grandchild' }]
    }
  ]
};

const container = document.getElementById('app');
createTree(data, container);

.node {
  margin-left: 20px;
  padding: 5px;
  border-left: 1px solid #999;
}

.children {
  margin-top: 5px;
}

三种方案对比分析

特性	Vue	React	原生 JS
实现方式	模板递归	函数自调用	DOM 操作递归
数据驱动	✅ 自动响应式更新	✅ 状态驱动	❌ 手动更新
组件系统	✅ 完整组件生态	✅ 函数组件	❌ 无组件概念
代码复杂度	中等	简单	较高
性能优化	自动缓存	memoization	手动优化
适用场景	复杂应用	现代前端项目	简单页面/学习

递归开发注意事项

终止条件：必须明确递归结束条件（如没有 children）
性能优化：深层递归需考虑虚拟滚动、记忆化等技术
唯一标识：列表渲染必须提供唯一的 key
栈溢出：控制递归深度（通常不超过 1000 层）
数据校验：使用 PropTypes/TypeScript 确保数据结构正确

通过三种方案的对比，开发者可以根据项目需求选择合适的实现方式。Vue/React 的方案更适合现代前端工程化项目，而原生 JS 的实现有助于理解底层原理。递归组件的合理使用可以大大简化树形结构的渲染逻辑。