React 什么是prop drilling? 如何避免?

什么是 prop drilling?

• Prop Drilling （属性钻取）是 React 应用中常见的问题，
• 指将数据或状态从顶层组件逐级向下传递到深层嵌套子组件的过程，即使中间组件并不需要这些数据。
• 这种做法会导致代码冗长、难以维护，并增加中间组件的复杂性。

避免方法:

1. 使用 Context API：
   React 的 Context API 提供了一种全局的方式在组件树中共享数据，而不必通过每一级组件传递 props。
   通过创建全局Context来共享数据，避免逐级传递props。
   例如，在顶层组件设置UserContext.Provider，深层组件通过useContext直接获取数据。

2. 状态提升‌：
   将深层组件需要的数据提升至更接近顶层的组件，减少中间组件的依赖。
   例如，将用户信息存储在全局状态管理工具（如Redux）中，由顶层组件统一管理。
   React Redux 是一个流行的状态管理库，适用于需要在不同组件之间共享和管理复杂状态的场景。
   通过 Redux，可以将状态存储在一个全局的 store 中，
   并通过 connect 或 useSelector 和 useDispatch 访问和更新状态。

3. 使用 React Router：
   对于路由相关的数据传递，可通过React Router的useLocation等钩子函数获取当前路由信息，避免逐级传递。

4. 重构组件结构：
   将深层组件提升为中间组件的子组件，减少传递层级。
   例如将ChildComponent直接作为ParentComponent的子组件，避免跨层级传递。

5. Custom Hooks：
   创建自定义 Hook，可以将逻辑封装在 Hook 中，从而避免 prop drilling。