如何仅重新渲染AppBar来更新其标题

核心思路 #

要避免useContext导致的全组件树重渲染，关键就是只让AppBar监听标题变化，其他组件只管触发更新，不订阅上下文。可以通过自定义发布订阅模式，或者拆分上下文来实现。

具体实现方案 #

方案1：自定义Pub/Sub发布订阅模块 #

1. 先搞一个独立的标题管理文件，负责存储标题和处理订阅逻辑：

// titleManager.js
let currentTitle = "默认标题";
const subscribers = new Set();

export const setPageTitle = (newTitle) => {
  currentTitle = newTitle;
  subscribers.forEach(callback => callback(currentTitle));
};

export const subscribeToTitle = (callback) => {
  subscribers.add(callback);
  // 刚订阅时同步一次当前标题
  callback(currentTitle);
  // 返回取消订阅函数，组件卸载时调用
  return () => subscribers.delete(callback);
};

2. AppBar组件只订阅标题变化，只有标题更新时才重渲染：

// AppBar.jsx
import { useEffect, useState } from 'react';
import { subscribeToTitle } from './titleManager';

export default function AppBar() {
  const [pageTitle, setPageTitle] = useState("");

  useEffect(() => {
    const unsubscribe = subscribeToTitle(setPageTitle);
    return unsubscribe;
  }, []);

  console.log("AppBar 渲染");
  return <header className="app-bar">{pageTitle}</header>;
}

3. 子组件直接调用setPageTitle更新标题，无需订阅任何上下文：

// Dashboard.jsx
import { useEffect } from 'react';
import { setPageTitle } from '../titleManager';

export default function Dashboard() {
  useEffect(() => {
    setPageTitle("仪表盘");
  }, []);

  console.log("Dashboard 渲染");
  return <div>仪表盘内容</div>;
}

方案2：拆分上下文，仅让AppBar订阅标题 #

如果不想自己写Pub/Sub，可以把上下文拆成两个：一个提供更新标题的方法，一个提供当前标题。只有AppBar订阅标题上下文，其他组件只使用更新方法的上下文。

1. 拆分上下文并封装Hook：

// contexts/PageTitleContext.js
import { createContext, useContext, useState, useCallback } from 'react';

// 供子组件更新标题的上下文
const TitleUpdateContext = createContext();
// 供AppBar获取当前标题的上下文
const CurrentTitleContext = createContext();

export function PageTitleProvider({ children }) {
  const [pageTitle, setPageTitle] = useState("默认标题");
  // 用useCallback保证函数引用稳定，避免子组件无意义重渲染
  const updateTitle = useCallback((newTitle) => setPageTitle(newTitle), []);

  return (
    <TitleUpdateContext.Provider value={updateTitle}>
      <CurrentTitleContext.Provider value={pageTitle}>
        {children}
      </CurrentTitleContext.Provider>
    </TitleUpdateContext.Provider>
  );
}

// 子组件用这个Hook更新标题
export const useSetPageTitle = () => useContext(TitleUpdateContext);
// AppBar用这个Hook获取标题
export const usePageTitle = () => useContext(CurrentTitleContext);

2. AppBar组件仅订阅标题上下文：

// AppBar.jsx
import { usePageTitle } from './contexts/PageTitleContext';

export default function AppBar() {
  const pageTitle = usePageTitle();
  console.log("AppBar 渲染");
  return <header className="app-bar">{pageTitle}</header>;
}

3. 子组件仅使用更新标题的Hook，不会订阅标题变化，因此不会重渲染：

// Dashboard.jsx
import { useEffect } from 'react';
import { useSetPageTitle } from '../contexts/PageTitleContext';

export default function Dashboard() {
  const setPageTitle = useSetPageTitle();

  useEffect(() => {
    setPageTitle("仪表盘");
  }, [setPageTitle]);

  console.log("Dashboard 渲染");
  return <div>仪表盘内容</div>;
}

方案生效原因 #

• 方案1的Pub/Sub模式：只有AppBar订阅了标题变化，子组件仅触发更新操作，不监听标题状态，所以标题更新时只有AppBar会重渲染。
• 方案2的拆分上下文：更新标题的上下文提供的是稳定函数（useCallback包裹），子组件使用时不会因上下文变化重渲染；只有标题上下文的值会变化，且只有AppBar订阅了该上下文，因此仅AppBar重渲染。

验证方式 #

保持你原有的测试逻辑：给每个组件添加console.log()，关闭Strict Mode。点击导航链接后，只有AppBar的日志会触发，其他组件不会重复打印。

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