别再一层层传props了！useContext高效状态管理实战

📖本文导览：本文将从prop drilling的痛点出发，系统讲解React useContext的使用方法、核心原理、实战场景（主题切换、用户认证、迷你Redux），并深入分析性能陷阱与优化策略。文章包含5个对比表格、6+实战提示框、3个完整TypeScript实战案例，适合想掌握跨组件状态管理的React开发者。

一、开篇：prop drilling的痛点

什么是prop drilling？

Prop drilling（属性穿透/属性钻探）是指在React应用中，为了让深层嵌套的组件获取某些数据，需要将这些数据通过多层中间组件的props一层层传递下去的过程。

听起来有点绕？让我们用一个真实的"灾难"场景来说明。

一个真实的"灾难"示例

假设我们有一个电商应用，需要在5层组件深处显示当前登录用户的名字：

plaintext

App └── Layout └── Sidebar └──