首页 > web前端 > js教程 > 正文

如何在 React 中重新渲染浏览器调整大小的视图:jQuery 与 React Hooks 和类?

Barbara Streisand
发布: 2024-10-19 19:33:30
原创
488 人浏览过

How to Re-render View on Browser Resize in React: jQuery vs. React Hooks and Classes?

使用 React 在浏览器上重新渲染视图调整大小

背景

利用 React,您可以根据浏览器动态调整网页上元素的布局窗口大小。但是,当窗口调整大小并且视图不会自动更新时,您可能会遇到问题。本文解决了一个常见问题:如何在浏览器窗口大小调整时触发重新渲染。

代码

考虑以下 React 应用程序,其组件层次结构由 MyApp 组件、代表页面上各个块的 Block 组件,以及代表块集合的 Blocks 组件:

问题

除了使用 jQuery 的窗口调整大小事件之外,是否有更“React”的监听方式用于浏览器调整大小事件并触发重新渲染?

答案

使用 React Hooks

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 类

在 React 类中,您可以在 componentDidMount 生命周期方法中监听调整大小事件:

<code class="javascript">componentDidMount() {
  window.addEventListener('resize', this.updateDimensions);
}
componentWillUnmount() {
  window.removeEventListener('resize', this.updateDimensions);
}</code>
登录后复制

这种方法更加冗长,但仍然提供了一个干净的实现。

以上是如何在 React 中重新渲染浏览器调整大小的视图:jQuery 与 React Hooks 和类?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!