Redux / MobX - 我是否需要通过React中的props传递子组件中的数据？

Posted 2021-05-05

我知道这可能听起来像一个愚蠢的问题，但我无法解决这个问题。请多多包涵。

如果我们在React中使用状态管理系统（如Redux / Mob X），我想这些状态管理技术的主要目的是提供单一的数据源和更加结构化的更新方法。

说，我正在使用状态管理库（MobX）进行React，并假设我有一个父组件，它进行http API调用并使用API​​响应更新MobX存储。现在我需要其中一个子/嵌套组件中的数据。我的问题是，我应该将该数据作为支持传递给子组件，还是应该启用子组件与Central Store连接并直接获取该数据？

通过将孩子连接到商店，我将Child变成了一个类组件，这使得它变得更加沉重，并且React优化可能不适用。我正在打败功能组件的整个目的。

等待回复。

最诚挚的问候，拉利特

答案

这完全取决于具体情况。我建议将您的组件分为两部分：

1. 可以在其他项目中重复使用的组件
2. （更高级别）对于此项目特定的组件，它们可能永远不会被重复使用。

对于类别1的组件，我建议不要直接使用mobx存储，而是使用纯反应组件。 （例如，考虑下拉列表或ajax下拉组件）。

对于第二部分组件（想想，页眉，页脚，特定于您的网站的部分组件）。只需让它们直接与Mobx商店进行交互，这样您就可以更快地编写您需要的代码（而不是不断地支持所有内容）。

加成

对于类别1的组件，您始终可以使用@inject()方法对其进行包装。例如，您可以将下拉组件转换为UserDropdown组件，该组件将mobx存储用于其状态。 （inject方法将mobx状态注入组件中的props）。

const UserDropDownComponent = mobx.inject(stores => ({users: stores.userStore.users}))(DropDownComponent);
// usage:
<UserDropDownComponent />

警告

对于纯组件，不会总是看到mobx状态的变化。要修复此问题，您需要将组件包装在@observe注释中。或者你必须通过将它包装成：mobx.toJS(yourMobxStateProperty)来注入道具