如何在 React 中重新渲染瀏覽器調整大小的視圖：jQuery 與 React Hooks 和類別？

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

背景

利用React，您可以根據瀏覽器動態調整網頁上元素的佈局視窗大小。但是，當視窗調整大小並且視圖不會自動更新時，您可能會遇到問題。本文解決了一個常見問題：如何在瀏覽器視窗大小調整時觸發重新渲染。

程式碼

考慮以下React 應用程序，其元件層次結構由MyApp 元件、代表頁面上各個區塊的Block 元件，以及代表區塊集合的Blocks 元件：

問題

除了使用jQuery 的視窗調整大小事件之外，是否有更「React」的監聽方式用於瀏覽器調整大小事件並觸發重新渲染？

答案

使用 React Hooks

React Hooks 提供了更乾淨、更實用的方法。您可以建立一個自訂Hook 來監聽視窗調整大小事件：

<code class="javascript">function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}</code>

使用React 類別

在React 類別中，您可以在componentDidMount 生命週期方法中監聽調整大小事件：

<code class="javascript">componentDidMount() {
  window.addEventListener('resize', this.updateDimensions);
}
componentWillUnmount() {
  window.removeEventListener('resize', this.updateDimensions);
}</code>

這種方法更加冗長，但仍然提供了一個乾淨的實作。

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