如何在浏览器窗口大小调整时触发 React 重新渲染？-js教程-PHP中文网

如何在浏览器窗口大小调整时触发 React 重新渲染？

Patricia Arquette

发布： 2024-10-19 19:37:29

原创

566 人浏览过

How Can I Trigger Re-Rendering in React Upon Browser Window Resize?

如何在浏览器窗口大小调整时触发 React 重新渲染

上下文

在 React 中，根据浏览器窗口等外部因素优化视图更新调整大小至关重要，尤其是对于布局而言。一种方法是利用浏览器的窗口大小调整事件。

React Hook 方法

现代 React 使用钩子来优雅地处理此类场景。您可以创建一个监听调整大小事件的自定义钩子：

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

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 基于类的组件方法

对于基于类的组件，建议监听componentDidMount中的resize事件。这确保了组件使用初始屏幕尺寸更新其状态：

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

class ShowWindowDimensions extends React.Component {
  state = { width: 0, height: 0 };
  render() {
    return (
      <span>
        Window size: {this.state.width} x {this.state.height}
      </span>
    );
  }
  updateDimensions = () => {
    this.setState({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };
  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }
}</code>

登录后复制

通过采用这些技术，您可以在调整浏览器窗口大小时轻松触发 React 重新渲染，从而确保最佳的布局更新和响应行为供您申请。

以上是如何在浏览器窗口大小调整时触发 React 重新渲染？的详细内容。更多信息请关注PHP中文网其他相关文章！