React：处理不相关组件重新渲染的最佳方法

Question

也许这是非常基本的，但我还有新的反应：

我希望有不同类型的组件 - （可能）彼此没有关系 - 在我的应用程序中更改一个特定值时重新呈现。我尝试了mobx的Provider商店，但当然我收到了警告，你不应该改变商店的价值。

所以例如

<RootElem>
   <SimpleComp1>
       .....
       <ReRenderMeOnRootElemStateChange1 />
       .....
   </SimpleComp1>

   <SimpleComp2>
       .....
       <ReRenderMeOnRootElemStateChange2 />
       .....
   </SimpleComp2>
</RootElem>

并且重新渲染的组件应该可以访问RootElem的新值/状态，以便它们可以根据这个新值进行更改。

最好的方法是什么？我应该在哪里存储我的可重复渲染的可观察值，以及如何让组件监听它，即使它们不是状态更改组件的子项？我没有＆＃39;想要将道具一直传递给每一个组件，这应该在更改可观察值时重新渲染：）

此外，我想知道你是否可以让一个组件听取另一个组件的更改，即使它们在组件树中没有关系（应用程序的根组件除外） ）。

谢谢！

Answer 1

React组件在接收新道具时默认自动重新渲染。因此，如果您只是通过props将<RootElem>中的值从组件树中传递下来，那么一切都应按预期工作，子组件将使用新值重新呈现。

您可以使用其shouldComponentUpdate挂钩来控制是否应该重新呈现特定组件。我要说的是，除非您尝试进行特定的性能优化，否则大部分时间您都不需要这样做。

您也可以使用context将新值传递给子组件，但通常不鼓励使用此方法，除非您有一些非常具体的用例并知道您正在做什么。