如何在react原生组件中手动插入和移除子视图(不触发渲染)？

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
  }

  componentDidMount() {
    const container = this.containerRef.current;
    const childElement = document.createElement('div');
    container.appendChild(childElement);
    ReactDOM.render(<ChildComponent />, childElement);
  }

  componentWillUnmount() {
    const container = this.containerRef.current;
    const childElement = container.firstChild;
    ReactDOM.unmountComponentAtNode(childElement);
    container.removeChild(childElement);
  }

  render() {
    return <div ref={this.containerRef}></div>;
  }
}

class ChildComponent extends Component {
  render() {
    return <div>Child Component</div>;
  }
}