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