前端/移动开发面试题更新 2026-08-05

在 React 中,除了依靠实例属性来访问 Context 之外,还有哪些方法可以直接获取到 Context 的值?

前端/移动开发技术原理React

考察说明

考查对 React Context 不同接入方式的理解,尤其是函数组件中的相关 Hook。

回答思路

  1. 【回答框架 1】Context 是用于跨组件层级传递数据的机制,提供一种在组件树中共享数据的方式。获取 Context 值的主要方式包括:类组件中通过 this.context 属性、通过 Context.Consumer 组件,以及函数组件中的 useContext Hook。
  2. 【回答框架 2】对于函数组件,React 提供了 useContext 方法,它接收 Context 对象并返回当前 Context 的值。这是函数组件中直接获取 Context 值的主要方式,也是推荐的方式。
  3. 【回答框架 3】在类组件中,可以通过在组件类上声明静态属性 contextType = MyContext 来让组件通过 this.context 访问 Context 值。这种方式只适用于类组件,并且一个组件只能使用一个 contextType。
  4. 【回答框架 4】此外,还可以使用 Context.Provider 和 Context.Consumer,其中 Consumer 可以包裹组件,通过 render prop 的方式获取 Context 值。
  5. 【回答框架 5】在类组件中也可以使用 Consumer,但 contextType 更简洁。对于函数组件,useContext 是首选,因为它更直观且易于使用。
  6. 【关键点 1】函数组件中使用 useContext 直接获取 Context 值。
  7. 【关键点 2】类组件中通过 static contextType = MyContext 定义后,使用 this.context 获取。
  8. 【关键点 3】Context.Consumer 组件通过 render prop 在任意组件中获取 Context 值。
  9. 【易错点 1】类组件的 contextType 只能绑定一个 Context,多个 Context 需要嵌套 Consumer 或结合其他技术。
  10. 【易错点 2】useContext 必须在函数组件的顶层调用,不能在循环或条件语句中使用,也不要在事件处理函数中调用。
  11. 【易错点 3】当 Context 的值变化时,使用 useContext 的组件会重新渲染,需要留意性能影响。