Question

有人可以解释一下为什么下面的第一个示例在开始时只渲染一次，但是第二个示例按预期工作并在将窗口调整为小于/大于650px时渲染：

不起作用：

function useWindowResize() {
  const [width, setWindowWidth] = useState(getWindowSize(window.innerWidth))
  useEffect(() => {
    const handleResize = () => setWindowWidth(getWindowSize(window.innerWidth))
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, )
  return width
}

function getWindowSize(size) {
  switch (size) {
    case (size >= 650):
      return 'lrg'
    default:
      return 'sml'
  }
}

作品：

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

某些组件文件：

export default () => {
 const width = useWindowResize()  
 console.log(width) //Second example updates first doesn't
  return(...)
}

Answer 1

您的开关箱总是返回'sml'，因为您不能将尺寸作为开关的比较来添加，并且箱内有一个if。像这样写：

function getWindowSize(size) {
  switch (true) {
    case (size >= 650):
      return 'lrg'
    default:
      return 'sml'
  }
}

Answer 2

switch与if语句或ternary表达式不同，您无法在case内求值，因此getWindowSize总是返回' sml'作为默认

只需将getWindowSize更改为使用if语句或ternary

function getWindowSize(size) {
  return size >= 650 ? 'lrg' : 'sml';
}

当我使用switch语句时，useEffect仅在第一次渲染时触发

2 个答案: