本文介绍一种非递归方法，在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>
核心算法：我们将节点压入栈中，然后依次弹出并渲染，同时将子节点也压入栈中。 循环持续直到栈为空，表示所有节点都已处理。
以下是一个React组件的实现示例：
import React from 'react';
function renderTree(root) {
const stack = [root];
const result = [];
let indent = "";
while (stack.length > 0) {
const node = stack.pop();
result.push(<div key={node.value}>{indent}{node.value}</div>); // 添加key属性
// 确保children属性存在，避免报错
const children = node.children || [];
children.forEach(child => {
stack.push({...child, parent: node}); // 添加parent属性，方便后续操作(可选)
});
indent += "--";
}
return result;
}
const App = () => {
return (
<div>
{renderTree(root)}
</div>
);
};
export default App;
renderTree 函数使用一个栈来遍历树形结构。 indent 变量控制缩进，模拟树的层次结构。 每个节点都用一个 <div> 渲染，并添加了 <code>key 属性以提高React性能。 我们还添加了对 node.children 的空值检查，以及可选的 parent 属性，方便后续需要父节点信息的操作。 这个非递归方法有效地避免了递归调用，提高了代码的可读性和可维护性，同时避免了潜在的栈溢出风险。
