Javascript 屏幕尺寸更改时触发useEffect

我有以下

useffect

useEffect(() => {
  Draggable.create(sliderRef.current, {
    type: "x",
    bounds: {
      minX: 0,
      maxX: -document.getElementById('slider').offsetWidth + window.innerWidth
    }
  });
}, [document.getElementById('slider')])

我想在屏幕大小改变时触发它 我试图在dependencies数组中传递参数

window.innerWidth

或

document.getElementById（'root'）

然而，没有成功。。。

---

我非常感谢您的帮助

您试图在React生命周期内使用命令式DOM代码-您不能（至少不能这样）

useffect

依赖项只能依赖于对跟踪做出反应的变量：状态和道具。React无法知道文档.getElementById（'slider'）何时更改。它不知道那是什么，也不知道如何检查。依赖项更改检查代码不是在循环中运行的，而是不断检查变量。它仅在该组件的

状态

或

道具

更改时运行。如果它们没有更改，React将不会检查依赖项，也不会知道它们已更改

---

您应该管理需要侦听窗口更改的任何代码，这些代码需要以旧的vanilla JS方式运行。

useffect

需要有一个依赖项，如果您希望它重新调用回调，则该依赖项会发生更改，因此使用plain

document.getElementById

不会起作用

就我个人而言，我建议使用已经针对此类事件进行了优化的

[ResizeObserver][1]

const resizeObserver=新的resizeObserver（条目=>{
for（让条目的输入）{
//…条目包含有关元素维度的完整信息
}
});
resizeObserver.observe（document.getElementById（'slider'）；

在React应用程序中，我将使用

useffect

开始和停止观察元素大小

函数应用程序（）{
useffect（（）=>{
//开始收听应用程序启动
resizeObserver.observe（document.getElementById（'slider'）；
return（）=>{
//干净的
resizeObserver.unobserve（document.getElementById（'slider'）；
}
}, []);
}

为什么要在useffect的输入数组中使用document.getElementById（'slider'）呢？这是必要的，因为它是可拖动的