react如何取消节点
取消 React 节点的方法
在 React 中取消或移除节点可以通过以下几种方式实现，具体取决于场景需求：
卸载组件
通过条件渲染或状态控制，直接移除组件实例。例如使用 useState 控制渲染：
const [showComponent, setShowComponent] = useState(true);
return (
<div>
{showComponent && <MyComponent />}
<button onClick={() => setShowComponent(false)}>卸载组件</button>
</div>
);使用 useEffect 清理副作用
对于需要清理资源的组件（如定时器、订阅等），在 useEffect 的清理函数中处理：
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => clearInterval(timer); // 组件卸载时执行清理
}, []);动态列表移除节点 通过过滤数组状态移除列表中的某一项：
const [items, setItems] = useState([1, 2, 3]);
const removeItem = (id) => {
setItems(items.filter(item => item !== id));
};Portal 的卸载
若节点通过 ReactDOM.createPortal 挂载到外部 DOM，需同时操作 React 状态和实际 DOM：
const [isPortalVisible, setIsPortalVisible] = useState(true);
return (
<>
{isPortalVisible && ReactDOM.createPortal(
<div>Portal内容</div>,
document.body
)}
<button onClick={() => setIsPortalVisible(false)}>关闭Portal</button>
</>
);Ref 操作 DOM（谨慎使用）
通过 useRef 直接操作 DOM 节点移除（非推荐做法，仅特定场景使用）：
const ref = useRef();
const removeNode = () => {
ref.current.parentNode.removeChild(ref.current);
};
return <div ref={ref}>待移除节点</div>;注意事项
- 优先使用 React 的状态驱动方式而非直接操作 DOM。
- 清理副作用是防止内存泄漏的关键步骤。
- 动态列表更新时需确保
key的稳定性。
