React组件通信：从Props到Context的SelectedItem解决方案

1. React组件通信的本质与SelectedItem问题场景

在React应用开发中，组件通信就像城市交通系统 - 不同层级的道路需要不同的通行规则。SelectedItem这类状态共享问题，本质上是因为多个组件需要同步操作同一数据源而产生的通信需求。想象一个电商网站的筛选器组件和商品列表组件，当用户在筛选器中选择某个分类时，商品列表需要立即响应这个变化。

这类场景的典型特征包括：

• 状态需要跨层级传递（如从父组件到深层子组件）
• 兄弟组件间需要共享状态（如筛选面板和结果列表）
• 状态变更需要触发多处UI更新（如选中项高亮+详情面板刷新）

2. 基础通信方案与SelectedItem实现

2.1 Props逐层传递方案

最直接的方案是通过props逐层传递selectedItem状态和回调函数：

jsx复制// 父组件
function ProductPage() {
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <>
      <FilterPanel 
        selectedItem={selectedItem}
        onSelect={setSelectedItem}
      />
      <ProductList 
        selectedItem={selectedItem}
        onSelect={setSelectedItem}
      />
    </>
  );
}

// 子组件
function FilterPanel({ selectedItem, onSelect }) {
  return (
    <div>
      {categories.map(category => (
        <button
          key={category.id}
          className={selectedItem === category.id ? 'active' : ''}
          onClick={() => onSelect(category.id)}
        >
          {category.name}
        </button>
      ))}
    </div>
  );
}

注意：当组件层级超过3层时，这种方案会导致"prop drilling"问题 - 中间组件被迫传递它们不需要的props

2.2 Context API解决方案

对于深层级组件通信，Context是更优雅的方案：

jsx复制const SelectionContext = createContext();

function App() {
  const [selectedItem, setSelectedItem] = useState(null);
  
  return (
    <SelectionContext.Provider value={{ selectedItem, setSelectedItem }}>
      <div className="app">
        <Nav