反应本地全球价值重新呈现

Question

我是新来的本地人。来自javascript背景，我想实现一些在不引入过多代码的情况下重新呈现共享的全球价值的技巧。

假设我有多个组件，并且它们共享相同的全局值{global.count}。当一个地方改变时，{global.count}应该自动更新。我读到很多关于hooks，context，redux的内容，但是所有这些都太复杂了，难以实现。至少，它不像我打算在纯JavaScript中更新值那样简单。

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

下面是我所拥有的组件的说明。 我期望的是，无论何时何地将global.count = 5设置/分配新值，它都将在所有相关组件（可见区域）中自动更新/呈现，而无需任何其他代码。

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

我相信这可以使生活更轻松，但是我找不到如此简单的“ hack”。感谢以前是否有人从事过这种解决方案。

<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>

Answer 1

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