什么是 prop drilling，如何避免？

Prop drilling 是在 React 应用中常见的问题，指的是为了将数据从一个顶层组件传递到一个深层嵌套的子组件，不得不经过多个中间组件层层传递 props。虽然这种方法是可行的，但它会导致代码变得冗长、难以维护，并且增加了中间组件的复杂性，因为它们需要传递与自身无关的 props。

示例

考虑一个简单的示例，展示 prop drilling 的问题：

javascript复制代码// 顶层组件
function App() {
  const user = { name: 'Alice', age: 25 };
​
  return (
    <ParentComponent user={user} />
  );
}
​
// 中间组件
function ParentComponent({ user }) {
  return (
    <ChildComponent user={user} />
  );
}
​
// 深层组件
function ChildComponent({ user }) {
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

在这个示例中，user prop 从 App 组件传递到 ChildComponent，需要经过 ParentComponent，即使 ParentComponent 并不需要使用 user。

避免 Prop Drilling 的方法

1. Context API： React 的 Context API 提供了一种全局的方式在组件树中共享数据，而不必通过每一级组件传递 props。

   javascript复制代码import React, { createContext, useContext } from 'react';
   ​
   const UserContext = createContext();
   ​
   function App() {
     const user = { name: 'Alice', age: 25 };
   ​
     return (
       <UserContext.Provider value={user}>
         <ParentComponent />
       </UserContext.Provider>
     );
   }
   ​
   function ParentComponent() {
     return <ChildComponent />;
   }
   ​
   function ChildComponent() {
     const user = useContext(UserContext);
     return (
       <div>
         <p>Name: {user.name}</p>
         <p>Age: {user.age}</p>
       </div>
     );
   }

2. React Redux： Redux 是一个流行的状态管理库，适用于需要在不同组件之间共享和管理复杂状态的场景。通过 Redux，可以将状态存储在一个全局的 store 中，并通过 connect 或 useSelector 和 useDispatch 访问和更新状态。

   javascript复制代码import { Provider, useSelector, useDispatch } from 'react-redux';
   import { createStore } from 'redux';
   ​
   const initialState = { user: { name: 'Alice', age: 25 } };
   ​
   function reducer(state = initialState, action) {
     switch (action.type) {
       // 添加其他 action 处理
       default:
         return state;
     }
   }
   ​
   const store = createStore(reducer);
   ​
   function App() {
     return (
       <Provider store={store}>
         <ParentComponent />
       </Provider>
     );
   }
   ​
   function ParentComponent() {
     return <ChildComponent />;
   }
   ​
   function ChildComponent() {
     const user = useSelector(state => state.user);
     return (
       <div>
         <p>Name: {user.name}</p>
         <p>Age: {user.age}</p>
       </div>
     );
   }

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

   javascript复制代码import React, { createContext, useContext } from 'react';
   ​
   const UserContext = createContext();
   ​
   function useUser() {
     return useContext(UserContext);
   }
   ​
   function App() {
     const user = { name: 'Alice', age: 25 };
   ​
     return (
       <UserContext.Provider value={user}>
         <ParentComponent />
       </UserContext.Provider>
     );
   }
   ​
   function ParentComponent() {
     return <ChildComponent />;
   }
   ​
   function ChildComponent() {
     const user = useUser();
     return (
       <div>
         <p>Name: {user.name}</p>
         <p>Age: {user.age}</p>
       </div>
     );
   }