所以我有这个钩子来返回windowWidth我的 App 组件。我将此称为Option #1。
import {useEffect, useState} from 'react';
function useWindowWidth() {
const [windowWidth,setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
function handleResize() {
setWindowWidth(window.innerWidth);
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowWidth;
}
export default useWindowWidth;
现在我基本上在每个依赖窗口宽度渲染的组件上使用它,例如:
function Component(props) {
const windowWidth = useWindowWidth();
return(
// RETURN SOMETHING BASED ON WINDOW WIDTH
);
}
由于钩子有一个事件监听器resize,组件即使在窗口调整大小后也能保持响应。
但我担心我正在为每个使用该钩子的组件附加一个新的侦听器,这可能会在某些时候减慢速度。我想过其他方法:
选项#2
我useWindowWidth()只在顶级组件中使用了一次钩子,例如<App/>,我将windowWidth通过上下文在链中提供值。
喜欢:
function App() {
const windowWidth = useWindowWidth();
return(
<WindowWidthContext.Provider value={windowWidth}>
<Rest_of_the_app/>
</WindowWidthContext.Provider>
);
}
然后,每个需要它的组件都可以通过:
function Component() {
const windowWidth = useContext(WindowWidthContext);
return(
// SOMETHING BASED ON WINDOW WIDTH
);
}
问题
我是否对我正在resize使用选项 #1设置多个侦听器这一事实感到困扰?是选择2的好办法租期,提高该流?
慕桂英3389331
白猪掌柜的
相关分类