如何设计带内置数据请求的依赖型React组件以实现多页面复用？

核心设计思路 #

采用受控组件+状态提升的模式，将选中值的状态托管给调用方父组件，每个Picker组件只负责自身选项数据的拉取、渲染逻辑，通过回调同步选中值到父组件。

各组件实现规范 #

每个Picker组件统一遵循入参约定，保证复用性：

• CompetitionsPicker
  • 入参：value（当前选中的赛事）、onChange（选中变更回调，参数为新选中的赛事）
  • 内部逻辑：组件挂载后自行拉取全量赛事列表，用户选中时调用onChange抛出选中值
• SeasonsPicker
  • 入参：competition（选中的赛事依赖）、value（当前选中的赛季）、onChange（选中变更回调）
  • 内部逻辑：监听competition变化，当competition有有效值时拉取对应赛事的赛季列表，competition为空时组件禁用/展示空选项；用户选中时调用onChange抛出选中值
• TeamsPicker
  • 入参：competition（选中的赛事依赖）、season（选中的赛季依赖）、value（当前选中的球队）、onChange（选中变更回调）
  • 内部逻辑：监听competition和season变化，两个依赖都有有效值时拉取对应赛事+赛季的球队列表，任意依赖为空时组件禁用/展示空选项；用户选中时调用onChange抛出选中值

调用示例 #

父组件只需管理自身需要的状态即可，不需要的Picker可以直接省略：

import { useState } from 'react'
import CompetitionsPicker from './CompetitionsPicker'
import SeasonsPicker from './SeasonsPicker'
import TeamsPicker from './TeamsPicker'

// 完整使用三个Picker的页面
export default function FullPage() {
  const [competition, setCompetition] = useState(null)
  const [season, setSeason] = useState(null)
  const [team, setTeam] = useState(null)

  return (
    <>
      <CompetitionsPicker 
        value={competition}
        onChange={setCompetition}
      />
      <SeasonsPicker 
        competition={competition}
        value={season}
        onChange={setSeason}
      />
      <TeamsPicker 
        competition={competition}
        season={season}
        value={team}
        onChange={setTeam}
      />
    </>
  )
}

// 仅使用前两个Picker的页面
export default function SimplePage() {
  const [competition, setCompetition] = useState(null)
  const [season, setSeason] = useState(null)

  return (
    <>
      <CompetitionsPicker 
        value={competition}
        onChange={setCompetition}
      />
      <SeasonsPicker 
        competition={competition}
        value={season}
        onChange={setSeason}
      />
    </>
  )
}

可选优化 #

如果业务中存在Picker组件和父组件层级较深、传递状态麻烦的场景，可以搭配React Context封装统一的上下文Provider，把选中状态和变更方法放在Context中，Picker组件内部直接消费Context即可，不需要逐层传参。
另外可以用SWR/React Query等数据请求库封装Picker内部的数据拉取逻辑，实现跨页面的请求缓存，复用相同参数的请求结果，减少重复接口调用。

内容的提问来源于stack exchange，提问作者Antonio L.