React Hooks Context-API传值时如何避免Search组件不必要重渲染

• 当前实现中所有调用useContext的组件，会在Provider的value引用变化时无差别重渲染。常见触发来源包括：
  • App组件因无关state更新（比如locale切换、全局配置变动）重渲染时，如果直接给Provider传内联对象作为value，引用会每次重新生成，哪怕原始状态值没有变化，也会触发Search组件重渲染
  • 没有拆分Context的订阅粒度，Header、Search等功能完全独立的组件共享同一个Context，只要Context值更新，所有调用过useContext的组件都会被动响应，哪怕组件本身根本用不到这个最新值
• 没有对Context传递的值做引用记忆化，导致值未变化的场景下也会触发订阅端的更新回调

1. 拆分独立Context，拆离值与更新方法 #

不要把当前值、更新方法混在同一个Context里，利用useState返回的setter引用天然稳定的特性，拆成两个粒度独立的Context：

// 仅存储当前选中的repo值，默认值为空字符串
const RepoUrnContext = createContext("");
// 仅存储更新repo值的方法，默认值为空函数
const RepoActionsContext = createContext(() => {});

2. 对Context值做记忆化处理 #

在App组件中，用useMemo包裹实际传给值Context的状态，只有当状态真正变化时，才更新Context的value引用，避免无关渲染导致的引用变化：

import React, { useState, useMemo } from "react";

const App = () => {
  const [RepoUrn, setRepoUrn] = useState("");
  const [locale, setLocale] = useState("zh-CN");

  // 仅当RepoUrn本身变化时，才生成新的value引用
  const memoizedRepoUrn = useMemo(() => RepoUrn, [RepoUrn]);

  return (
    // 更新方法的Context作为顶层Provider，因为setRepoUrn引用稳定，不会触发任何子组件的多余渲染
    <RepoActionsContext.Provider value={setRepoUrn}>
      <div className="app">
        {/* Header不需要订阅当前repo值，放在值Context的外面，避免后续不小心引入订阅时的额外渲染 */}
        <Header
          locale={locale}
          repoValues={RepoValues}
          setLocale={setLocale}
        />
        {/* 仅把真正需要用到repo值的页面放在值的Provider子树里 */}
        <RepoUrnContext.Provider value={memoizedRepoUrn}>
          <Route path="/" component={Search} />
        </RepoUrnContext.Provider>
      </div>
    </RepoActionsContext.Provider>
  );
};

3. 调整组件内的Context调用逻辑 #

• Header组件只需要拿取更新方法，不需要订阅当前值：

const Header = (props) => {
  // 拿取稳定的更新方法，引用永远不会变化，不会触发额外重渲染
  const setRepoUrn = useContext(RepoActionsContext);

  // 下拉菜单的点击处理逻辑
  const changeDropdownValue = (e, type) => {
    if (type !== "Repo") return;
    // 从点击的DOM节点取对应的数据属性值
    const selectedNode = e.target.closest(".subMenu");
    if (!selectedNode) return;
    setRepoUrn(selectedNode.dataset.value);
  }

  // 原有Dropdown渲染逻辑保持不变
  return (
    <Dropdown isOpen={repoOpen} toggle={(e) => toggle(e, "Repo")}>
      {/* 原有Dropdown内部结构保持不变 */}
    </Dropdown>
  )
}

• Search组件只订阅实际需要用到的repo值，配合React.memo避免父路由的无关重渲染：

// 用React.memo包裹，props无变化时跳过不必要的渲染
const Search = React.memo(() => {
  // 仅当memoizedRepoUrn真正变化时，才会触发组件重渲染
  const currentRepoUrn = useContext(RepoUrnContext);

  useEffect(() => {
    console.log("当前选中的repo值：", currentRepoUrn);
  }, [currentRepoUrn]);

  // 原有Search页面的渲染逻辑保持不变
});

• 当切换locale、打开/关闭Header下拉菜单等无关操作触发App或Header重渲染时，因为memoizedRepoUrn的引用没有变化，Search组件不会触发任何重渲染逻辑
• 只有当用户真正在下拉菜单中选中新的repo值、setRepoUrn更新了RepoUrn状态时，Search组件才会因为值的真实变化触发必要的重渲染和对应副作用执行
• Header组件因为没有订阅repo值的Context，不会因为repo值更新被动重渲染

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