深层级对象如何进行状态管理?

2019-12-04 10:34:50 +08:00
 xiaoming1992

我的整个页面根据一个层级比较深的对象(结构如下)渲染而成的,且在渲染"G"的时候可能还会用到"H"中的数据,整个状态管理被我搞崩了,现在的方法是类似于全局变量一样,整个数据对象处于根组件 App 中,哪个组件需要用到哪些东西,就从根对象中解构出所需的变量和所需的 setState,等到有多个组件用到了相似的数据再考虑合并。

现在的问题是,状态管理几近于无,需要数据 /setState 的时候就设一个 React hooks,根组件页面也比较庞大(五六百行,虽然都是功能彼此隔离的小的 useEffect 堆叠而成,但页面终归还是很丑),我能怎么办呢?

{
  "a": [
    {
      "c": [
        {
          "e": [
            {
              "G": [
                100, 200
              ]
            }
          ]
        }
      ]
    }
  ],
  "b": [
    {
      "d": [
        {
          "f": [
            {
              "H": [
                111, 222
              ]
            }
          ]
        }
      ]
    }
  ]
}
1067 次点击
所在节点    程序员
2 条回复
maichael
2019-12-04 11:40:44 +08:00
xiaoming1992
2019-12-04 17:02:30 +08:00
@maichael 我的树形关系,父子之间的联系都是有意义的,不适合变更父子关系。。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/625767

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX