Question

我有一个React钩子，该钩子将调整大小的侦听器附加到窗口对象以测量浏览器宽度的大小。这很好用，但是创建了每个新的钩子实例，它创建了一个新的监听器来运行。我知道React可能会使用单个事件侦听器，然后重新使用它，但是测量浏览器宽度的次数仍会随着所创建的钩子实例的数量线性增加。是否有一种很好的方法可以对同一钩子的所有实例重用相同的窗口调整大小侦听器，因此测量仅执行一次？我不想创建一个Context，并将其放在根目录下，因为那样会重新渲染很多不相关的组件。

例如，我可能会有这样的东西：

const useMeasureBrowserWidth = () => {
 const [width, setWidth] = React.useState();
 React.useEffect(() => {
  const resizeListener = () => { setWidth(window.innerWidth); };
  window.addEventListener("resize", resizeListener);

  return () => {
   window.removeEventListener("resize", resizeListener);
  };
 }, []);

 return width;
};

然后，每次我在不同的组件中使用钩子时。它将为每个实例执行setWidth(window.innerWidth)。这听起来像是浪费，尤其是在访问window.innerWidth属性破坏渲染流程时。或者，React已经针对这种情况进行了任何优化吗？

重用同一React钩子创建的事件监听器

0 个答案: