数据构组
网络
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 次瀏覽
廣告