如何使用 React Hook `useWindowSize` 初始化 MobX Store 中的 window 大小？

Question

我在 FrameItStore 中有 win() 函数，其中 returns window.innerWidth & window.innerHeight。但它并不总是在 window 大小更改时更新。

FrameItStore.ts

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()

所以我想使用 Window Size Hook → https://www.npmjs.com/package/@react-hook/window-size 来更新尺寸。

问题是我不知道如何使用 hook 值初始化 win() 函数，因为 hooks 只能在 React Component 中调用？

我该怎么做？

Answer 1

由于您将 window 维度存储在 React 组件之外，如果您愿意，也可以在 React 组件之外更新它们。

例子

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

export class FrameItStore implements IFrameItStore {
  win = {
    width: window.innerWidth,
    height: window.innerHeight
  };

  constructor() {
    makeObservable(this, {
      win: observable,
      updateWin: action.bound
    });
    
    // Update this.win every time the window resizes
    window.addEventListener("resize", this.updateWin);
  }

  updateWin() {
    this.win.width = window.innerWidth;
    this.win.height = window.innerHeight;
  }
  
  // If your FrameItStore won't live for the entire duration of the application,
  // you can call this method to remove the event listener.
  destroy() {
    window.removeEventListener("resize", this.updateWin);
  }
}

如何使用 React Hook `useWindowSize` 初始化 MobX Store 中的 window 大小？

How to use a React Hook `useWindowSize` to initialize window size inside a MobX Store?

javascript

reactjs

mobx

mobx-react

FrameItStore.ts