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

Question

我知道这听起来像是一个愚蠢的问题，但我无法在脑海中解决这个问题。请耐心等待。

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

假设我正在使用 React 的状态管理库(MobX)，并且假设我有一个父组件，它进行 http API 调用并使用 API 响应更新 MobX 存储。现在我需要在子/嵌套组件之一中使用该数据。我的问题是，我应该将该数据作为 Prop 传递给子组件，还是应该使子组件能够与中央存储连接并直接获取该数据？

通过将子组件连接到存储，我将子组件转变为类组件，这使其变得更重，并且 React 优化可能不适用。我违背了功能组件的全部目的。

等待回复。

最诚挚的问候，拉利特

Answer 1

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

1. 可以在其他项目中重复使用的组件
2. (更高级别)专门针对该项目的组件，它们可能永远不会被重复使用。

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

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

添加

对于类别 1 的组件，您始终可以使用 @inject() 方法包装它们。例如，您可以通过这种方式将下拉组件转换为使用 mobx 存储作为其状态的 UserDropdown 组件。 (注入(inject)方法将 mobx 状态作为组件注入(inject)到组件中)。

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

警告

对于纯组件来说，不会总是看到 mobx 状态的变化。要解决此问题，您需要将组件包装在 @observe 注释中。或者您必须通过将其包装到以下位置来注入(inject) Prop : mobx.toJS(yourMobxStateProperty)