Javascript 反应本机全局值重新加载程序

我是个新手。来自javascript背景，我想实现一些技巧，在不引入太多代码的情况下重新命名共享全局值

假设我有多个组件，它们共享相同的全局值

{global.count}

<代码>{global.count}应在一个位置更改时自动更新。我读了很多关于

hooks

、

context

、

redux

的书，但所有这些都太多太繁琐，难以实现。至少，它不像我打算用普通javascript更新值那样简单

我所期望的是，一旦我在任何地方更新了值，它将“足够聪明”重新提交所有这些组件值（无论它在屏幕上是可见的）

下面是我所拥有的组件的图示。 我所期望的是，每当我在任何地方设置/分配新值到

global.count=5

，它就会自动更新/重新加载所有相关组件（在可见区域），而不需要任何额外的代码

可见区域：用户看到的区域。这意味着它将在BottomNavigator中更新，因为它对用户始终可见，但ComponentB在它可见之前不会重新加载（这是可选的）

我相信这是一件可以让生活更轻松的事情，但我找不到这么简单的“黑客”。如果之前有人研究过此类解决方案，请予以感谢

<GlobalStore key="global" storage="AsyncStorage">
   <Navigator />
</GlobalStore>

//Visible currently
<ComponentA global={global.count}>

</ComponentA>

//Not Visible currently (will auto update and rerender once user enter the screen with this component)
<ComponentB global={global.count}>

</ComponentA>

// Always visible
<BottomNavigator>
   <Tab1 global={global.count}></Tab1>
</BottomNavigator>

//当前可见
//当前不可见（一旦用户使用此组件进入屏幕，将自动更新并重新加载）
//始终可见

React将不会重新渲染，除非该变量（值）处于状态。您必须使用、状态、上下文、redux或任何其他状态管理系统。

这让我想起了angular1的$scope和它的双向绑定，正如angulars的创建者在v2发布后指出的那样，这是一个可怕的想法。