React中如何非递归渲染树形结构？

本文介绍如何在React中，无需递归，迭代渲染树形结构数据。 示例树形数据结构如下：

const root = {
  value: "root",
  children: [
    {
      value: "child 1",
      children: [
        { value: "grandchild 1", children: [] },
        { value: "grandchild 2", children: [] },
      ],
    },
    {
      value: "child 2",
      children: [{ value: "grandchild 3", children: [] }],
    },
  ],
};

目标渲染效果：

<code>root
--child 1
----grandchild 1
----grandchild 2
--child 2
----grandchild 3</code>

关键在于使用迭代算法，例如广度优先搜索（BFS）。 我们使用队列存储待处理节点。 首先将根节点入队，然后循环处理队列中的节点直到队列为空。 每次迭代，取出队首节点，渲染其值，并将子节点入队。 为了表示层级，使用变量跟踪节点深度，并根据深度添加缩进。

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

下载

以下是一个React组件实现，利用BFS避免了递归：

import React, { useState, useEffect } from 'react';

function TreeComponent({ root }) {
  const [nodes, setNodes] = useState([]);

  useEffect(() => {
    const queue = [root];
    const nodesWithLevel = [];
    let level = 0;

    while (queue.length > 0) {
      const currentLevelNodes = [];
      const nextLevelQueue = [];

      for (let i = 0; i < queue.length; i++) {
        const node = queue[i];
        currentLevelNodes.push({ ...node, level });
        node.children.forEach(child => nextLevelQueue.push(child));
      }

      nodesWithLevel.push(...currentLevelNodes);
      queue = nextLevelQueue;
      level++;
    }
    setNodes(nodesWithLevel);
  }, [root]);

  return (
    <div>
      {nodes.map((node, index) => (
        <div key={index} style={{ marginLeft: `${node.level * 20}px` }}>
          {node.value}
        </div>
      ))}
    </div>
  );
}

export default TreeComponent;

此代码使用useEffect钩子在组件挂载时执行BFS，将节点及其层级信息存储在nodes状态中。 然后，组件渲染nodes数组，使用marginLeft样式根据节点层级创建缩进。 这避免了递归调用，实现了高效的树形结构渲染。 实际应用中，可以根据需求调整缩进方式和样式。