关于React卸载组件

最新推荐文章于 2025-04-29 12:00:00 发布

士女士女子

最新推荐文章于 2025-04-29 12:00:00 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_52199120/article/details/131012039

在React18之前，卸载组件通常使用ReactDOM.unmountComponentAtNode()，但自React18开始，推荐使用root.unmount()。文章介绍了如何在入口文件中导出root，并在类式组件和函数式组件中调用unmount()方法来卸载组件，同时清理相关资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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