利用 React，您可以根据浏览器动态调整网页上元素的布局窗口大小。但是，当窗口调整大小并且视图不会自动更新时，您可能会遇到问题。本文解决了一个常见问题：如何在浏览器窗口大小调整时触发重新渲染。
考虑以下 React 应用程序，其组件层次结构由 MyApp 组件、代表页面上各个块的 Block 组件，以及代表块集合的 Blocks 组件：
除了使用 jQuery 的窗口调整大小事件之外，是否有更“React”的监听方式用于浏览器调整大小事件并触发重新渲染？
React Hooks 提供了一种更干净、更实用的方法。您可以创建一个自定义 Hook 来监听窗口调整大小事件：
<code class="javascript">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 生命周期方法中监听调整大小事件：
<code class="javascript">componentDidMount() {
window.addEventListener('resize', this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateDimensions);
}</code>这种方法更加冗长，但仍然提供了一个干净的实现。
以上是如何在 React 中重新渲染浏览器调整大小的视图：jQuery 与 React Hooks 和类？的详细内容。更多信息请关注PHP中文网其他相关文章！
