如何在React

Question

为这个长期待解决的问题表示歉意，但我想不出一种简单的方法来问这个问题！

我正在构建一个React应用程序，出于这个问题，它的功能类似于弹球机。打个比方，用户的光标就像银球一样-当它在系统中移动时，会触发许多不同的灯光来打开和关闭。

我的UI主要是SVG，我有许多组件想用作“指示灯”。为了简单起见，我们可以将每个光源都视为SVG circle元素，当该光源打开时其不透明度为1，而当该光源关闭时的不透明度为0（有时也介于两者之间）。当光标悬停在大多数指示灯上时，它们会亮起（然后在光标离开后逐渐消失）。然后，其他时候用户将执行某些操作，从而触发许多灯的一系列复杂行为。例如，我可能想让某些类型的灯光缓慢地脉动，并一致地淡入淡出。或者我可能想让一圈灯快速地依次闪烁一次。

对于这些多光源行为，我需要从我的应用程序的顶层对光源进行一些控制。但是在整个应用程序中，有数十种灯非常深地嵌套在DOM树的不同分支中。甚至会根据树上方的组件的渲染输出来创建和销毁某些灯光。这种深层的嵌套和动态创建使我很难想象将所有灯光的状态存储在应用程序的顶层。

这就是我想象中的实现方式（但我无法完全连接所有点）。

1. 灯光会根据我在其他组件中的放置位置进行渲染。
2. 每盏灯将是一个类，并管理其自己的开/关状态。在该类中，它还将具有诸如turnOn()，turnOff()，startPulsing()，flashOnce()之类的函数-但它本身不会调用这些函数。
3. 某种单数的“照明控制器”将存在于应用程序的顶层，并通过上下文传递register(...)，unregister(...)和dispatch(...)函数。
4. 安装每个灯时，它将向控制器“注册”自身，进而告诉控制器它属于哪些类别的灯，并且它将通过引用传递给自身。控制器将存储一系列活动光源以及该参考和每种光源的那些类别。每个灯在卸载前也会自行“注销”。
5. 应用程序中的任何组件都可以从照明控制器调用dispatch(...)方法，有效地说出诸如“打开与outer类匹配的所有照明灯”之类的内容。然后，控制器将过滤其灯光阵列以匹配类，并为每个灯光调用turnOn()函数。

我几乎可以使它正常工作，但是在第4步中遇到了麻烦，因为当安装灯​​时，还没有安装应用程序的顶层。

总的来说，我的方法似乎并不完全符合React的最佳实践。我以“命令式”的方式思考，而React以“声明式”的方式运行。所以也许我会把整个事情都弄错！我很乐意提供有关如何全部设置的建议。如果您认为Redux或MobX具有明显的优势，则可以使用。感谢您的阅读！