當瀏覽器視窗大小調整時，如何在 React 中重新渲染視圖？

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

在React 中，可以在調整瀏覽器視窗大小時自動更新視圖，提供響應式使用者體驗。

視窗調整大小偵測

新增 jQuery 的視窗調整大小偵聽器是偵測視窗調整大小的簡單方法。然而，React 提供了一些更多 React 特有的方法：

React Hooks

React Hooks 提供了一種聲明性方式來添加視窗調整大小處理。 useWindowSize Hook 可以定義如下：

<code class="javascript">import React, { useLayoutEffect, useState } from 'react';

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

React 類別元件

對於類別元件，可以使用生命週期方法 componentDidMount 開始監聽視窗大小調整事件。以下程式碼示範了這一點：

<code class="javascript">import React from 'react';

class ShowWindowDimensions extends React.Component {
  state = { width: 0, height: 0 };

  updateDimensions = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  };

  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }

  render() {
    return <span>Window size: {this.state.width} x {this.state.height}</span>;
  }
}</code>

透過將視窗調整大小偵測合併到 React 應用程式中，您可以確保您的 UI 保持響應並無縫適應不同的螢幕尺寸。

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