useEffect
是 React 中的一个 Hook,用于在函数组件中执行副作用操作。它可以模拟类组件中的生命周期方法,如 componentDidMount
、componentDidUpdate
和 componentWillUnmount
。
useEffect
可以使代码更加简洁,避免了类组件中繁琐的生命周期方法。useEffect
的逻辑更加直观,易于理解和维护。useEffect
接受两个参数:
当需要在组件挂载、更新或卸载时执行某些操作时,可以使用 useEffect
。例如,数据获取、订阅、手动更改 DOM 等。
useEffect
要在屏幕尺寸改变时触发 useEffect
,可以将 window.innerWidth
或 window.innerHeight
作为依赖项。
import React, { useState, useEffect } from 'react';
function App() {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []); // 空数组表示只在组件挂载和卸载时执行
return (
<div>
<h1>Window Size</h1>
<p>Width: {windowSize.width}</p>
<p>Height: {windowSize.height}</p>
</div>
);
}
export default App;
useEffect
在每次渲染时都执行原因:useEffect
的依赖项数组为空,导致它在每次渲染时都执行。
解决方法:将需要监听的状态或 props 添加到依赖项数组中。
useEffect(() => {
// 副作用操作
}, [dependency]);
原因:在 useEffect
中添加了事件监听器,但没有在组件卸载时移除。
解决方法:在 useEffect
的返回函数中移除事件监听器。
useEffect(() => {
const handleResize = () => {
// 处理 resize 事件
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
通过以上内容,你应该对 useEffect
以及如何在屏幕尺寸改变时触发它有了全面的了解。
领取专属 10元无门槛券
手把手带您无忧上云