根据窗口的宽度,我有不同的内容页面要应用。我使用以下条件:
{window.innerWidth > 575 ? <Big component> : <Little component>}
它工作得很好,但如果你不手动重新加载就减少页面,就不行了。
我试着在上面实现useEffect,但是我不知道如何通过widows.width的变化来触发它。请你帮帮我好吗?
这是我的代码:
const [windowSize, setWindowSize] = useState(window.innerWidth);
useEffect(() => {
setWindowSize(window.innerWidth);
});
return (
...
{windowSize > 575 ? <Big component> : <Little component>}
...
);
先谢谢你了。
3条答案
按热度按时间yks3o0rb1#
如果不注册事件侦听器,则无法实现
innerWidth
的更新。下面是一个使用事件侦听器的方法:
您可以在
useEffect
钩子中添加和删除事件。您可以使用
useCallback
钩子创建memoized
处理程序。这就是所谓的
callback pattern
。在这里,我们只是使用更新的innerWidth设置状态,最好使用
callback pattern
并仅在初始挂载时注册事件侦听器。如果你在
useEffect
钩子中注册事件,listeners引用沿着词法作用域将被事件侦听器使用,但是一个新的函数将在每个新的render上创建一个更新的闭包,阻止处理程序访问更新的状态。关于
useCallback
和here的更多信息。7kqas0il2#
您可以使用
window.onresize
您可以检查here。你可以在钩子中使用
window.addEventListener('resize', reportWindowSize)
。wydwbb8l3#
使用Utsav和MDN文档去抖动,这是我为我的应用程序创建的自定义钩子
然后在组件中调用它