如何在瀏覽器調整大小時重新渲染 React 視圖：jQuery 與以 React 為中心的方法？

使用React 在瀏覽器調整大小時重新渲染視圖

在給定的React 應用程式中，目標是在以下情況下重新渲染視圖：瀏覽器視窗的大小已調整。這可以動態調整 UI 元素，例如類似 Pinterest 的佈局中區塊的定位。

使用視窗大小調整庫：

一種常見的方法是按照問題中的建議，使用 jQuery 的視窗調整大小事件。透過新增以下程式碼，您可以在調整視窗大小時重新渲染元件：

$( window ).resize(function() {
  // Re-render the component
});

React-Centric Approach：

但是，有一個更多「React 」方法使用useEffect Hook 來實現此目的。這個 Hook 允許您在元件中執行副作用，例如監聽視窗事件。要使用useEffect 來調整視窗大小，您可以像這樣定義自訂Hook：

import React, { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

然後您可以在元件中使用此Hook 來存取視窗大小並在視窗大小變更時觸發重新渲染：

import React, { useState, useEffect } from 'react';
import { useWindowSize } from './useWindowSize';

function MyApp() {
  // ...
  const [windowSize, setWindowSize] = useWindowSize();

  useEffect(() => {
    // Re-render the component when the window size changes
    setWindowSize(useWindowSize());
  }, [windowSize]);

  return (
    // ...
  );
}

這種方法更封裝，並且遵循React 的生命週期模式，保持組件的程式碼整潔且可維護。

以上是如何在瀏覽器調整大小時重新渲染 React 視圖：jQuery 與以 React 為中心的方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！