使用Context API时非当前页面是否重渲染？及优化方案咨询

问题解答 #

1. 重渲染范围
   当Context的状态发生变化时，所有被Provider包裹的子组件（包括当前未显示的页面组件）都会触发重渲染检查——React会执行组件的render函数，但最终只会更新实际变化的DOM节点。在你的Next.js代码中，所有页面组件都被包裹在MyProvider里，所以当title变化时，哪怕是没被路由到的页面，也会进入重渲染流程。

2. 你的代码中的重渲染问题
   在你的实现里，当页面挂载调用setTitle修改title时，所有页面组件都会触发重渲染检查，这确实会造成不必要的性能开销。

优化方法 #

1. 拆分Context，缩小作用范围 #

把和公共组件相关的状态单独抽离成独立的Context，只在需要用到该状态的组件周围提供这个Context，不要让所有页面都被包裹在内。

示例代码：

// TitleContext.tsx
import { createContext, useState, ReactNode } from 'react';

export const TitleContext = createContext({
  title: '',
  setTitle: (title: string) => {}
});

export const TitleProvider = ({ children }: { children: ReactNode }) => {
  const [title, setTitle] = useState('');
  return (
    <TitleContext.Provider value={{ title, setTitle }}>
      {children}
    </TitleContext.Provider>
  );
};

修改_app.tsx结构，让页面组件不在TitleProvider的范围内：

// _app.tsx
return (
  <>
    <TitleProvider>
      <CommonComponent />
    </TitleProvider>
    <Component {...pageProps} />
  </>
);

这样页面组件就不会受title变化的影响，只有CommonComponent和需要调用setTitle的组件会响应状态变化。

2. 用React.memo包裹无依赖的组件 #

如果某个页面组件不需要依赖Context中的任何状态，可以用React.memo包裹它。这样当父组件重渲染时，只要该页面的props没有变化，就不会触发重渲染。

示例：

// 某个页面组件
import { memo } from 'react';

const HomePage = memo((props) => {
  return <div>首页内容</div>;
});

export default HomePage;

注意：memo默认做浅比较，如果props包含复杂对象，需要手动传入比较函数。

3. 使用useContextSelector精准订阅状态（React 18+） #

React 18及以上支持useContextSelector，让组件只订阅Context中的特定状态片段，只有当订阅的状态变化时，组件才会重渲染。

示例代码：

// MyContext.tsx
import { createContext, useContextSelector, useState, ReactNode } from 'react';

const MyContext = createContext<{ title: string; setTitle: (title: string) => void }>({
  title: '',
  setTitle: () => {}
});

export const MyProvider = ({ children }: { children: ReactNode }) => {
  const [title, setTitle] = useState('');
  return (
    <MyContext.Provider value={{ title, setTitle }}>
      {children}
    </MyContext.Provider>
  );
};

// 自定义hooks，分别订阅title和setTitle
export const useTitle = () => useContextSelector(MyContext, ctx => ctx.title);
export const useSetTitle = () => useContextSelector(MyContext, ctx => ctx.setTitle);

这样，只有调用useTitle的组件会在title变化时重渲染，页面组件如果没使用这些hooks，就不会触发重渲染。

4. 调整组件层级，隔离公共组件 #

如果公共组件不需要和页面组件共享其他状态，可以直接把公共组件从Provider的子层级中移出，只让它单独订阅所需的Context，彻底隔离页面组件和公共组件的状态影响。

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