当浏览器窗口大小调整时，如何在 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中文网其他相关文章！