Javascript 如何使用React钩子'UseWindowsSize'在MobX存储中初始化窗口大小？

我在

FrameItStore

中有

win（）

函数，它返回

window.innerWidth

和

window.innerHeight

。但它并不总是在窗口大小改变时更新

FrameItStore.ts 所以我想用窗户大小的挂钩→ 以获取更新的维度

问题是我不知道如何使用钩子值初始化

win（）

函数，因为钩子只能在React组件中调用

---

如何执行此操作？

因为您将窗口维度存储在React组件之外，如果愿意，您也可以在React组件之外更新它们

示例

从'mobx'导入{makeObservable，observable，action}；
导出类FrameItStore实现IFrameItStore{
赢={
宽度：window.innerWidth，
高度：window.innerHeight
};
构造函数（）{
使可观察到（这个{
温：可见，
updateWin:action.bound
});
//每次调整窗口大小时更新this.win
window.addEventListener（“resize”，this.updateWin）；
}
updateWin（）{
this.win.width=window.innerWidth；
this.win.height=window.innerHeight；
}
//如果您的FrameItStore在整个应用程序期间都无法使用，
//您可以调用此方法来删除事件侦听器。
销毁{
removeEventListener（“resize”，this.updateWin）；
}
}

但这并没有利用挂钩。这只是将整个窗口大小代码写入类

FrameItStore

。我不能设置hooks元组值并在MobX存储中设置它，同时初始化并以某种方式更新它吗？我丢弃了hooks包并使用了您的方法，但我想知道我的问题的答案：）@deadcoder0904是的，它没有使用hooks，但我认为对于这个特定的用例，最好将该逻辑与视图解耦。我不知道如何使用这些挂钩在商店中设置窗口尺寸，但是如果您只是单独使用React，而不是全局MobX商店，它可能会非常有用。

import { makeObservable, observable, action, computed } from 'mobx'

export class FrameItStore implements IFrameItStore {
  constructor() {
    makeObservable(this, {
      win: observable,
    })
  }

  win(): Window {
    return {
      width: window.innerWidth,
      height: window.innerHeight,
    }
  }
}

export const config = new FrameItStore()