React中Context变化引发无用重渲染的问题及解决方法

问题描述 #

开发网站时实现了自定义光标及对应的CursorContext，用于hover场景下修改光标状态，但发现Context状态变化时，应用中所有组件都会重渲染。尝试用React.memo包裹Layout组件、在Layout中使用useMemo均无效，需解决该问题。

相关代码 #

App组件 #

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <AuthProvider>
      <CursorProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </CursorProvider>
    </AuthProvider>
  );
}

Layout组件（已尝试优化但无效） #

export default React.memo(Layout);

const Layout = ({ children }: Props): JSX.Element => {
  const { width } = useWindowSize();
  const memoizedJSX = useMemo(() => {
    return (
      <div id="App" className="relative">
        <Head>
          <title>Virgile Hasselmann</title>
          <meta
            name="description"
            content="Virgile Hasselmann, a video and photo portfolio"
          />
          <link rel="icon" href="/favicon.ico" />
        </Head>
        {width! > 768 && <CustomCursor />}
        <header className="fixed w-screen z-50">
          <Navbar />
        </header>
        <main className="min-h-screen">
          <div>{children}</div>
        </main>
      </div>
    );
  }, []);
  return memoizedJSX;
};

原因分析 #

1. CursorProvider的value引用不稳定：如果Provider的value每次渲染都生成新对象/函数，即使子组件未订阅Context，也会因为Provider的props变化触发重渲染。
2. React.memo失效：Layout中使用的useWindowSize若返回的width引用不稳定，或useMemo依赖数组缺失（比如漏掉width和children），会导致Layout被迫重渲染，React.memo失去作用。
3. Context作用范围过大：CursorProvider包裹了整个Layout，导致所有子组件都处于其作用域内，一旦状态变化，连锁触发重渲染。
4. 子组件未做memo化：页面组件未用React.memo包裹，即使Layout稳定，父组件重渲染时也会带动页面组件重渲染。

解决方案 #

1. 稳定CursorProvider的value引用 #

修改CursorProvider实现，用useMemo缓存value，仅当状态变化时更新引用：

const CursorProvider = ({ children }) => {
  const [cursorState, setCursorState] = useState({/* 初始状态 */});
  // 仅cursorState变化时更新value
  const value = useMemo(() => ({
    cursorState,
    setCursorState
  }), [cursorState]);
  
  return <CursorContext.Provider value={value}>{children}</CursorContext.Provider>;
};

2. 缩小Context作用范围 #

仅让需要的组件处于CursorProvider范围内，比如只包裹CustomCursor和触发光标状态变化的组件：

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <AuthProvider>
      <Layout>
        <Component {...pageProps} />
        {/* 仅在必要区域使用CursorProvider */}
        <CursorProvider>
          <CustomCursor />
        </CursorProvider>
      </Layout>
    </AuthProvider>
  );
}

注：若有其他需要触发光标状态的组件，需将其也移入Provider范围内。

3. 修复Layout的useMemo依赖 #

补充缺失的依赖项，避免缓存失效导致的bug：

const memoizedJSX = useMemo(() => {
  return (
    <div id="App" className="relative">
      <Head>
        <title>Virgile Hasselmann</title>
        <meta
          name="description"
          content="Virgile Hasselmann, a video and photo portfolio"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      {width! > 768 && <CustomCursor />}
      <header className="fixed w-screen z-50">
        <Navbar />
      </header>
      <main className="min-h-screen">
        <div>{children}</div>
      </main>
    </div>
  );
}, [width, children]); // 添加width和children作为依赖

同时确保useWindowSize内部用useMemo缓存返回值，避免width不必要的引用变化。

4. 对页面组件进行memo化 #

用React.memo包裹不需要随光标状态变化的页面组件：

// 示例页面组件
const HomePage = () => { 
  // 组件逻辑
};
export default React.memo(HomePage);

5. 仅让必要组件订阅Context #

确保只有CustomCursor和需要触发光标状态变化的组件调用useContext(CursorContext)，其他组件避免订阅，减少重渲染触发源。

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