关于React卸载组件

在React18之前，卸载组件可以用ReactDOM中的unmountComponentAtNode来解决

import ReactDOM from 'react-dom';    
unmount = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'));
    }

但是删除节点 unmountComponentAtNode()，在React18中被root.unmount()所取代。

1.首先在index.js入口文件中，将root暴露出去

export const root = ReactDOM.createRoot(document.getElementById('root'));

2.在要卸载组件的文件中，引入root,并调用unmount()方法

类式组件：

import {root} from '../../index'

class Demo extends React.Component {
    unmount = () => {
        root.unmount();
    }
    componentWillUnmount() {
        clearInterval(this.timer)
    }
  render() {
    return (
      <div>
            <button onClick={this.unmount}>点我卸载组件</button>
      </div>
    )
  }
}

函数式组件：

import {root} from '../../index'
//函数式组件
function Demo() {
    React.useEffect(() => {
        return () => {
            clearInterval(timer);
        }
    },[])

    //卸载组件的回调
    function unmount() {
        root.unmount();
    }
    return(
        <div>
            <button onClick={unmount}>点我卸载组件</button>
        </div>
    )
}
export default Demo