什么是prop drilling，你如何避免它？

Question

Accepted Answer

**Prop drilling** 是通过许多中间组件传递数据，这些组件本身不使用这些数据，只是为了将其传递给确实需要它的深层嵌套组件。这很繁琐，并且使组件与他们不关心的数据紧密耦合。 ## 问题 ```jsx // `user` is only needed by Avatar, but must pass through every layer function App() { const [user] = useState({ name: "Ann" }); return ; // App → Layout } function Layout({ user }) { return

; // Layout → Header (doesn't use it) } function Header({ user }) { return

; // Header → Nav (doesn't use it) } function Nav({ user }) { return ; // FINALLY used here } ``` `Layout`、`Header` 和 `Nav` 都必须接受并转发 `user`，即使它们不使用它——这很冗长、容易出错（重命名prop后需要编辑每一层），并且将不相关的组件耦合在一起。 ## 解决方案1：Context（内置） ```jsx const UserContext = createContext(null); function App() { const [user] = useState({ name: "Ann" }); return ( {/* provide once at the top */} {/* no user prop needed anywhere */} ); } function Avatar() { const user = useContext(UserContext); // consume directly, skip the middle return {user.name}

; } ``` Context 让任何后代直接读取该值，绕过中间层。 ## 解决方案2及更多 ```text ✓ Context API → for app-wide/subtree data (theme, user, locale) ✓ State libraries → Zustand/Redux/Jotai — components subscribe to the store directly ✓ Component composition → pass JSX as children instead of data through props ``` ```jsx // composition: let the parent compose the tree, passing the leaf directly ``` ## 不要过度修正 ```text A little prop drilling (1–2 levels) is FINE and often clearer than adding Context. Reach for Context/stores when drilling becomes deep or widespread. ``` ## 为什么这很重要 Prop drilling 是一个常见的痛点，表明数据需要被广泛使用——认识到这一点告诉你何时应该使用 Context、状态库或组合。避免它（当它确实很深时）可以保持组件解耦和可维护性。但判断很重要：浅层 drilling 是可以接受的，也比过早抽象更简单；目标是消除*深层、重复*的转发，而不是所有的 prop 传递。