React中如何使用共享组件引用实现同组件双渲染不重复挂载？

核心要满足三个约束：不做状态提升、不重复执行componentDidMount中的批量API调用、两处渲染的组件状态实时同步。本质要解决两个问题：阻断重复的挂载逻辑执行，实现跨组件的状态实时同步。以下是两种可直接落地的方案： #

方案1：单实例+React Portal双点位投射（优先选择） #

这是适配成本最低、最贴合需求的方案，核心思路是只初始化、挂载一个Component A实例，从根源上避免重复触发生命周期，状态天然完全同步——毕竟两个位置渲染的本来就是同一个组件，根本不存在状态不同步的问题。
实现步骤：

• 在Container的顶部、底部目标渲染位置，预先放置两个空DOM节点作为渲染锚点
• 不要在两个锚点位置直接写两次<ComponentA />标签，仅在Container内挂载一次Component A
• 借助ReactDOM.createPortal能力，将这一个Component A实例的输出分别投射到顶部、底部两个锚点节点即可。

核心实现代码：

import { createPortal } from 'react-dom'
import { useEffect, useRef, useState } from 'react'
import ComponentA from './ComponentA'

function Container() {
  const topSlotRef = useRef(null)
  const bottomSlotRef = useRef(null)
  const [slotReady, setSlotReady] = useState(false)

  // 等待两个锚点DOM挂载完成后再渲染组件，避免Portal找不到目标节点
  useEffect(() => {
    if (topSlotRef.current && bottomSlotRef.current) setSlotReady(true)
  }, [])

  return (
    <div className="container">
      {/* 顶部渲染锚点 */}
      <div ref={topSlotRef} className="comp-a-top"></div>

      {/* 容器中间的其他业务内容 */}
      <div className="container-main">{/* 其他业务组件 */}</div>

      {/* 底部渲染锚点 */}
      <div ref={bottomSlotRef} className="comp-a-bottom"></div>

      {/* 全局仅挂载这一次Component A，不存在第二个实例 */}
      {slotReady && <SingleInstanceA topRef={topSlotRef} bottomRef={bottomSlotRef} />}
    </div>
  )
}

function SingleInstanceA({ topRef, bottomRef }) {
  // 整个生命周期内只初始化一次Component A，componentDidMount仅触发一次
  const compInstance = <ComponentA />
  return (
    <>
      {createPortal(compInstance, topRef.current)}
      {createPortal(compInstance, bottomRef.current)}
    </>
  )
}

这个方案不需要修改Component A的内部代码，没有额外的状态同步逻辑，完全不会重复触发挂载阶段的API调用，是首选方案。 #

方案2：模块级共享Store+挂载锁（适配无法使用Portal的场景） #

如果受DOM层级、样式隔离、微前端沙箱等限制无法使用Portal，可以选择这个方案，不需要将状态提升到Container组件，也能满足所有约束。
核心逻辑分为两部分：

• 将Component A的所有状态抽离到组件外的模块级单例Store中，两个位置渲染的Component A实例都直接读写这个独立于React树的Store，实现状态实时同步，不需要依赖父组件传值
• 在组件模块内增加一个全局挂载锁，保证componentDidMount中的API调用逻辑全局仅执行一次，后续挂载的实例直接复用已经请求完成的接口数据即可。

核心实现代码：

import React from 'react'

// 模块级单例变量，不受React组件树销毁、重建影响
let mountLocked = false
const globalStore = {
  state: {}, // 存储Component A的所有状态
  listeners: new Set(),
  update(patch) {
    this.state = { ...this.state, ...patch }
    this.listeners.forEach(triggerRerender => triggerRerender())
  },
  subscribe(triggerRerender) {
    this.listeners.add(triggerRerender)
    return () => this.listeners.delete(triggerRerender)
  }
}

class ComponentA extends React.Component {
  componentDidMount() {
    // 锁判断，只有第一个挂载的实例会执行批量API调用
    if (!mountLocked) {
      mountLocked = true
      // 此处放原有的所有API调用逻辑，请求完成后更新globalStore即可
      fetchAllRequiredData().then(res => {
        globalStore.update(res)
      })
    }
    // 所有挂载的实例都订阅Store变化，触发自身重渲染
    this.unsub = globalStore.subscribe(() => this.forceUpdate())
  }

  componentWillUnmount() {
    this.unsub?.()
    // 注意不要重置mountLocked，避免路由切换等场景下组件重挂载时重复触发请求
  }

  render() {
    // 组件所有渲染、交互逻辑直接读写globalStore.state即可
    return <div className="comp-a">{/* 组件原有业务内容 */}</div>
  }
}

// Container内直接在两个位置渲染ComponentA即可，不需要做额外的状态传递
function Container() {
  return (
    <div className="container">
      <ComponentA />
      <div className="container-main">{/* 其他业务内容 */}</div>
      <ComponentA />
    </div>
  )
}

注意：不要尝试仅用React Context实现需求。Context只能解决状态跨组件传递的问题，无法阻止两个独立的ComponentA实例各自触发componentDidMount执行重复API请求，不满足约束。

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