你能在没有 Redux 或 Flux 的情况下处理这个例子中的状态吗?如果可以,你会怎么做?

Can you handle state in this example without Redux or Flux, and if so how would you go about doing it?

假设我有一个计时器结构,以便您可以一次查看多个项目并为其计时,并且在每个项目中您可以查看多个任务并为其计时。由于这是一个计时器,您一次只能为一项任务计时,因此一次只能为一个项目计时。

由于这些限制,我将计时器分为三个独立的结构:

只有 TimerContainerProjectContainer 保持状态。


TimerContainer:

TimerContainer 对任务一无所知,但它执行初始 API 调用以使用起始值为所有项目和任务播种。 TimerContainer 还关注哪个项目当前正在跟踪时间(即保存当前正在计时的项目的 projectID 值)。


项目容器:

每个 ProjectContainer 都包含有关当前正在计时的任务(如果有的话)的信息,并更新(在此处和通过 API 调用)每个任务所花费的时间他们完成计时后的任务。 那时它通知 TimerContainer 它(那个项目)不再计时。

作为道具,TimerContainerProjectContainer 提供当前跟踪的项目 ID、任务列表及其种子值,以及各种项目信息.


这是我的问题: 如果我更新 TimerContainer's "Currently Tracking ProjectID" value, it will trigger a re-rendering of all the ProjectContainers, including the one that just updated one of its tasks' 次。在我看来,除非我为该特定任务更新 TimerContainer 中保存的(现在是静态的)种子信息,否则它似乎会恢复到该任务的原始种子值。

如果我这样做,这让我觉得我必须使用同一个调用为种子信息和当前跟踪的 projectID 设置状态,因为如果我按顺序进行,我不确定它是否会进入第二个状态更改请求。

如果这确实是一个问题(请随意说),我想它可以通过 Redux 或 Flux 来缓解,但是鉴于已经建立的架构,我想看看是否有干净的处理方式这无需先引入另一个库。


最重要的是,如何在没有另一个库的情况下彻底解决这个问题?



更新:

似乎我对重新渲染影响状态初始化的方式感到困惑(即,它没有)。我修改了下面亚当的例子来向自己证明 (link here )

实现之后,我的问题的解决方案就变成了编写一个函数来处理每个 ProjectContainers.[=12 上的 "Currently Tracking ProjectID" 道具值更改=]

要实现的另一件事是 shouldComponentUpdate 功能(再次感谢),方法是检查 ProjectID 是否与 ProjectContainer.

相关

组件 re-rendering 不应导致该组件丢失其内部状态。这是一个 example: 子组件 re-renders 因为父组件改变状态并传递给子组件新的道具,但子组件保持其自己的内部状态。

就一般的设计选项而言,有很多。以下是一些我会考虑的:

  • Re-rendering 性能下降,因此考虑为子组件自定义 shouldComponentUpdate 函数以防止它们重新渲染
  • 尽量让子组件成为无状态或者纯的
  • 考虑不在父组件中保留 "seed" 值 - 不确定了解初始值是否有价值,但如果您只是将其传递给子组件,它们可以存储并递增该值

但总的来说,听起来您可能会从商店中受益。能够将状态组织与功能分开可能会有所帮助。