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

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