javascript - React 原生全局值重新渲染

Question

我是 react / react native 新手。来自 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>

Answer 1

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