0

我是反应/反应本机的新手。来自 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>
4

1 回答 1

1

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

于 2019-12-13T10:48:12.083 回答