我想知道如果事件監聽器的處理程式宣告在 useEffect 掛鉤之外，我是否可以清理事件監聽器，我看到許多示例和教程通過在 useEffect 掛鉤內實作處理函式以這種方式洗掉事件監聽器：
useEffect(() => {
function updateSize(){
setSize([window.innerWidth, window.innerHeight]);
};
window.addEventListener("resize", updateSize);
updateSize();
return () => window.removeEventListener("resize", updateSize);
}, []);
雖然我確實在 useEffect 掛鉤之外實作了處理程式，但偵聽器作業正常，但不確定它是否是正確的方法并且是否能夠被 useEffect 掛鉤清除，因為它在范圍之外。
const Component = () => {
const [size, setSize] = useState([0, 0]);
const updateSize = () => {
setSize([window.innerWidth, window.innerHeight]);
};
useEffect(() => {
window.addEventListener("resize", updateSize);
updateSize();
return () => window.remove
}, []);
return (
<>
</>
)
}
uj5u.com熱心網友回復：
當處理程式在 useEffect 掛鉤之外時如何洗掉/清理 EventListener？
即使處理程式（在您的情況下 - updateSize）是在掛鉤之外useEffect宣告的，您仍然可以參考它。如果它在鉤子之外宣告并不重要。
只需像處理普通偵聽器一樣將其洗掉（清理）即可。
useEffect(() => {
window.addEventListener("resize", updateSize);
return () => {
window.removeEventListener("resize", updateSize);
};
}, []);
注意：記得把它放在dependency array里面，useEffect然后把updateSizewith useCallbackhook 包起來。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533613.html
標籤：反应
下一篇：根據日期差異更改顏色-React