React开发Master-Detail主详情组件时如何正确管理状态？

你这个左右分栏、点击左侧列表联动右侧详情的需求属于非常典型的兄弟组件通信场景，优先用状态提升到公共父组件的方案实现，没必要上来就引入Redux这类全局状态库，具体选型可以按你项目的实际扩展需求判断：

首选方案：状态提升到最近公共父组件 #

90%以上的同页面分栏场景都适合用这个方案，逻辑非常简单：

• 把「当前选中的卡片ID/详情数据」的state，定义在左侧卡片列表、右侧信息面板的共同直接父组件中
• 父组件通过props给左侧列表传入选中回调函数，给右侧面板传入当前选中的详情数据
• 用户点击左侧卡片时，调用父组件传来的回调更新父组件中的选中状态，状态变更后会自动把新的选中数据传给右侧面板，触发详情渲染

这个方案没有任何额外依赖，数据流完全单向可追溯，出问题排查成本极低，是React官方推荐的兄弟组件通信实现方式。
基础实现伪代码参考：

// 左右分栏的公共父组件
function ContentPage() {
  // 存储当前选中的卡片数据
  const [activeCardData, setActiveCardData] = useState(null)

  return (
    <div className="two-col-layout">
      {/* 左侧列表接收选中回调 */}
      <CardList onCardSelect={setActiveCardData} />
      {/* 右侧面板接收当前选中数据 */}
      <DetailPanel cardInfo={activeCardData} />
    </div>
  )
}

只要左右两个组件之间没有隔3层以上的嵌套组件需要透传props，这个方案就是最优解，哪怕中间隔1-2层组件，手动透传props的成本也远低于引入全局状态库的维护成本。
另外注意不要把选中状态维护在左侧列表组件内部：兄弟组件之间无法直接通信，状态放在左侧的话你还是需要通过父组件中转，平白增加数据流的复杂度。

次选方案：全局状态管理（含Redux、Context、轻量状态库） #

只有当你明确存在以下需求时，再考虑把选中状态放到全局层管理：

• 选中的卡片信息需要被页面中其他远离分栏区域的组件调用（比如顶部导航的状态提示、全局收藏按钮、跨路由的详情预加载逻辑），逐层透传props需要穿过5层以上组件，维护成本过高
• 需要在用户离开当前页面后保留选中状态，返回时直接恢复上次浏览位置
• 卡片详情数据需要在多个路由页面复用，不想重复触发接口请求

就算要上全局状态，也优先选轻量方案：如果只有少量全局状态，用React自带的Context API即可；如果状态逻辑稍复杂，选Zustand这类低样板代码的轻量库就行。Redux对于单页面兄弟组件通信的场景来说过重，大量的action、reducer样板代码属于无意义的冗余工作量。

内容的提问来源于stack exchange，提问作者n_d22