react中的portal是做什么的

const dogRoot = document.getElementById("dog-house");

const catRoot = document.getElementById("cat-house");

class Puppy extends React.Component {

  constructor(props) {

    super(props);

    // 创建一个容器标签

    this.el = document.createElement("div");

  }

  componentDidMount() {

    // 把容器标签挂到 catRoot DOM下

    catRoot.append(this.el);

  }

  componentWillUnmount() {

    catRoot.removeChild(this.el);

  }

  render() {

    // 利用portal把Puppy的内容放到容器里

    return ReactDOM.createPortal(this.props.children, this.el);

  }

}

class Dog extends React.Component {

  constructor(props) {

    super(props);

    this.state = { bark: 0 };

    this.handleClick = this.handleClick.bind(this);

  }

  handleClick() {

    // 点击的时候 bark + 1

    this.setState((state) => ({

      bark: state.bark + 1,

    }));

  }

  render() {

    // 看上去Puppy组件是在Dog挂在Dog组件里，但其实它被挂载在其它地方

    return (

      <div onClick={this.handleClick}>

        <p>The number of times a big dog barks: {this.state.bark}</p>

        <h3>Dog: </h3>

        <p>I can't see my children, but I can feel them</p>

        <Puppy>

          <Bully target={'Puppy'}/>

        </Puppy>

        <Bully target={'Dog'}/>

      </div>

    );

  }

}

ReactDOM.render(<Dog />, dogRoot);

function Bully(props) {

  return (

    <>

      <button>Bully the {props.target}</button>

    </>

  );

}