React组件通信：解决SelectedItem状态更新问题

1. React组件通信的核心挑战

在React应用开发中，组件间的数据流动一直是开发者面临的核心难题。我曾在多个项目中遇到过这样的场景：父组件维护了一个列表，子组件负责展示并允许用户选择某个项目，但当用户做出选择后，父组件却无法及时获取到最新的选中状态。这种SelectedItem更新问题看似简单，实则涉及React数据流管理的多个关键概念。

React的单向数据流设计哲学决定了数据只能从父组件流向子组件，这虽然保证了数据流动的可预测性，但也带来了组件间通信的天然限制。当我们需要子组件向父组件传递数据时，就必须采用特定的通信模式。在实际项目中，我见过太多因为不恰当的通信方式导致的bug——比如直接修改props、滥用context或者过度依赖全局状态管理。

2. SelectedItem问题的典型表现与根因分析

2.1 问题复现场景

让我们先还原一个典型的SelectedItem更新失效的场景。假设我们有一个父组件ItemList和一个子组件ItemSelector：

jsx复制// 父组件
function ItemList() {
  const [items] = useState([...]);
  const [selectedItem, setSelectedItem] = useState(null);
  
  return (
    <div>
      <ItemSelector items={items} selectedItem={selectedItem} />
      <p>当前选中: {selectedItem?.name || '无'}</p>
    </div>
  );
}

// 子组件
function ItemSelector({ items, selectedItem }) {
  const handleSelect = (item) => {
    selectedItem = item; // 这样直接修改prop是无效的！
  };
  
  return (
    <ul>
      {items.map(item => (
        <li 
          key={item.id} 
          onClick={() => handleSelect(item)}
          className={selectedItem?.id === item.id ? 'active' : ''}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}

这段代码的问题在于：子组件直接修改了props中的selectedItem，这在React中是严格禁止的，因为props应该是不可变的(immutable)。React不会检测到这种修改，因此父组件中的状态不会更新，UI也不会重新渲染。

2.2 根本原因剖析

这个问题的本质在于对React数据流原则的理解不足。React中props是只读的，子组件不能直接修改从父组件接收的props。正确的做法是通过回调函数将数据变更"上报"给父组件，由父组件负责状态的更新。

我曾在一个电商项目中遇到过类似问题：商品筛选器的选中状态经常"丢失"。经过排查发现，开发团队在子组件中直接修改了父组件传入的selectedFilters对象，导致状态管理混乱。这个教训让我深刻认识到遵循React数据流原则的重要性。

3. 解决方案一：回调函数模式

3.1 基础实现方式

最传统也是最可靠的解决方案是使用回调函数。父组件将状态和状态更新方法一起传递给子组件：

jsx复制// 父组件
function ItemList() {
  const [items] = useState([...]);
  const [selectedItem, setSelectedItem] = useState(null);
  
  const handleItemSelect = (item) => {
    setSelectedItem(item);
  };