- 目前看React官方文档，开始有点啃不动了，虽然有案例，但是满屏的概念，看的我还是头疼的不行，所以我这边看了之后决定用自己的概念去解读useContext。 - [React官方文档在这里](https://zh-hans.react.dev/learn/passing-data-deeply-with-context) - 先看下官方概念 - 通常来说，你会通过 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 ( {/* 这里提供值 "1" */} ); } // 3. 中间组件 function Child() { return ; } // 4. 孙组件：消费 Context function Son() { const name = useContext(NameContext); // 获取值 return

名字: {name}

; // 输出 "名字: 1" } ``` - 其实这里我们可以不需要管Child组件，我用这个组件只是想展示子组件嵌套孙组件的案例 ### 简单明了说用法 - 先定义useContext，比如NameContext就是我们定义的useContext，`随后用定义的NameContext当做一个标签去包裹住你想传递的子组件或者孙组件`，随后你要使用的话直接就`useContext`去获得定义好的NameContext的值就好了。 ``` 子组件 ``` - 这里说个**重要的概念**，也是我当初比较疑惑地概念，就是中为什么要`.Provider`和这个`value`到底是什么 - 我们还记得，当初定义useContext的时候做的代码吗？ - `const NameContext = React.createContext('3');` - 这里的这个**3**其实就是我们设置的默认值，如果我们的标签不带Provider和value，那么当我们在子组件里面使用useContext，那么就是这个默认值。 - ` ` - 此时在子组件里我们调用useContext，参数为**3** - `` - 那么当然，如果我们设置了`value`的值为**1**，那么子组件里面使用useContext，参数则为1。 ### 总结一下核心规则： 1. **必须通过 `Provider` 标签才能传递 `value`** 只有用 `` 包裹组件时，`value` 才会生效。没有 `Provider` 标签，`value` 属性根本不存在，自然无法使用。 1. **`Provider` 与默认值的优先级** - 有 `Provider` 且 `value` 不为 `undefined` → 用 `Provider` 的 `value` - 有 `Provider` 但 `value` 是 `undefined` → 用默认值 - 没有 `Provider` → 用默认值 1. **默认值的本质** `createContext(默认值)` 中的默认值，是 **"没有找到合适的 Provider 时的保底值"** 。就像： - 有 Provider 且提供了有效 value → 用 Provider 的值（"正式工"） - 其他情况 → 用默认值（"临时工"） ### 一句话总结： `Provider` 是 "主力"，默认值是 "备胎"。有主力时用主力，没主力或主力无效时用备胎。 ### 我是罗密欧与猪过夜，感谢您的观看，有错误欢迎在底下评论区指正。