使用 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中文网其他相关文章！
