如何在 React 中每次加载页面时 运行 一个函数

Question

我有一个函数，它获取一个元素的高度并将相同的高度设置为另一个元素。

所以我的计划是 运行 每当页面加载到 user/refreshed 以及 window 调整大小时都使用此函数。

    // Nav Components Resize Logic
    function resizeNavComponent() {
      let naver = $(".naver");
      let mainNavDiv = $(".main_Nav");
      let menubar = $(".menubar");
      let naverHeight = naver.outerHeight();
      console.log(naverHeight);

      // Set height of mainNavDiv and top of menubar as of naver
      mainNavDiv.height(naverHeight);
      $(menubar).css({ top: naverHeight });
    }

我看到一些人 post 告诉我使用 useState 但作为 React 的初学者，我对如何在我的代码中使用它有点困惑

我正在使用 React Class 组件！

Answer 1

您可以使用 useState 挂钩并存储页面尺寸的值，并在每次页面加载或状态更改时使用 useEffect 挂钩 运行 一个函数

const [dimensions, setDimensions] = useState(pageDimensions)

useEffect(() => {
    // the function you want to call
}, [dimensions])

因此流程是 - 您首先必须计算页面的尺寸并将其设置为状态的初始值。然后，无论您希望在每次页面加载或调整大小时调用什么函数，都可以在 useEffect 挂钩函数中写入。最后制作另一个函数或使用 useEffect，您可以在其中检查页面何时调整大小时，以便您可以将状态设置为新的尺寸。