React中使用createPortal时componentDidMount在DOM挂载前触发的问题

问题重现 #

你尝试在ComponentA的componentDidMount中渲染ComponentB，想确保ComponentA挂载完成后再渲染它，但发现ComponentB还是提前出现了。你的代码如下：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ComponentB from './ComponentB'; 

class ComponentA extends React.Component { 
  constructor(props) { 
    super(props); 
    this.condition = this.props.condition; 
  } 

  render() { 
    return ReactDOM.createPortal( 
      <div id="abc"></div>, 
      document.getElementById('xyz')
    ) 
  } 

  componentDidMount() { 
    ReactDOM.createPortal( 
      <div> 
        { this.condition && <ComponentB /> } 
      </div>, 
      document.body
    ) 
  } 
} 

为什么会提前渲染？ #

核心问题在于：ReactDOM.createPortal只是创建一个React元素对象，并不会直接触发渲染，但你在componentDidMount里调用它时，这个元素会被同步加入React的渲染队列，和ComponentA的挂载流程几乎并行执行。

更关键的是，这个在componentDidMount里创建的Portal和ComponentA的生命周期没有绑定关系，它是一个独立的渲染操作，所以React不会特意等待ComponentA完全挂载完成后再处理它。

正确的解决办法 #

要实现“ComponentA挂载完成后再渲染ComponentB”的需求，需要把ComponentB的渲染逻辑和ComponentA的生命周期绑定起来，推荐两种方案：

方案1：用状态控制渲染（推荐，符合React声明式模型）

通过组件内部状态标记挂载状态，在render的Portal中根据状态渲染ComponentB：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ComponentB from './ComponentB'; 

class ComponentA extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = {
      isMounted: false, // 标记组件是否已完成挂载
      condition: props.condition
    }; 
  } 

  componentDidMount() {
    // 挂载完成后更新状态，触发重新渲染
    this.setState({ isMounted: true });
  }

  render() { 
    return ReactDOM.createPortal( 
      <div id="abc">
        {/* 仅当挂载完成且条件满足时，渲染ComponentB */}
        { this.state.isMounted && this.state.condition && <ComponentB /> }
      </div>, 
      document.getElementById('xyz')
    ) 
  } 
} 

方案2：在componentDidMount中手动渲染（适用于需独立挂载到body的场景）

如果必须把ComponentB渲染到document.body而非ComponentA的Portal容器里，可以在componentDidMount中使用ReactDOM.render（React 18+需用createRoot），确保挂载后触发渲染：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ComponentB from './ComponentB'; 

class ComponentA extends React.Component { 
  constructor(props) { 
    super(props); 
    this.condition = this.props.condition; 
    this.bContainer = null;
  } 

  componentDidMount() {
    // 创建容器并挂载到body
    this.bContainer = document.createElement('div');
    document.body.appendChild(this.bContainer);

    // 条件满足时渲染ComponentB
    if (this.condition) {
      // React 17及以下版本
      ReactDOM.render(<ComponentB />, this.bContainer);
      // React 18+版本请替换为：
      // const root = ReactDOM.createRoot(this.bContainer);
      // root.render(<ComponentB />);
    }
  }

  componentWillUnmount() {
    // 组件卸载时清理容器，避免内存泄漏
    if (this.bContainer) {
      // React 17及以下
      ReactDOM.unmountComponentAtNode(this.bContainer);
      // React 18+
      // const root = ReactDOM.createRoot(this.bContainer);
      // root.unmount();
      document.body.removeChild(this.bContainer);
    }
  }

  render() { 
    return ReactDOM.createPortal( 
      <div id="abc"></div>, 
      document.getElementById('xyz')
    ) 
  } 
} 

额外提示 #

• 避免在生命周期中直接执行独立渲染操作却不做清理，容易造成内存泄漏。
• 优先选择状态控制的方案，更符合React的设计思想，代码也更易维护。

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