React中全局共享回调函数的最佳实践是什么？

下面是几种无需依赖状态管理工具、适合共享回调的实用方案：

1. React Context 专用上下文 #

专门创建一个Context来存放回调，遵循React数据流规则，是最推荐的方案。

实现步骤： #

首先创建上下文文件：

// ScrollContext.tsx
import { createContext, useContext, ReactNode } from 'react';

type ScrollContextType = {
  scrollToComponent?: () => void;
};

const ScrollContext = createContext<ScrollContextType>({});

export const ScrollProvider = ({ children }: { children: ReactNode }) => {
  return <ScrollContext.Provider value={{}}>{children}</ScrollContext.Provider>;
};

export const useScrollContext = () => useContext(ScrollContext);

在生成回调的组件中注入上下文：

// 父/根组件
import { useRef, useCallback } from 'react';
import { ScrollProvider, useScrollContext } from './ScrollContext';
import { useVisibilityHandler } from './useVisibilityHandler';
import Header from './Header';

const ParentComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollToComponent } = useVisibilityHandler(ref);
  
  // 用useCallback保持引用稳定，避免不必要的重渲染
  const stableScrollTo = useCallback(scrollToComponent, [scrollToComponent]);

  return (
    <ScrollProvider value={{ scrollToComponent: stableScrollTo }}>
      <Header />
      <div ref={ref}>目标组件</div>
    </ScrollProvider>
  );
};

在Header组件中获取回调：

// Header.tsx
import { useScrollContext } from './ScrollContext';

const Header = () => {
  const { scrollToComponent } = useScrollContext();

  return (
    <button onClick={() => scrollToComponent?.()}>滚动到目标组件</button>
  );
};

优点：完全符合React设计模式，回调更新时自动同步，数据流清晰可追踪。

2. 全局Ref容器 #

创建一个全局单例Ref存储回调，适合简单场景，实现成本极低。

实现步骤： #

定义全局Ref：

// globalScrollRef.ts
const globalScrollRef = { current: null as (() => void) | null };

export const useGlobalScrollRef = () => {
  return globalScrollRef;
};

在生成回调的组件中赋值：

// 目标组件所在父组件
import { useRef, useEffect } from 'react';
import { useVisibilityHandler } from './useVisibilityHandler';
import { useGlobalScrollRef } from './globalScrollRef';

const ParentComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollToComponent } = useVisibilityHandler(ref);
  const globalRef = useGlobalScrollRef();

  useEffect(() => {
    globalRef.current = scrollToComponent;
    // 组件卸载时清空，避免内存泄漏
    return () => {
      globalRef.current = null;
    };
  }, [scrollToComponent, globalRef]);

  return <div ref={ref}>目标组件</div>;
};

在Header组件中调用：

// Header.tsx
import { useGlobalScrollRef } from './globalScrollRef';

const Header = () => {
  const globalRef = useGlobalScrollRef();

  return (
    <button onClick={() => globalRef.current?.()}>滚动到目标组件</button>
  );
};

注意：仅适合单实例场景，多实例下会出现回调覆盖问题。

3. 事件订阅模式（发布/订阅） #

通过事件总线解耦组件，适合跨层级、无直接关联的组件共享回调。

实现步骤： #

创建事件总线：

// scrollEventBus.ts
type ScrollEventHandler = () => void;

const handlers = new Set<ScrollEventHandler>();

export const scrollEventBus = {
  subscribe: (handler: ScrollEventHandler) => {
    handlers.add(handler);
    return () => handlers.delete(handler); // 返回取消订阅函数
  },
  trigger: () => {
    handlers.forEach(handler => handler());
  }
};

在生成回调的组件中订阅事件：

// 父组件
import { useRef, useEffect } from 'react';
import { useVisibilityHandler } from './useVisibilityHandler';
import { scrollEventBus } from './scrollEventBus';

const ParentComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollToComponent } = useVisibilityHandler(ref);

  useEffect(() => {
    const unsubscribe = scrollEventBus.subscribe(scrollToComponent);
    return unsubscribe;
  }, [scrollToComponent]);

  return <div ref={ref}>目标组件</div>;
};

在Header组件中触发事件：

// Header.tsx
import { scrollEventBus } from './scrollEventBus';

const Header = () => {
  return (
    <button onClick={() => scrollEventBus.trigger()}>滚动到目标组件</button>
  );
};

优点：组件完全解耦，无需知道彼此存在；但要注意及时取消订阅，避免内存泄漏。

方案选择建议 #

• 优先用React Context，符合React生态设计，数据流清晰；
• 简单场景选全局Ref容器，快速实现；
• 复杂跨组件场景用事件订阅模式，解耦性强。

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