React卸载组件

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

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

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

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

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

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

类式组件：

1.  
   import {root} from '../../index'
2.  
    
3.  
   class Demo extends React.Component {
4.  
   unmount = () => {
5.  
   root.unmount();
6.  
   }
7.  
   componentWillUnmount() {
8.  
   clearInterval(this.timer)
9.  
   }
10.  
    render() {
11.  
    return (
12.  
    <div>
13.  
    <button onClick={this.unmount}>点我卸载组件</button>
14.  
    </div>
15.  
    )
16.  
    }
17.  
    }

函数式组件：

1.  
   import {root} from '../../index'
2.  
   //函数式组件
3.  
   function Demo() {
4.  
   React.useEffect(() => {
5.  
   return () => {
6.  
   clearInterval(timer);
7.  
   }
8.  
   },[])
9.  
    
10.  
    //卸载组件的回调
11.  
    function unmount() {
12.  
    root.unmount();
13.  
    }
14.  
    return(
15.  
    <div>
16.  
    <button onClick={unmount}>点我卸载组件</button>
17.  
    </div>
18.  
    )
19.  
    }
20.  
    export default Demo

这篇好文章是转载于：学新通技术网