react如何删除组件
删除 React 组件的几种方法
条件渲染
使用条件控制组件是否渲染，例如通过 state 或 props 判断是否返回 null：
function MyComponent({ shouldRender }) {
if (!shouldRender) return null;
return <div>内容</div>;
}动态渲染列表中的组件
通过过滤数组数据移除特定组件：
function List({ items }) {
const [listItems, setListItems] = useState(items);
const handleDelete = (id) => {
setListItems(listItems.filter(item => item.id !== id));
};
return (
<div>
{listItems.map(item => (
<div key={item.id}>
{item.text}
<button onClick={() => handleDelete(item.id)}>删除</button>
</div>
))}
</div>
);
}从父组件中移除子组件
通过父组件的状态控制子组件的存在：
function Parent() {
const [showChild, setShowChild] = useState(true);
return (
<div>
{showChild && <Child />}
<button onClick={() => setShowChild(false)}>删除子组件</button>
</div>
);
}卸载已挂载的组件
对于通过 ReactDOM.render() 手动挂载的组件，使用 ReactDOM.unmountComponentAtNode()：
const container = document.getElementById('root');
ReactDOM.render(<App />, container);
// 卸载组件
ReactDOM.unmountComponentAtNode(container);清理副作用
若组件包含副作用（如订阅、定时器），需在卸载时清理：
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => clearInterval(timer); // 清理函数
}, []);
