React中是否有比Context API更优的原生依赖注入+状态管理方案？

问题根源 #

你遇到的重渲染问题根源是将多个服务实例都放在同一个Context的value中，任意服务的状态变更都会导致Context的value引用变化，触发所有消费该Context的组件重渲染。以下是两种无额外依赖、保留原有开发习惯的解决方案：

方案1：拆分单服务Context（最简便，推荐优先使用） #

完全不需要修改你现有的服务Hook逻辑，只需要把不同的服务拆分为独立的Context即可，只有消费了对应服务的组件才会被对应服务的变更触发重渲染。
实现示例：

1. 为每个服务创建独立Context

// 计数器服务Context
export const CounterContext = React.createContext<ICounterService>({} as any);
// 消息服务Context
export const MessengerContext = React.createContext<IMessengerService>({} as any);

2. 调整Provider层嵌套逻辑

export const Screen = () => {
  const counterService = useCounter();
  const messengerService = useMessager();

  return (
    <CounterContext.Provider value={counterService}>
      <MessengerContext.Provider value={messengerService}>
        <Counter />
        <Messager />
      </MessengerContext.Provider>
    </CounterContext.Provider>
  );
};

3. 组件按需消费对应Context
   比如Counter组件仅消费CounterContext，Messager组件仅消费MessengerContext，两者的状态变更完全互不影响。

方案2：实现带选择器的自定义Context（适合服务数量多、不想嵌套多Provider的场景） #

通过发布订阅模式封装Context，组件仅订阅自己需要的服务分片，只有对应分片变更时才会触发重渲染，完全原生实现无额外依赖。
实现示例：

1. 定义Context结构和Provider

type ScreenContextType = {
  counterService: ICounterService;
  messengerService: IMessengerService;
};

type ServiceStore = {
  get: () => ScreenContextType;
  subscribe: (callback: () => void) => () => void;
};

export const ScreenContext = React.createContext<ServiceStore>({} as any);

export const ScreenProvider = ({ children }) => {
  const counterService = useCounter();
  const messengerService = useMessager();
  const storeRef = useRef({ counterService, messengerService });
  const subscribers = useRef(new Set<() => void>());

  // 服务变更时更新存储并通知订阅者
  useEffect(() => {
    storeRef.current = { counterService, messengerService };
    subscribers.current.forEach((cb) => cb());
  }, [counterService, messengerService]);

  // store引用永久不变，不会主动触发全量重渲染
  const store = useMemo(
    () => ({
      get: () => storeRef.current,
      subscribe: (cb) => {
        subscribers.current.add(cb);
        return () => subscribers.current.delete(cb);
      },
    }),
    []
  );

  return (
    <ScreenContext.Provider value={store}>{children}</ScreenContext.Provider>
  );
};

2. 实现自定义选择器Hook

function useServiceSelector<T>(selector: (store: ScreenContextType) => T) {
  const store = useContext(ScreenContext);
  const [selectedState, setSelectedState] = useState(() =>
    selector(store.get())
  );

  useEffect(() => {
    return store.subscribe(() => {
      const newState = selector(store.get());
      // 仅选中的内容真的发生变化时才更新组件
      if (!Object.is(newState, selectedState)) {
        setSelectedState(newState);
      }
    });
  }, [store, selector, selectedState]);

  return selectedState;
}

3. 组件按需消费

// Counter组件仅订阅计数器服务
const Counter = () => {
  const counterService = useServiceSelector((store) => store.counterService);
  return <div onClick={counterService.increment}>{counterService.counter}</div>;
};

此时messengerService发生变更时，Counter组件的选择器返回结果不变，不会触发重渲染。

额外优化建议 #

如果某个服务仅需要在单个组件内部使用，不需要跨组件共享实例，可以直接在组件内部调用对应服务Hook，不需要通过Context传递，进一步减少Context的依赖层级和重渲染风险。

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