如何在反应中迭代地渲染嵌套组件？答案

【问题标题】：How can I iteratively render nested components in react?如何在反应中迭代地渲染嵌套组件？
【发布时间】：2021-10-08 06:05:25
【问题描述】：

如何在 react 中迭代渲染嵌套组件？

（据我了解，递归在性能方面的成本更高？）

附：嵌套级别可以是无限的

例子：

"comments": [
                {
                    "name": "1comment",
                    "body": "1comment",
                    "date": "2019-05-15T15:56:15.694116Z",
                    "id": "0179ef41-fdb6-4700-a4dc-6d7bbc54385a",
                    "parent": null,
                    "reply": []
                },
                {
                    "name": "2comment",
                    "body": "2comment",
                    "date": "2019-05-17T13:59:51.167188Z",
                    "id": "1ef06878-58b5-48b0-9349-73986ab66bb4",
                    "parent": null,
                    "reply": [
                        {
                            "name": "2-1-comment",
                            "body": "2-1-comment",
                            "date": "2019-05-21T22:32:44.998207Z",
                            "id": "514aa634-08bd-4ca3-8a1a-eb10846808ed",
                            "parent": "5a01211d-3ee9-4bf6-9a50-462a8277898a",
                            "reply": [
                                {
                            "name": "2-1-1-comment",
                            "body": "2-1-1-comment",
                            "date": "2019-05-21T22:32:44.998207Z",
                            "id": "514aa634-08bd-4ca3-8a1a-eb10846808ed",
                            "parent": "5a01231d-3119-4bf6-9a50-462a8277898a",
                            "reply": []
                            }
                            ]
                        }
                    ]
                },
                {
                    "name": "3comment",
                    "body": "3comment",
                    "date": "2019-05-19T12:07:15.613266Z",
                    "id": "5a01231d-3ee9-4bf6-9a50-462a8277898a",
                    "parent": null,
                    "reply": [
                        {
                            "name": "3-1-comment",
                            "body": "3-1-comment",
                            "date": "2019-05-21T22:32:44.998207Z",
                            "id": "514aa634-08bd-4ca3-8a1a-eb10846808ed",
                            "parent": "5a01231d-3ee9-4bf6-9a50-462a8277198a",
                            "reply": []
                        }
                    ]
                }
]

【问题讨论】：

如果嵌套层数是无限的，那么你需要使用递归。对于这样简单的事情，性能不会有问题。
这棵树并不简单，但是有超过 5 层的嵌套，在 5 层之后，滞后和刹车开始，因为递归在性能方面的成本很高，迭代方法（通过堆栈）是资源密集度较低，问题是如何使用迭代方法将嵌套组件绘制到反应中

标签： javascript reactjs tree render

【解决方案1】：

基本原则是以某种方式存储当前元素的“路径”，然后

如果有小孩就推，
遍历当前列表，
如果当前列表完成则弹出。

例如stack = [ 2, 1, 3 ] 在您的情况下代表 element.reply[ 2 ].reply[ 1 ].reply[ 3 ]。

我相信您还必须存储每个路径的所有列表的长度（以便能够迭代每个级别），这可以直接存储在堆栈中，但这反过来又会使返回变得更加混乱需要时索引。

例如：

const stack = [ comments.length ];
while( stack.length > 0 ){

    // -- get current item by the "path" (i.e. by the stack)
    const currentItem = stack.reduce( (acc, value, index ) => {
        const list = index === 0 ? acc : acc.reply; // root or not root
        return list[ list.length - value ];
    },  comments);

    // --
    if( currentItem ){
        console.log( stack, currentItem && currentItem.name );
        if ( currentItem.reply && currentItem.reply.length > 0 ) {
            stack.push(currentItem.reply.length);  // level deeper
        } else {
            stack[stack.length - 1]--;  // next sibling
        }
    } else {
        stack.pop();                // level up
        stack[stack.length - 1]--;  // next sibling
    }
}

关于性能：

我想迭代方法仅对真正大量的数据才是必要的。对于“正常”数据，递归应该能够在内存中保持 5 甚至 50 层的结构。例如。对于深度嵌套的数百万 XML 行（不受限制，理论上无限），我使用过一次迭代方法。我想我仍然会使用递归。

提示：你是否使用像 acc = [ ...acc, item ] 这样的模式（这种模式在 React 中很常见）？这在数百或数千的规模上变得缓慢。那你可能想看看Is mutating accumulator in reduce function considered bad practice

【讨论】：