React Context访问对象时是否会每次创建新实例？

两种用法的性能差异几乎可以忽略，你担心的「重复实例化大型对象」问题本质是自定义Hook实现有问题，和React Context本身的机制无关。

先拆解你提到的「每次调用Hook都会触发返回对象的函数」问题 #

• 正常的Context标准用法里，Context值是存在顶层Provider的value属性上的：只要Provider不重渲染、传入的value引用不变，所有子组件调用useContext()拿到的都是同一个对象引用，根本不会重复执行对象创建逻辑。
• 你现在遇到的每次调用Hook都重新生成对象，是Hook写法错误导致的：你把大型对象的创建逻辑写在了自定义Hook内部，而不是提前创建好固定引用的对象传给Provider，才会导致每调用一次Hook就跑一次对象创建。
• 只要修正实现：把永远不变的大型对象定义在组件外层（或者用useMemo固定引用），只在Provider上传入一次，后续不管多少个子组件、调用多少次自定义Hook读Context，都不会触发任何对象实例化逻辑，全程只有一份对象存在，完全没有重复创建的浪费。

两种传值方式的性能对比 #

• 直接在子组件读Context的性能开销极低，React内部读取Context值的逻辑耗时远小于组件重渲染本身的耗时，哪怕十几个子组件同时读取同一个Context值，也不会产生可感知的性能损耗。
• 手动在容器组件拿一次值再通过Props逐层下发，反而可能带来额外性能开销：如果中间层组件没有做React.memo优化，容器组件重渲染时所有中间层都会跟着重渲染；而Context的机制是只要传入的value引用不变，读取Context的子组件不会因为父组件、中间层组件重渲染被强制刷新，这一点上Context的表现反而更优。
• 你担心的「容器组件已经取过一次对象，子组件再通过Context取就重复实例化」的场景，只会在前面提到的Hook写法错误时才会出现，属于实现bug，不是Context本身的设计问题。

正确实现参考 #

import { createContext, useContext } from 'react';

const LargeObjContext = createContext(null);
// 永远不变的大对象直接定义在模块层，整个应用生命周期只实例化一次
const FIXED_LARGE_OBJECT = {
  // 你的大型对象字面量内容
};

export const LargeObjProvider = ({ children }) => {
  // 对象引用固定，不需要额外useMemo包裹
  return (
    <LargeObjContext.Provider value={FIXED_LARGE_OBJECT}>
      {children}
    </LargeObjContext.Provider>
  );
};

// 自定义Hook直接返回Context值，没有额外创建逻辑
export const useLargeObj = () => useContext(LargeObjContext);

按上面的写法实现后，你在任意组件、任意次数调用useLargeObj()，拿到的都是同一个对象引用，全程没有重复实例化的开销，也不需要手动逐层传Props，维护性和性能都更好。

内容的提问来源于stack exchange，提问作者Mr. Robot