React高阶组件Props传递及上下文包裹机制原理咨询

为什么HOC必须显式传入prop，子组件才能访问对应属性？ #

HOC没有任何特殊语法魔法，本质就是一个接收组件作为入参、返回新组件的普通JavaScript函数，核心逻辑就是普通的组件嵌套，和你手写两层父子组件没有区别。

React的组件通信规则从始至终都很明确：一个组件能拿到的所有props，完全来自于它的直接父组件渲染时的显式传参，不存在隐式的跨作用域变量注入。
举个最基础的HOC实现：

const withLoginUser = (WrappedComponent) => {
  // 这个变量定义在HOC的函数作用域内
  const currentUser = { name: "Gary", role: "admin" }
  // 返回包装后的新组件
  return function HOCWrapper(props) {
    // 渲染原始组件时，只有显式把currentUser作为prop传入
    // WrappedComponent的作用域里才能拿到这个值
    return <WrappedComponent {...props} user={currentUser} />
  }
}

JavaScript本身是词法作用域，HOC内部定义的变量和被包裹的原始组件作用域完全隔离，props是两者之间唯一的通信通道。你不传，原始组件根本拿不到这个变量的引用，自然访问不到。

为什么不能直接导入Hook就访问全局变量，必须用Provider/HOC包裹应用？ #

你当然可以直接写个JS模块导出全局变量，然后在组件里import使用，但这种写法完全脱离React的渲染流程，根本满足不了状态共享的核心需求：

• 变量更新时React完全感知不到，不会自动触发组件重渲染，UI不会跟着更新
• JS模块是单例的，没法实现多实例隔离，比如同个应用里跑两个独立store的场景完全支持不了

之所以要求用Provider包裹整个应用，本质是要把需要共享的状态和React的组件树绑定，接入React本身的渲染和更新调度流程。只有挂载在组件树上的状态，React才能追踪到哪些组件用到了这个状态，在状态变化时精准触发对应组件重渲染，同时支持在组件树不同节点挂载同类型状态的不同实例，实现作用域隔离。

为什么useSelector这类Hook必须被对应Provider包裹才能运行？底层靠什么机制实现？ #

核心支撑是React原生提供的Context跨层级传值机制，Redux的Provider和useSelector本质都是对React Context的封装，没有任何黑魔法。

Context的工作逻辑非常直白：

1. 调用React.createContext()会生成一个Context对象，同时可以传入默认值
2. Context对应的Provider组件接收一个value属性，会把这个value挂载到自身对应的Fiber节点（React虚拟DOM的节点结构）上，所有它的后代组件，不管嵌套多少层，都能读取到这个值
3. 组件里调用useContext(对应Context对象)时，React会从当前组件的Fiber节点开始，向上遍历整棵Fiber树，找到离当前组件最近的对应Context的Provider，读取它挂载的value返回；如果全程没找到匹配的Provider，就返回createContext时传入的默认值。

Redux的Provider做的事非常简单：接收你传入的store实例，把它放到Context的value里向下传递。useSelector内部首先会调用useContext拿到Redux Context里存的store，再订阅store的状态变化，把你需要的状态切片返回，同时在状态更新时触发当前组件重渲染。
如果你不包裹Provider，useSelector拿不到你传入的store实例，自然没法正常订阅状态、返回数据，要么拿到默认空值报错，要么返回的状态永远不会更新。

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