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

也许这是很基本的，但我还是个新手：

我希望有不同类型的组件（可能彼此没有关系），它们在更改应用程序中的一个特定值时重新呈现。我尝试了mobx的提供者存储，但当然我收到了警告，您不应该更改存储的值

比如说

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

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

.....
.....
.....
.....

并且重新呈现的组件应该具有对RootElem的新值/状态的访问权限，以便它们可以基于此新值进行更改

最好的方法是什么？我应该将重新渲染的可观察值存储在何处，如何让组件侦听它，即使它们不是状态更改组件的子组件？我不想把道具一直传递到每一个单独的组件，这些组件在改变可观察值时应该重新渲染：）

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

---

谢谢

React组件在收到新道具时默认自动重新渲染。因此，如果您只需通过道具将

中的值传递到组件树下，那么一切都应按预期工作，子组件将使用新值重新渲染

您可以通过使用特定组件的挂钩来控制该组件是否应重新渲染。我想说的是，大多数情况下，除非您试图进行特定的性能优化，否则您不会需要这个

---

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

伪代码将有助于更好地说明这一点。听起来您也没有正确地使用MobX。谢谢您的快速回答。问题是，我不想将道具一直传递到重新渲染的组件，因为它们可能位于组件树的第10层。因此，将特定的道具传递给所有受影响的组件对我来说似乎不太合适。我意识到将道具一路传递下去很烦人，但这就是“反应”方式。如前所述，您可以使用上下文来避免这种情况，但这是非常不鼓励的。我不熟悉MobX，但在Redux中，我认为类似于此，您可以使用

connect

函数包装较低级别的组件以接收应用程序状态。请注意，

connect

只是

context

的包装器。