一、先看组件通信有多痛

一个页面里组件之间的关系无非四种：父子、兄弟、爷孙、陌生人。

• 父子最直接。props 传数据，自定义事件传回调——单向数据流。
• 兄弟 / 爷孙 / 陌生人它们之间没有直接通道。最朴素的做法是——把数据提到它们共同的父组件，接下来用 props 一层一层往下传。

问题就出在这里。当层级变深，中间层的组件就成了纯粹的"搬运工"：

App
└── Layout
└── Main
└── Sidebar ← 想要 me，但数据在 App
└── UserCard ← 其实它只是路过

爷孙之间要传一个 me,中间每一层都得：

const Main = => (

// 我根本不用 me。我只是个传话的)

数据根本用不上，却要一层层地收、一层层地递，这种"搬运工作"就是 prop drilling. 层级一深,全是样板代码,改一个字段名字,整条链路都要动.

二、useContext：数据源头提供，深层直接消费

useContext 的思路很朴素:在数据源头放一个"供给站",需要数据的组件直接去取,中间的层级完全不感知.

使用总共三步。

说到第1步，createContext创建上下文

// ThemeContext.jsx —— 独立文件,作为公共资源被各处引用
import { createContext } from 'react'
export const ThemeContext = createContext

里的 "light" 是默认值.

它的作用是兜底:当某个组件在组件树里没有被任何 Provider 包裹时,useContext就拿这个默认值,保证不崩、不报错.

再看第2步，Provider 提供数据

// App.jsx
import { useState } from 'react'
import { ThemeContext } from './ThemeContext'
import Page from './Page'
const App = => {
const = useState
return (


 setTheme}>切换主题

)
}

至于两个关键点。

1.        绑定的是,所以 Provider 提供的值是——setTheme 一执行,所有消费方自动重新渲染..这是 context 和普通全局变量最大区别.

传的是一个对象/值.最好用包裹.否则父组件每次渲染,
  ，& & ，& & ，& 一直变,&connect all使用者也跟着重渲染..

三、深入:Provider 不一定是"全局"

很多人误以为 context 是全局状态管理工具。

Context 数据只存在于 Provider 这个容器内部。对容器内部子树可见,容器外面拿不到.