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

我知道这听起来像一个愚蠢的问题，但我无法在头脑中解决这个问题。请容忍我

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

比方说，我正在使用状态管理库（MobX）来进行React，假设我有一个父组件，该组件进行httpapi调用，并使用API响应更新MobX存储。现在，我需要在其中一个子/嵌套组件中使用该数据。 我的问题是，我应该将该数据作为道具传递给子组件，还是应该让子组件连接到中央存储并直接获取该数据

通过将子级连接到存储，我将子级转换为一个类组件，这会使它变得更重，并且可能无法应用React优化。我正在挫败功能组件的全部目的

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

等待答复

致以最良好的祝愿，

---

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

可在其他项目中重复使用的组件

（更高级别）特定于此项目的组件，可能永远不会重复使用

对于类别1的组件，我建议不要直接使用mobx store，而是制作纯react组件。（例如，考虑一个下拉列表，或者一个ajax下拉组件）

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

附加 对于类别1的组件，始终可以使用

@inject（）

方法包装它们。例如，通过这种方式，您可以将下拉组件转换为使用mobx存储作为其状态的UserDropdown组件。（inject方法将mobx状态作为props注入组件中）

constUserDropDownComponent=mobx.inject（stores=>（{users:stores.userStore.users}））（DropDownComponent）；
//用法：

警告

---

对于纯组件，通常不会看到mobx状态的变化。要解决此问题，您需要将组件包装在

@observe

注释中。或者，您必须将这些道具包装到：

mobx.toJS（您的mobxstateproperty）

您不必担心性能。这两种方法之间的差异可以忽略不计。这更多的是一个品味的问题，但是如果您的组件完全依赖于提供给它的

道具

，那么与直接依赖于全局存储相比，使其可重用要容易得多。非常感谢您的回复。非常感谢。还有一个问题，我在mobx中看到过，父组件将存储传递给子组件，同时子组件有一个可观察的装饰器。在这种情况下，如果父级可以通过道具传递数据，为什么我们需要在子级上使用观测者装饰器呢？

观测者装饰器确保在上次渲染中引用的
观测者
发生更改时，重新渲染组件。例如，如果您向下传递
myStore
，并且它在呈现方法中引用了
myStore.value
，则当
myStore.value
发生更改时，它将自动重新呈现。如果没有
observer
decorator，它将不会。但是父组件也是同一个存储的可观察变量，如果父组件也观察相同的可观察变量，它也将在存储状态更改时重新渲染，从而导致子组件以更新状态作为道具重新渲染。“可观察的装饰者”在这里也有意义吗？我建议阅读以获得彻底的解释。