React优化：避免useContext触发全局重渲染，实现组件数据共享

问题描述 #

我开发了一个简单React应用，包含全局可用的Header.tsx组件和承载主要内容的Home.tsx组件。目前的实现逻辑是：

• 在Home.tsx中通过IntersectionObserver监听各个内容区块的相交状态
• 使用名为homeLinks的useContext钩子，通过App.tsx向Header.tsx传递当前相交区块的id，以此更新导航的激活类名

但现在遇到了性能问题：每次观察者更新上下文时，整个DOM都会重渲染，而Home.tsx后续会承载大量内容，这种实现显然不是最优方案。我想请教两个问题：

1. 该如何正确实现这个逻辑，避免不必要的全局重渲染？
2. 能否将Home.tsx中的refs传递给Header.tsx，在Header组件中设置观察者？

解决方案 #

一、避免全局重渲染的优化方案 #

核心思路是缩小上下文更新的影响范围，只让依赖当前激活id的组件（也就是Header）重渲染，而不让Home组件因为上下文变化而重新渲染。

1. 拆分上下文，分离状态更新与消费

把homeLinks上下文拆分为两个独立部分：一个提供激活id的更新方法，另一个提供激活id的订阅能力，让不同组件只获取自己需要的部分。

// homeLinks.tsx
import { createContext, useContext, useState, useCallback } from 'react';

// 仅用于订阅当前激活区块id
const ActiveSectionContext = createContext<string | null>(null);
// 仅用于提供更新激活区块的方法
const SetActiveSectionContext = createContext<((id: string) => void) | null>(null);

export function ActiveSectionProvider({ children }: { children: React.ReactNode }) {
  const [activeSectionId, setActiveSectionId] = useState<string | null>(null);
  
  // 用useCallback缓存方法，避免每次重渲染生成新函数
  const updateActiveSection = useCallback((id: string) => {
    setActiveSectionId(id);
  }, []);

  return (
    <SetActiveSectionContext.Provider value={updateActiveSection}>
      <ActiveSectionContext.Provider value={activeSectionId}>
        {children}
      </ActiveSectionContext.Provider>
    </SetActiveSectionContext.Provider>
  );
}

// 自定义钩子：订阅激活状态
export function useActiveSection() {
  return useContext(ActiveSectionContext);
}

// 自定义钩子：获取更新方法
export function useSetActiveSection() {
  return useContext(SetActiveSectionContext);
}

• Home.tsx调整：只获取更新方法，不订阅状态，这样上下文更新时Home不会重渲染：

// Home.tsx
import { useEffect, useRef } from 'react';
import { useSetActiveSection } from './contexts/homeLinks';

export default function Home() {
  const setActiveSection = useSetActiveSection();
  const sectionRefs = useRef<Record<string, HTMLElement | null>>({});

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
          }
        });
      },
      { threshold: 0.5 }
    );

    Object.values(sectionRefs.current).forEach(ref => {
      if (ref) observer.observe(ref);
    });

    return () => observer.disconnect();
  }, [setActiveSection]);

  return (
    <div>
      <section id="section1" ref={el => sectionRefs.current['section1'] = el}>区块1内容</section>
      <section id="section2" ref={el => sectionRefs.current['section2'] = el}>区块2内容</section>
    </div>
  );
}

• Header.tsx调整：只订阅激活状态，这样只有Header会在状态变化时重渲染：

// Header.tsx
import { useActiveSection } from './contexts/homeLinks';

export default function Header() {
  const activeSectionId = useActiveSection();

  return (
    <nav>
      <a href="#section1" className={activeSectionId === 'section1' ? 'active' : ''}>Section 1</a>
      <a href="#section2" className={activeSectionId === 'section2' ? 'active' : ''}>Section 2</a>
    </nav>
  );
}

2. 用React.memo进一步优化Home组件

如果Home组件仍因其他props变化意外重渲染，可使用React.memo包裹它，确保仅在props真正变化时才重渲染：

// Home.tsx
import React from 'react';

const Home = React.memo(() => {
  // 组件原有逻辑
});

export default Home;

二、能否在Header.tsx中设置观察者？ #

可以实现，但需要注意ref传递的时机和组件职责的合理性：

实现思路

1. 在App.tsx中创建共享ref，用来存储Home中所有区块的DOM引用
2. 将该ref同时传递给Home和Header组件
3. Home负责把区块DOM挂载到共享ref上
4. Header在组件挂载后，通过共享ref获取DOM元素并初始化观察者，同时内部维护激活状态

// App.tsx
import { useRef } from 'react';
import Header from './Header';
import Home from './Home';

export default function App() {
  const sectionRefs = useRef<Record<string, HTMLElement | null>>({});

  return (
    <div>
      <Header sectionRefs={sectionRefs} />
      <Home sectionRefs={sectionRefs} />
    </div>
  );
}

// Home.tsx
export default function Home({ sectionRefs }: { sectionRefs: React.MutableRefObject<Record<string, HTMLElement | null>> }) {
  return (
    <div>
      <section id="section1" ref={el => sectionRefs.current['section1'] = el}>区块1内容</section>
      <section id="section2" ref={el => sectionRefs.current['section2'] = el}>区块2内容</section>
    </div>
  );
}

// Header.tsx
import { useEffect, useState } from 'react';

export default function Header({ sectionRefs }: { sectionRefs: React.MutableRefObject<Record<string, HTMLElement | null>> }) {
  const [activeSectionId, setActiveSectionId] = useState<string | null>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setActiveSectionId(entry.target.id);
          }
        });
      },
      { threshold: 0.5 }
    );

    // 延迟执行，确保Home的DOM已挂载完成
    const timer = setTimeout(() => {
      Object.values(sectionRefs.current).forEach(ref => {
        if (ref) observer.observe(ref);
      });
    }, 0);

    return () => {
      clearTimeout(timer);
      observer.disconnect();
    };
  }, [sectionRefs]);

  return (
    <nav>
      <a href="#section1" className={activeSectionId === 'section1' ? 'active' : ''}>Section 1</a>
      <a href="#section2" className={activeSectionId === 'section2' ? 'active' : ''}>Section 2</a>
    </nav>
  );
}

注意事项

• 需确保Home的DOM元素已挂载后，Header再初始化观察者，这里用setTimeout做简单处理，也可以通过状态同步的方式更精准地判断
• 这种方式将观察者逻辑放到Header，好处是状态完全由Header管理，无需上下文，避免全局重渲染；但缺点是组件职责不够清晰（Header原本是导航组件，现在承担了内容区块的监听逻辑），需根据项目实际情况权衡

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