数据构组
网络
RDBMS
运维系统
Java
MS Excel
iOS
HTML
CSS
安仁度
Python
C 编码
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
创料
生哲
数学
英语
维拉师
军男师
社会学
料运学
法科学ReactJS — 使用 任何 hook 进行清理
在本文中，我们将了解如何在 functional component 中清除 任何 hook 中设置的订阅。
创建效果后，需要在组件从 DOM 中移除之前对其进行清除。为此，清除效果用于在再次使用同一组件的该 hook 之前移除上一个 任何 hook 的效果。
语法
useEffect(()=>{
return ()=>{}
}
,[]);示例
在此示例中，我们将构建一个 React 应用程序，该应用程序将在鼠标指针在屏幕上移动时显示鼠标指针的坐标。为了实现这一目标，我们将编写带有清除效果 和不带有清除效果 的代码。
不带清除效果
示例
App.jsx
import React, { useEffect, useState } from 'react';
function App() {
return (
<div className="App">
<Comp />
</div>
);
}
function Comp() {
useEffect(() => {
document.addEventListener('mousemove', mouseHandler);
}, []);
const mouseHandler = (e) => {
console.log(e.clientX, e.clientY);
};
return (
<div>
<h1>Tutorialspoint</h1>
</div>
);
}
export default App;在上一个示例中，我们没有移除上一个 任何 hook 的数据，这会影响此 hook 返回的新数据。
输出
这将产生以下结果。
带有清除效果
示例
App.jsx
import React, { useEffect, useState } from 'react';
function App() {
return (
<div className="App">
<Comp />
</div>
);
}
function Comp() {
useEffect(() => {
document.addEventListener('mousemove', mouseHandler);
return () => {
document.removeEventListener('mousemove', mouseHandler);
};
}, []);
const mouseHandler = (e) => {
console.log(e.clientX, e.clientY);
};
return (
<div>
<h1>Tutorialspoint</h1>
</div>
);
}
export default App;在上一个示例中，带清除效果 调用 任何 hook，因此，每次组件被销毁时，此 hook 的效果都会被移除。
输出
这将产生以下结果。
更新时间：2021 年 3 月 18 日
55 次浏览
广告