useContext，最简单秒懂的概念

• 目前看React官方文档，开始有点啃不动了，虽然有案例，但是满屏的概念，看的我还是头疼的不行，所以我这边看了之后决定用自己的概念去解读useContext。

• React官方文档在这里

• 先看下官方概念

• 通常来说，你会通过 props 将信息从父组件传递到子组件。但是，如果你必须通过许多中间组件向下传递 props，或是在你应用中的许多组件需要相同的信息，传递 props 会变的十分冗长和不便。Context 允许父组件向其下层无论多深的任何组件提供信息，而无需通过 props 显式传递。

简述下我的理解

• 这玩意就是如果你有多个子组件，比如子组件嵌套子组件，也就是我们的孙组件，或者说是多个子组件用父组件的参数，就不需要props一直传了。

举个例子

引入Context
import { createContext，useContext } from 'react'


// 1. 创建 Context（默认值为 '3'）
 const NameContext = React.createContext('3');


// 2. 父组件：提供 Context 值
function Parent() {
  return (
    <NameContext.Provider value="1"> {/* 这里提供值 "1" */}
      <Child />
    </NameContext.Provider>
  );
}

// 3. 中间组件
function Child() {
  return <Son />;
}

// 4. 孙组件：消费 Context
function Son() {
  const name = useContext(NameContext); // 获取值
  
  return <div>名字: {name}</div>; // 输出 "名字: 1"
}

• 其实这里我们可以不需要管Child组件，我用这个组件只是想展示子组件嵌套孙组件的案例

简单明了说用法

• 先定义useContext，比如NameContext就是我们定义的useContext，随后用定义的NameContext当做一个标签去包裹住你想传递的子组件或者孙组件，随后你要使用的话直接就useContext去获得定义好的NameContext的值就好了。

<NameContext.Provider value="1"> 
   子组件 <Child>
 </NameContext.Provider>

• 这里说个重要的概念 ，也是我当初比较疑惑地概念，就是<NameContext.Provider value="1"> 中为什么要.Provider和这个value到底是什么

• 我们还记得，当初定义useContext的时候做的代码吗？

• const NameContext = React.createContext('3');

• 这里的这个3其实就是我们设置的默认值，如果我们的标签不带Provider和value，那么当我们在子组件里面使用useContext，那么就是这个默认值。

• <NameContext>

• 此时在子组件里我们调用useContext，参数为3

• <NameContext.Provider value="1">

• 那么当然，如果我们设置了value的值为1，那么子组件里面使用useContext，参数则为1。

总结一下核心规则：

1. 必须通过 Provider 标签才能传递 value

   只有用 <NameContext.Provider value="xxx"> 包裹组件时，value 才会生效。

   没有 Provider 标签，value 属性根本不存在，自然无法使用。

2. Provider 与默认值的优先级

   • 有 Provider 且 value 不为 undefined → 用 Provider 的 value
   • 有 Provider 但 value 是 undefined → 用默认值
   • 没有 Provider → 用默认值

3. 默认值的本质
   createContext(默认值) 中的默认值，是 "没有找到合适的 Provider 时的保底值" 。

   就像：

   • 有 Provider 且提供了有效 value → 用 Provider 的值（"正式工"）
   • 其他情况 → 用默认值（"临时工"）

一句话总结：

Provider 是 "主力"，默认值是 "备胎"。有主力时用主力，没主力或主力无效时用备胎。

我是罗密欧与猪过夜，感谢您的观看，有错误欢迎在底下评论区指正。