什么是 Props Drilling？如何避免？

探讨了 React 组件间 props 钻取的问题及多种解决方案，如 Context API、状态管理库、反向传递和自定义 Hook。

React 中等 props drilling 组件通信组件

Props Drilling 指在多层嵌套组件层级中通过 props 逐层传递数据的现象。当子组件需要祖先组件的数据时，需经过中间组件的传递（即使中间组件不需要该数据）产生冗余代码。

避免的方法包括：

Context API
通过 createContext 和 Provider 提供全局状态共享，消除逐层传递：

import { createContext, useContext } from 'react';
const AppContext = createContext();
   
function Parent() {
  return (
    <AppContext.Provider value=>
      <Child />
    </AppContext.Provider>
  );
}
   
function Child() {
  const { data } = useContext(AppContext);
  return <div>{data}</div>;
}

状态管理库（如 Redux / Zustand）
集中管理全局状态，组件直接连接数据源：

// Redux 示例
import { connect } from 'react-redux';
const ChildComponent = ({ data }) => <div>{data}</div>;
const mapStateToProps = (state) => ({ data: state.data });
connect(mapStateToProps)(ChildComponent);

反向传递回调（Component Composition）
将子组件作为属性传递减少层级，避免中间冗余 props：
```
function Parent() {
  return <Layout child={<Child data={data} />} />;
}
```

自定义 Hook
复用逻辑并共享状态，逻辑层抽离：

function useSharedData() {
  const [data, setData] = useState(null);
  useEffect(() => { fetchData().then(setData); }, []);
  return data;
}
function Child() { const data = useSharedData(); return <div>{data}</div>; }