同一个React函数组件中能否针对不同Context多次调用useContext？

完全可以，你可以根据业务需要在同一个函数组件里多次调用useContext订阅不同的Context，不存在数量限制。

不少人对这个点有误解，主要是混淆了类组件旧Context API的限制和Hook的能力：

• 类组件的static contextType = MyContextAPI本身有设计局限，一个类组件只能通过这个API绑定单个Context，要读取多个Context的值只能嵌套写<MyContext.Consumer>，冗余又容易出现嵌套过深的问题。
• 官方文档里说useContext(MyContext)等价于类组件的static contextType写法、等价于<MyContext.Consumer>写法，指的是单次调用useContext实现的单Context订阅效果，和这两种写法的能力对齐，绝不是说useContext和contextType一样只能在组件里调用一次。

在函数组件里多次调用useContext消费多Context的写法，本身就是官方推荐的多Context消费方案，效果和嵌套多个Consumer的写法完全一致，但是代码简洁度高很多。

实际使用示例如下：

// 预先创建的两个独立Context
const ThemeContext = React.createContext('light')
const UserContext = React.createContext({ name: '访客' })

function UserInfoBar() {
  // 两次调用useContext分别获取对应Context的值
  const theme = useContext(ThemeContext)
  const user = useContext(UserContext)

  return <div className={`info-bar-${theme}`}>您好，{user.name}</div>
}

唯一需要注意的是，多次调用useContext也必须遵守Hooks的通用规则：不要在循环、条件判断、嵌套函数内部调用Hook，保证每次组件渲染时Hook的调用顺序一致即可。React会正常追踪所有你订阅的Context更新，只要其中任意一个Context的值发生变化，组件就会自动重渲染拿到最新值。

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