Javascript 使用断点和节流调整手柄尺寸

考虑跟踪窗口宽度并基于给定点返回

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
}

导出函数useWindowResize（）{
const[width，setWidth]=useState（window.innerWidth<650？1:0）
useffect（（）=>{
const handleResize=（）=>setWidth（（window.innerWidth<650？1:0））
window.addEventListener（'resize'，handleResize）
return（）=>{
window.removeEventListener（'resize'，handleResize）
}
}, )
返回宽度
}

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

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
}

导出函数useWindowResize（）{
const[width，setWidth]=useState（window.innerWidth）
useffect（（）=>{
const handleResize=（）=>setWidth（（window.innerWidth））
window.addEventListener（'resize'，handleResize）
return（）=>{
window.removeEventListener（'resize'，handleResize）
}
}, )
返回宽度<650？1:0
}

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

我的问题是： A.哪种方式更节省资源？ 在第一个示例中，我是否仍要限制事件侦听器