React Context API实现Pub/Sub模式存在性能问题求助

云上老周

2026-7-9

问题分析与解决方案

首先明确：React Context完全可以高效实现Pub/Sub模式，你的性能问题是写法导致的，不是API本身的局限。

为什么当前代码会触发全量重渲染？

你现在的Context里存的是一个全局event对象，每次调用createEvent都会更新这个event。而所有LikeButton组件都通过useContext(MyEventContext)消费了整个Context，一旦Context的状态更新，所有消费它的组件都会无条件重渲染——哪怕这个event的itemId和组件自身的itemId完全无关，这就是你看到100个组件都执行的原因。

如何优化？

给出几个可行的优化方向，按实现复杂度排序：

1. 用细粒度状态+React.memo优化组件重渲染

把全局状态改成存储所有item的点赞状态（比如一个{ [itemId]: boolean }的对象），而不是单次事件。然后用React.memo包裹LikeButton，让组件只在itemId或自身isLiked变化时重渲染。

修改后的示例代码：

// 定义Context时存储状态对象和更新方法
const MyEventContext = createContext({
  likedStates: {},
  toggleLike: (itemId) => {}
});

// 父组件提供Context
function LikeProvider({ children }) {
  const [likedStates, setLikedStates] = useState({});
  
  const toggleLike = (itemId) => {
    setLikedStates(prev => ({
      ...prev,
      [itemId]: !prev[itemId]
    }));
  };

  return (
    <MyEventContext.Provider value={{ likedStates, toggleLike }}>
      {children}
    </MyEventContext.Provider>
  );
}

// 优化后的LikeButton
const LikeButton = React.memo(({ itemId }) => {
  const { likedStates, toggleLike } = useContext(MyEventContext);
  const isLiked = likedStates[itemId] || false;

  const handleClick = () => {
    toggleLike(itemId);
  };

  console.log(`Rendering item ${itemId}`); // 只会在自身isLiked变化时打印

  return (
    <div>
      {isLiked ? 'liked' : ''}
      <button onClick={handleClick}>点赞</button>
    </div>
  );
});

这里的核心是：React.memo会浅比较组件的props，只有当itemId变化或者likedStates[itemId]变化时，组件才会重渲染——而likedStates是对象，每次更新时只有对应itemId的属性变化，配合React.memo就能避免无关组件重渲染。

2. 实现自定义订阅机制（更贴近Pub/Sub）

如果坚持用事件触发的模式，可以在Context里提供订阅、取消订阅的方法，让组件只订阅自己关心的itemId事件。这样只有订阅了对应itemId的组件才会收到更新通知，其他组件完全不会触发重渲染。

示例思路：

const MyEventContext = createContext({
  subscribe: (itemId, callback) => () => {}, // 返回取消订阅的函数
  publish: (itemId, isLiked) => {}
});

function EventProvider({ children }) {
  // 存储订阅者：key是itemId，value是回调函数数组
  const subscribers = useRef({});

  const subscribe = (itemId, callback) => {
    if (!subscribers.current[itemId]) {
      subscribers.current[itemId] = [];
    }
    subscribers.current[itemId].push(callback);

    // 返回取消订阅函数，组件卸载时调用
    return () => {
      subscribers.current[itemId] = subscribers.current[itemId].filter(cb => cb !== callback);
    };
  };

  const publish = (itemId, isLiked) => {
    const callbacks = subscribers.current[itemId] || [];
    callbacks.forEach(cb => cb(isLiked));
  };

  return (
    <MyEventContext.Provider value={{ subscribe, publish }}>
      {children}
    </MyEventContext.Provider>
  );
}

// 使用的LikeButton
const LikeButton = ({ itemId }) => {
  const { subscribe, publish } = useContext(MyEventContext);
  const [isLiked, setIsLiked] = useState(false);

  useEffect(() => {
    // 订阅当前itemId的事件
    const unsubscribe = subscribe(itemId, (newIsLiked) => {
      setIsLiked(newIsLiked);
    });
    return unsubscribe; // 组件卸载时取消订阅
  }, [itemId, subscribe]);

  const handleClick = () => {
    publish(itemId, !isLiked);
  };

  console.log(`Rendering item ${itemId}`); // 只有订阅的itemId触发事件时才会打印

  return (
    <div>
      {isLiked ? 'liked' : ''}
      <button onClick={handleClick}>点赞</button>
    </div>
  );
};

这种模式是更纯粹的Pub/Sub，组件只关心自己订阅的事件，完全不会因为其他item的事件触发重渲染，性能最优。

3. 拆分Context（适合复杂场景）

如果你的全局状态不止点赞这一块，可以把点赞相关的状态单独拆成一个独立的Context，这样其他不关心点赞的组件不会被这个Context的更新影响。不过这个方案更多是代码组织层面的优化，配合前两种方案效果更好。

额外注意点

原代码里按钮用了onPress，React中web端按钮的点击事件应该是onClick，onPress是React Native的写法。
原代码中useState()没有初始值，会导致初始isLiked是undefined，建议设为false。

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