javascript - 更改全局变量时重新渲染 React 组件

Question

我尝试将旧的 AngularJS 1 应用程序迁移到 React 并遇到了一大堆问题……但其中最大的问题是让 React 重新渲染其组件。也许有人对我的具体问题有一个好主意。

现在的情况

我的应用程序包含一个非常庞大的基于规则的计算算法。想象一下一百个开关，当您切换一个时，它开始计算和检查规则，然后显示价格，其他开关可能会被禁用。当禁用的开关在被禁用之前打开时，会检查更多的规则等等......

所有数据和状态的存储都是 100% 在本地全局变量和数组中的。

在 AngularJS 中，所有开关都有很大的范围。这些开关通过 Angular 和相应的钩子（如“ng-click”或“ng-checked”）连接到全局存储变量。

反应迁移

现在在 React 中，我开始用 React 组件替换开关。但是因为我不想重新编写存储机制，所以我尝试将组件链接到相应的全局变量。问题是这些组件在全局变量更改后不会重新渲染（他们怎么知道的？）。

我阅读了很多关于 React 和重新渲染的内容，我的结论是自动重新渲染仅适用于在组件内部更改的道具或状态。另一种选择是使用 Flux 或通过将它们包装在 getter/setter 中来创建对全局存储的基于侦听器的访问，但遗憾的是，由于应用程序的大小以及逻辑和 ui 函数严格分离的事实，这是不可能的逻辑功能仅由本机 JS 组成，通过 Java Nashorn 处理它。

结论

现在我只看到 2 个选项

• 完成所有计算后强制重新渲染所有容器（不鼓励像 EVERYWHERE 一样）
• 使用另一个更像 AngularJS 的框架，比如 vue.js（至少乍一看）

也许这里的任何人都知道另一种将全局变量挂钩到 React 组件中的方法......

标签： javascriptangularjsreactjs

Answer 1

使用redux。Redux 是一个用于管理应用程序状态的开源 JavaScript 库。