React中同级组件如何传递数据，有没有更简洁的实现方案？

方案1：ABCD为需要渲染的UI组件 #

无需声明4个独立状态，直接复用父组件传入的getReturn即可省去最后一层状态和副作用，简化后代码如下：

const TestComponent = ({originalData, getReturn}) => {
    const [dataFromA, setDataFromA] = useState();
    const [dataFromB, setDataFromB] = useState();
    const [dataFromC, setDataFromC] = useState();

    return (
        <>
            <A data={originalData} getReturn={setDataFromA}/>
            <B data={dataFromA} getReturn={setDataFromB}/>
            <C data={dataFromB} getReturn={setDataFromC}/>
            <D data={dataFromC} getReturn={getReturn}/>
        </>
    )
}

如果后续会新增处理步骤，可以进一步把处理链封装为配置项，无需重复写组件调用逻辑：

// 处理链配置，新增步骤仅需修改该数组
const PROCESSORS = [A, B, C, D]

const TestComponent = ({originalData, getReturn}) => {
  const [midData, setMidData] = useState(Array(PROCESSORS.length - 1).fill(undefined))

  return (
    <>
      {PROCESSORS.map((Comp, idx) => {
        const input = idx === 0 ? originalData : midData[idx - 1]
        const onReturn = idx === PROCESSORS.length - 1 
          ? getReturn 
          : (val) => setMidData(prev => prev.with(idx, val))
        return <Comp key={idx} data={input} getReturn={onReturn} />
      })}
    </>
  )
}

方案2：ABCD仅做数据处理无UI渲染 #

完全不需要封装为组件，直接把处理逻辑抽为纯函数，用管道调用即可，性能更高代码更简洁：

// 按顺序抽取四个组件的处理逻辑为纯函数
const processA = (data) => {/* 原A组件返回数据的处理逻辑 */}
const processB = (data) => {/* 原B组件返回数据的处理逻辑 */}
const processC = (data) => {/* 原C组件返回数据的处理逻辑 */}
const processD = (data) => {/* 原D组件返回数据的处理逻辑 */}

const TestComponent = ({originalData, getReturn}) => {
  useEffect(() => {
    const finalData = processD(processC(processB(processA(originalData))))
    getReturn(finalData)
  }, [originalData, getReturn])

  return null // 或其他需要渲染的UI
}

如果处理步骤多可以用reduce优化调用逻辑：

const PROCESS_FNS = [processA, processB, processC, processD]
const finalData = PROCESS_FNS.reduce((prev, fn) => fn(prev), originalData)

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