如何解决更改全局变量时重新渲染React组件
我尝试将旧的AngularJS 1应用程序迁移到React并遇到了很多问题……但是最大的问题是让React重新渲染其组件。也许有人对我的特定问题有个好主意。
现状
我的应用程序包含一个非常庞大的基于规则的计算算法。想象一下有一百个开关，当您切换一个开关时，它将开始计算和检查规则，然后显示价格，其他开关可能会被禁用。在禁用前打开禁用的开关时，还会检查更多规则，依此类推...
所有数据和状态的存储都是本地全局变量和数组的100％。
在AngularJS中，所有开关都有很大的范围。这些开关通过Angular和相应的钩子（例如“ ng-click”或“ ng-checked”）钩在了全局存储变量上。
反应迁移
现在在React中，我开始用React Compontents替换开关。但是因为我不想重写存储机制，所以我尝试将组件链接到相应的全局变量。 问题在于，在更改了全局变量后，这些组件不会重新渲染（以及它们的了解程度如何？）。
我了解了很多有关React和重新渲染的知识，我的结论是，自动重新渲染仅适用于在组件内部更改的道具或状态。 另一种选择是使用Flux或通过将它们包装在getter / setter中来创建对全局存储的基于侦听器的访问，但是可悲的是，由于应用程序的大小以及逻辑和ui函数严格分开的事实，这是不可能的逻辑功能仅由本机JS组成，可通过Java Nashorn对其进行处理。
结论
现在我只看到2个选项
- 在完成所有计算后（如不建议任何人那样劝阻），强行重新渲染所有Container
- 使用其他类似AngularJS的框架，例如vue.js（至少乍一看）
也许这里的任何人都知道另一种将全局变量挂接到React组件中的方法...
解决方法
使用redux。 Redux是用于管理应用程序状态的开源JavaScript库。
,您可以在Redux中建立一个特殊的基于Flux的数据层（例如），并通过redux-observable将其连接到您的困难数据层。（例如）
反应 Redux 数据层
这将有助于使用所有React功能，而不会在每次单击时重新呈现所有UI。
使用您的数据层，就像REST api或网络套接字连接一样。 Redux状态可以等于数据层状态，或更紧凑，或更易于React连接，这取决于您。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。