Context选择器：避免不必要渲染的终极方案

用useSyncExternalStore实现细粒度Context订阅，告别useContext全局重渲染 · 难度：入门 · +10XP

打造高性能上下文系统

原生useContext在context值变化时会强制所有消费者重渲染。本教程教你使用useSyncExternalStore + 发布订阅模式构建可选择的Context。每个消费者通过selector只订阅关心的字段，其他字段变化不会触发更新。代码实现类似Zustand的selector机制。

function createSelectiveContext() {
  const store = createStore({ count: 0, text: '' });
  
  function useSelector(selector) {
    const state = useSyncExternalStore(
      store.subscribe,
      () => store.getState()
    );
    return selector(state);
  }
  
  return { useSelector, store };
}
const { useSelector, store } = createSelectiveContext();
function CountDisplay() {
  const count = useSelector(s => s.count);
  return 
{count}
;
}