Do I need to call `unmountComponentAtNode` if the component container is removed?

Question

I represent a React component SettingsTabin a shell TeamView. Its API looks something like this:

class TeamView {
  constructor() {
    this.el = document.createElement('div');
  }

  render() {
    ReactDOM.render(<SettingsTab/>, this.el);
    return this;
  }

  remove() {
    this.el.remove(); 
  }
}

used something like

// to present the team view
const teamView = new TeamView();
document.body.appendChild(teamView.render().el);

// to remove the team view
teamView.remove();

And what interests me, should I TeamView#removecall ReactDOM. unmountComponentAtNode(this.el)before the callthis.el.remove() ?

The examples that I can find on the Internet seem unmountComponentAtNodeto only need to be called if the container remains in the DOM; and a new example of portals just removes the container without calling unmountComponentAtNode.

But I'm not sure this is special, because it uses the portal, and this post makes it look as always a good practice to call unmountComponentAtNode.

Answer 1

, unmountComponentAtNode(), , , .

- componentDidMount, . , window ( React), Redux, setInterval .. , componentWillUnmount.

, DOM, unmountComponentAtNode, React , . componentWillUnmount , .

, , node. , , , (, , , ) componentDidMount.

Answer 2

this.el.remove(), unmountComponentAtNode(this.el), unmountComponentAtNode , remove .

, , div, click:

var tap = document.querySelector('.tap');
var other = document.querySelector('.other');
tap.addEventListener('click', function(e) {
  console.log(tap.getAttribute('data-name') + ' has been clicked');
  tap.remove();
});

other.addEventListener('click', function(e) {
  tap.click();
});

<div class="tap" data-name="tap">First Click me to remove me</div>
<div class="other">Then Click me </div>

Hide result

Answer 3

# response-internals :

, , @jiangangxiong : ,

• DOM
• and do not attach event handlers outside of Response
• and you only need to support modern browsers.

we only need a removecontainer to have component event handlers and garbage collection, no need to call unmountComponentAtNode.