如何在浏览器调整大小时重新渲染 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中文网其他相关文章！