React组件卸载的几种情况

简介

React 组件的卸载(unmounting)阶段是指组件从DOM中被移除的过程。

几种情况

一个组件在其生命周期内只会经历一次卸载阶段。以下是一些可能触发组件卸载的情况：

• 父组件重新渲染导致子组件消失： 如果父组件的渲染逻辑改变，使得原本渲染的子组件不再需要被渲染，那么这个子组件将被卸载。

• 路由切换： 当使用像React Router这样的路由库时，切换到不同的路由通常会导致当前页面的组件被卸载，而加载新路由对应的组件。

• 条件渲染： 如果组件是基于某种条件才会渲染的，那么当这个条件不再成立时，组件会被卸载。

• 手动操作DOM： 如果你通过原始的JavaScript或者其他库直接操作DOM来移除了某个组件，那么这个组件也会被卸载。但请注意，直接操作DOM并不是React推荐的方式。

• 调用ReactDOM.unmountComponentAtNode()方法： 如果你调用了ReactDOM提供的unmountComponentAtNode()方法，并传入一个包含React组件的DOM节点，React会卸载该节点上的组件。

• Key属性变更： 如果你给组件分配了一个key属性，然后这个key属性发生变化，React会认为它是一个全新的组件，旧的组件会被卸载，而新的组件则会进行挂载(mounting)。

在组件卸载时，React会调用组件的componentWillUnmount生命周期方法（如果使用的是类组件）。你可以在componentWillUnmount里面执行一些清理工作，比如取消网络请求、移除事件监听器、取消任何的订阅等，以避免内存泄漏。对于函数组件，可以在useEffect Hook 的清理函数中进行相应的清理操作。