基于Django REST Framework与React的父子关系树形UI方案咨询

问题背景 #

我有一个带父子关系的样本表：

需要在React UI中展示为树形结构，纠结两种实现方案：

1. 从API获取扁平格式数据，前端重构为树形：

[
    {
        "id": 1,
        "parent": null
    },
    {
        "id": 2,
        "parent": 1
    },
    {
        "id": 3,
        "parent": 2
    },
    {
        "id": 4,
        "parent": null
    }
]

2. 让Django REST Framework的API直接返回预构建的树形结构：

[
    {
        "id": 1,
        "parent": null,
        "children": [
            {
                "id": 2,
                "parent": 1,
                "children": [
                    {
                        "id": 3,
                        "parent": 2,
                        "children": []
                    }
                ]
            }
        ]
    },
    {
        "id": 4,
        "parent": null,
        "children": []
    }
]

如果选第二种方案，怎么高效实现且避免重复条目？技术栈为Django REST Framework和React。

方案对比与最优选择 #

方案1：前端重构树形结构 #

• 优势：API实现极简，仅需返回基础扁平数据；前端可灵活控制树形生成逻辑，按需展开/加载子节点时更便捷；后端无需处理复杂递归，性能开销低（数据量小时）。
• 劣势：数据量极大时，前端循环构建树形会占用过多浏览器资源，易导致页面卡顿；频繁操作树形结构时，重复构建会增加前端负担。

方案2：后端返回预构建树形结构 #

• 优势：前端直接使用数据，减少前端计算逻辑，开发更省心；数据量大、层级深时，后端（配合数据库优化）处理效率优于前端；统一树形生成逻辑，避免前后端结构不一致。
• 劣势：API实现相对复杂，需处理树形构建逻辑；后续调整树形结构时，前后端可能同步修改；深层级结构下，不合理的查询方式会带来性能问题，需针对性优化。

选择建议：

• 数据量小（数百条以内）：优先选前端重构，开发速度更快。
• 数据量大、层级深或需统一树形规则：选后端返回预构建树形，降低前端压力。

后端高效实现树形结构（避免重复条目） #

核心思路是一次性查询所有数据+字典映射，避免递归查询数据库（递归查询会多次访问数据库，效率极低），确保每个节点仅被处理一次，不会出现重复条目。

代码实现 #

from rest_framework.views import APIView
from rest_framework.response import Response
from .models import YourModel  # 替换为你的模型类

class TreeDataView(APIView):
    def get(self, request):
        # 一次性查询所有节点数据，减少数据库IO
        all_nodes = YourModel.objects.all().values('id', 'parent')
        
        # 构建节点映射表：key为节点id，value为带children字段的节点对象
        node_map = {}
        root_nodes = []
        
        # 第一步：初始化所有节点，添加children字段
        for node in all_nodes:
            node_id = node['id']
            node_map[node_id] = {**node, 'children': []}
        
        # 第二步：将子节点挂载到对应父节点下
        for node in all_nodes:
            parent_id = node['parent']
            node_id = node['id']
            current_node = node_map[node_id]
            
            if parent_id is None:
                # 父节点为null，作为根节点
                root_nodes.append(current_node)
            else:
                # 找到父节点并挂载子节点（通过映射表O(1)查找）
                if parent_id in node_map:
                    node_map[parent_id]['children'].append(current_node)
        
        return Response(root_nodes)

关键优化点 #

• 一次性查询：避免递归ORM查询，大幅减少数据库访问次数。
• 字典映射：通过节点id快速定位父节点，树形构建时间复杂度为O(n)，每个节点仅被处理一次，从根源避免重复条目。
• 引用挂载：子节点直接引用映射表中的对象，不会生成重复实例。

可选数据库优化 #

给parent字段添加索引，加速数据查询：

class YourModel(models.Model):
    parent = models.ForeignKey(
        'self', 
        on_delete=models.CASCADE, 
        null=True, 
        blank=True, 
        related_name='children',
        db_index=True  # 添加索引
    )
    # 其他字段...

前端React树形渲染示例 #

无论采用哪种方案，前端渲染逻辑类似，这里用递归组件实现：

import React, { useState } from 'react';

const TreeItem = ({ node }) => {
    const [isExpanded, setIsExpanded] = useState(false);

    const toggleExpand = () => setIsExpanded(!isExpanded);

    return (
        <div style={{ marginLeft: 24 }}>
            <div onClick={toggleExpand} style={{ cursor: 'pointer' }}>
                {node.children.length > 0 ? (isExpanded ? '▼' : '▶') : ''}
                节点ID: {node.id}
            </div>
            {isExpanded && node.children.map(child => (
                <TreeItem key={child.id} node={child} />
            ))}
        </div>
    );
};

const TreeView = ({ treeData }) => {
    return (
        <div className="tree-container">
            {treeData.map(rootNode => (
                <TreeItem key={rootNode.id} node={rootNode} />
            ))}
        </div>
    );
};

export default TreeView;

内容的提问来源于stack exchange，提问作者Groot