javascript - 快速访问json树数据结构

Question

我有一个包含树数据结构的减速器（总共超过 100_000 个项目）。这是数据的样子

[
    {
        text: 'A',
        expanded: false,
        items:
        [
            {
                text: 'AA',
                expanded: false
            },
            {
                text: 'AB',
                expanded: false,
                items:
                [
                    {
                        text: 'ABA',
                        expanded: false,
                    },
                    {
                        text: 'ABB',
                        expanded: false,
                    }
                ]
            }
        ]
    },
    {
        text: 'B',
        expanded: false,
        items:
        [
            {
                text: 'BA',
                expanded: false
            },
            {
                text: 'BB',
                expanded: false
            }
        ]
    }
]

我需要做的是使用文本作为 id 快速访问这些项目（每次用户单击树视图中的项目时都需要切换扩展）。我应该将整个结构复制到字典中还是有更好的方法？

标签： javascriptreactjsreduxredux-toolkit

Answer 1

我认为您可能意味着处理扩展更改的成本非常高（因为您可能关闭/打开具有 100000 个叶子的节点，然后通知 100000 个 UI 项）。

然而，这让我担心，因为我希望只存在扩展的 UI 项（例如，你没有隐藏所有的 React 元素，每个都坐在那里并监视 Redux 选择器，以防它的树的一部分变得可见）。

只要元素在不展开时不存在，那么为什么除了它的直接父级之外的任何东西都知道扩展的状态，并且如果它也在屏幕上，只有父级知道呢？

我建议扩展状态应该是例如 React 状态而不是 Redux 状态。如果它们在屏幕上，那么它们会被展开，可选地，它们的子元素会被展开（在父 UI 元素中作为状态保持），如果它们不在屏幕上，它们就不存在。