React+Mobx可复用子组件：是否应传递父Store至子组件？

你提到的直接传递父Store给子组件的做法，确实不是Mobx+React生态中的最佳实践——它会让子组件和父Store的具体结构强绑定，导致你担心的问题：所有调用该子组件的父组件都必须拥有完全相同的变量名，严重降低子组件的复用性。

下面我会分享几种更合理的方案，按解耦程度从高到低排序，你可以根据自己的场景选择：

方案1：Props传递具体的Observable/Computed值（最推荐） #

核心思路是：父组件从自己的Store中提取子组件需要的具体值，作为props传递给子组件。子组件完全不依赖父Store的结构，只关心传入的props接口。

优点： #

• 子组件完全独立，复用性拉满——任何父组件只要能提供符合props类型的值（不管来自Store、状态还是常量）都能使用它
• 代码更清晰，子组件的依赖一目了然
• 完全避免了Store之间的耦合

示例代码： #

// 父组件
import { observer } from 'mobx-react-lite';
import ChildWidget from './ChildWidget';

const ParentComponent = observer(() => {
  const parentStore = useParentStore(); // 假设你通过hooks或Context获取父Store

  return (
    <ChildWidget
      // 从父Store提取子组件需要的具体值
      userName={parentStore.currentUser.name}
      unreadCount={parentStore.notifications.unreadCount}
    />
  );
});

// 子组件
import { observer } from 'mobx-react-lite';

// 明确子组件需要的props类型
type ChildWidgetProps = {
  userName: string;
  unreadCount: number;
};

const ChildWidget = observer(({ userName, unreadCount }: ChildWidgetProps) => {
  return (
    <div className="child-widget">
      <h3>Welcome, {userName}!</h3>
      <span className="badge">{unreadCount} unread messages</span>
    </div>
  );
});

方案2：基于接口的Store组合（适合子Store需要和父Store交互的场景） #

如果子组件的独立Store需要主动和父Store交互（比如调用父Store的action，或者监听父Store的变化），可以让子Store接收一个符合特定接口的父Store实例，而不是具体的父Store类。

优点： #

• 子Store只依赖接口，不依赖父Store的具体实现，只要其他父Store满足接口要求就能复用
• 可以在子Store中封装和父Store的交互逻辑，子组件无需关心细节

示例代码： #

// 定义子Store需要的父Store接口
interface IParentStore {
  currentUser: { name: string };
  markNotificationsAsRead: () => void; // 父Store的action
}

// 子Store
class ChildStore {
  private parentStore: IParentStore;

  // 构造函数接收符合接口的父Store实例
  constructor(parentStore: IParentStore) {
    this.parentStore = parentStore;
  }

  // 子Store的computed值，依赖父Store
  get greeting() {
    return `Hello, ${this.parentStore.currentUser.name}!`;
  }

  // 子Store的action，调用父Store的action
  clearUnread() {
    this.parentStore.markNotificationsAsRead();
  }
}

// 父组件中创建子Store
const ParentComponent = observer(() => {
  const parentStore = useParentStore(); // 父Store实现了IParentStore接口
  // 用useMemo避免重复创建子Store
  const childStore = useMemo(() => new ChildStore(parentStore), [parentStore]);

  return <ChildWidget store={childStore} />;
});

方案3：局部Context注入（适合多个子组件共享父Store部分数据） #

如果你的组件树中有多个子组件都需要父Store的相同部分，可以用React Context创建局部上下文，父组件在上下文里提供子组件需要的数据/方法，子组件通过useContext获取。

优点： #

• 避免了层层传递props的繁琐（俗称“props drilling”）
• 子组件依然只依赖上下文提供的接口，不依赖父Store的具体结构

示例代码： #

// 创建局部Context
import { createContext, useContext } from 'react';

type ChildContextType = {
  userName: string;
  onClearUnread: () => void;
};

const ChildContext = createContext<ChildContextType | undefined>(undefined);

// 父组件作为Context提供者
const ParentComponent = observer(() => {
  const parentStore = useParentStore();

  const contextValue = {
    userName: parentStore.currentUser.name,
    onClearUnread: parentStore.markNotificationsAsRead,
  };

  return (
    <ChildContext.Provider value={contextValue}>
      <ChildWidgetA />
      <ChildWidgetB />
    </ChildContext.Provider>
  );
});

// 子组件使用Context
const ChildWidgetA = observer(() => {
  const context = useContext(ChildContext);
  if (!context) throw new Error('ChildWidgetA must be used within ChildContext.Provider');

  return <h3>Welcome, {context.userName}!</h3>;
});

为什么不推荐直接传递父Store？ #

直接把整个父Store传给子组件会带来以下问题：

• 强耦合：子组件依赖父Store的具体变量名和结构，一旦父Store修改，所有使用该子组件的地方都要改
• 复用性差：其他父组件如果没有完全相同的Store结构，就无法复用这个子组件
• 代码不清晰：子组件的依赖隐藏在对父Store的调用中，维护者很难快速知道子组件到底需要父Store的哪些部分

内容的提问来源于stack exchange，提问作者Sveta