我需要在每个React组件中注册窗口事件监听器吗？

Question

我有一个用ReactJS编写的应用程序，有时我必须添加窗口调整大小事件监听器，现在我最终拥有大约5个组件，每个组件都有自己的窗口调整大小事件监听器，有没有更好的方法来解决这个问题，我想我缺少一种设计模式或可以处理我情况的东西。

您的帮助将不胜感激！

Answer 1

我在App.js文件中使用了窗口大小调整事件侦听器，并使其更新了height和width并将状态传递给需要它的组件。这是我使用的功能：

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth)
      setHeight(window.innerHeight)
    }
    window.addEventListener('resize', handleResize)
    return () => { window.removeEventListener('resize', handleResize) }
  }, [])

如果您有许多组件没有直接相互连接，但是在我的情况下使用状态就可以了，最好使用context存储height和width。

Answer 2

只要您清理订阅，就可以了。

如果您真的很担心，可以使用context来设置单个订阅，从而允许后代视图使用该值而不必自己订阅。

您也可以只订阅父组件，然后通过props将值向下传递。但是请确保使用这种方法使支柱通过的深度较小。不要将道具传递给出色的孙子美景，等等。如果不小心，可能会导致不必要的重新渲染。