正确卸载React组件：示例组件能否通过unmountComponentAtNode点击卸载？

先来看你给出的组件代码：

export class Child extends React.Component{ 
  unmount() { 
    const node = ReactDOM.getDOMNode(this); 
    ReactDOM.unmountComponentAtNode(node ); 
  } 
  render() { 
    return <button onClick={this.unmount.bind(this)}>Unmount</button> 
  } 
}

很遗憾，这种写法没办法成功卸载组件，原因在于对ReactDOM.unmountComponentAtNode的使用理解有误：

• unmountComponentAtNode方法要求传入的是组件被挂载的根容器DOM节点，而不是组件自身渲染出来的DOM元素。
• 在你的代码里，ReactDOM.getDOMNode(this)拿到的是组件渲染出的<button>元素，这个元素并不是挂载Child组件的容器（比如你可能是在某个div#root里渲染的Child，那#root才是容器）。当你把button节点传给unmountComponentAtNode时，这个节点内部并没有挂载独立的React组件，所以调用后不会有任何卸载效果。

那正确的卸载方式应该是什么样的？

• React的设计理念是声明式渲染，组件的挂载/卸载应该由父组件通过状态来控制。比如父组件维护一个isShowChild的状态，当需要卸载子组件时，把这个状态设为false，父组件就不会再渲染Child组件，从而完成卸载。
• 如果非要使用unmountComponentAtNode，你需要拿到挂载Child的根容器节点（比如通过document.getElementById获取），但这种方式破坏了React的数据流，不推荐在业务代码中使用。

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