如何拆分强耦合React组件的两个部分并避免事件处理代码重复？

方案1：自定义Hook + 无状态视图组件（轻量首选） #

将两个组件共享的状态、联动逻辑全部抽离到独立的自定义Hook中统一维护，两个视图组件仅做props接收和渲染，无需内置业务逻辑。

实现代码 #

// 抽离所有公共逻辑的自定义Hook，全局只维护一份
import { useState } from 'react'

const useCoupledModule = () => {
  // 共享状态
  const [part1Input, setPart1Input] = useState('')
  const [part2Options, setPart2Options] = useState([])

  // 所有联动事件处理逻辑
  const handlePart1Change = (val) => {
    setPart1Input(val)
    // 联动修改第二部分的逻辑
    setPart2Options(prev => prev.filter(item => item.includes(val)))
  }

  const handlePart2Select = (item) => {
    setPart1Input(item)
    // 其他联动逻辑
  }

  // 返回两个组件需要的所有props
  return {
    part1Props: {
      value: part1Input,
      onChange: handlePart1Change
    },
    part2Props: {
      options: part2Options,
      onSelect: handlePart2Select
    }
  }
}

// 仅负责渲染的第一部分组件
export const ModulePart1 = (props) => {
  return (
    <div className="module-part1">
      <input value={props.value} onChange={e => props.onChange(e.target.value)} />
    </div>
  )
}

// 仅负责渲染的第二部分组件
export const ModulePart2 = (props) => {
  return (
    <div className="module-part2">
      {props.options.map(opt => (
        <div key={opt.id} onClick={() => props.onSelect(opt.value)}>
          {opt.label}
        </div>
      ))}
    </div>
  )
}

页面使用示例 #

// 任意页面使用，仅需调用一次Hook，两个组件可放置在任意布局位置
import { useCoupledModule, ModulePart1, ModulePart2 } from '@/components/CoupledModule'

const DemoPage = () => {
  const { part1Props, part2Props } = useCoupledModule()
  return (
    <div className="demo-page">
      {/* 第一部分放在头部 */}
      <header>
        <ModulePart1 {...part1Props} />
      </header>
      <main>
        <div className="other-content">其他页面内容</div>
        {/* 第二部分放在主体底部 */}
        <ModulePart2 {...part2Props} />
      </main>
    </div>
  )
}

适用场景 #

两个组件在页面内层级较浅，传参路径短，无需跨多级组件传递数据，是最轻量化的解决方案。

方案2：Context Provider + 自定义消费Hook（灵活度更高） #

如果两个组件需要跨多层级组件放置，传参麻烦，可以用Context封装共享逻辑，两个组件内部直接消费Context数据，无需手动传props。

实现代码 #

import { createContext, useContext, useState } from 'react'

const CoupledModuleContext = createContext(null)

// 公共逻辑Provider
export const CoupledModuleProvider = ({ children }) => {
  // 和方案1相同的共享状态和联动逻辑
  const [part1Input, setPart1Input] = useState('')
  const [part2Options, setPart2Options] = useState([])

  const handlePart1Change = (val) => {
    setPart1Input(val)
    setPart2Options(prev => prev.filter(item => item.includes(val)))
  }

  const handlePart2Select = (item) => {
    setPart1Input(item)
  }

  return (
    <CoupledModuleContext.Provider value={{
      part1Props: { value: part1Input, onChange: handlePart1Change },
      part2Props: { options: part2Options, onSelect: handlePart2Select }
    }}>
      {children}
    </CoupledModuleContext.Provider>
  )
}

// 自定义消费Hook
const useCoupledModule = () => useContext(CoupledModuleContext)

// 第一部分组件，内部自行消费Context
export const ModulePart1 = () => {
  const { part1Props } = useCoupledModule()
  return (
    <div className="module-part1">
      <input value={part1Props.value} onChange={e => part1Props.onChange(e.target.value)} />
    </div>
  )
}

// 第二部分组件，内部自行消费Context
export const ModulePart2 = () => {
  const { part2Props } = useCoupledModule()
  return (
    <div className="module-part2">
      {part2Props.options.map(opt => (
        <div key={opt.id} onClick={() => part2Props.onSelect(opt.value)}>
          {opt.label}
        </div>
      ))}
    </div>
  )
}

页面使用示例 #

import { CoupledModuleProvider, ModulePart1, ModulePart2 } from '@/components/CoupledModule'

const DemoPage = () => {
  return (
    {/* 只需在页面根节点包裹Provider */}
    <CoupledModuleProvider>
      <div className="demo-page">
        <aside>
          {/* 第二部分放在侧边栏 */}
          <ModulePart2 />
        </aside>
        <div className="content">
          <div className="deep-nested-block">
            {/* 第一部分放在深层嵌套的容器内，无需传参 */}
            <ModulePart1 />
          </div>
        </div>
      </div>
    </CoupledModuleProvider>
  )
}

适用场景 #

两个组件放置位置跨度大、嵌套层级深，或者后续需要扩展更多关联的子组件，布局自由度最高。

两种方案都可以实现逻辑全局统一维护，修改一次所有使用的页面自动生效，同时完全不限制两个组件的放置位置，不会产生重复的业务逻辑代码。

内容的提问来源于stack exchange，提问作者Bob T.