1

考虑一个跟踪窗口宽度并返回1或0基于给定点的组件：

export function useWindowResize() {
  const [width, setWidth] = useState(window.innerWidth < 650 ? 1 : 0)
  useEffect(() => {
    const handleResize = () => setWidth((window.innerWidth < 650 ? 1 : 0))
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, )
  return width
}

如果我们将条件放在上面示例中所示的位置，则仅在给定的断点处才会发生重新渲染。但是，如果我们将条件放在返回中，则每次调整大小时都会发生重新渲染：

export function useWindowResize() {
  const [width, setWidth] = useState(window.innerWidth)
  useEffect(() => {
    const handleResize = () => setWidth((window.innerWidth))
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, )
  return width < 650 ? 1 : 0
}

如果我在第一个示例中理解正确，则每个窗口大小调整都会触发条件检查并设置状态，然后钩子会比较状态，因为真/假在断点之前不会改变，因此组件不会重新渲染。

我的问题是： A. 哪种方式资源效率更高？B. 我还应该在第一个示例中限制事件侦听器吗？

4

0 回答 0