react组件如何销毁
如何销毁 React 组件
React 组件的销毁通常由 React 的生命周期机制自动管理，但可以通过以下方式手动触发或控制销毁过程：
条件渲染触发销毁
通过条件判断（如 if 或三元表达式）控制组件的渲染。当条件为 false 时，React 会从 DOM 中移除组件并触发卸载生命周期。
{showComponent && <MyComponent />}使用 key 属性强制重新创建
修改组件的 key 属性会强制 React 销毁旧实例并重新挂载新实例。适用于需要完全重置组件状态的场景。
<MyComponent key={uniqueId} />类组件中的手动清理
在类组件的 componentWillUnmount 生命周期中执行清理操作（如取消网络请求、清除定时器）。这是销毁前的最后阶段。
class MyComponent extends React.Component {
componentWillUnmount() {
clearInterval(this.timer);
}
}函数组件中的副作用清理
通过 useEffect 的返回函数实现类似 componentWillUnmount 的清理逻辑。依赖项为空数组时仅在卸载时执行。
useEffect(() => {
return () => {
// 清理逻辑
};
}, []);路由切换时的卸载
在使用 React Router 等库时，路由变化会导致当前路由组件卸载。可通过路由配置或导航逻辑间接触发销毁。
注意事项
- 避免直接操作 DOM 节点删除组件，这可能导致内存泄漏或状态不一致。
- 确保清理所有副作用（如事件监听、定时器），防止卸载后仍占用资源。
- 对于全局状态（如 Redux），需在卸载时考虑是否需要保留或重置数据。
