react中使用Switch语句简略笔记

  语法: 

function App () {
  const [d] = useState(new Date().getDay())
  const [text, setText] = useState('今天星期几?')
  useEffect(
    () => {
      switch (d) {
        case 0:
        case 6:
          setText('周末时间!')
          break
        case 4:
        case 5:
          setText('撑一撑,快解放了!')
          break
        default:
          setText('我真是苦命儿...')
      }
    },
    [d]
  )
  return (
    <div>
      <p
        style={{
          color: 'skyblue',
          fontSize: '10',
          backgroundColor: 'pink'
        }}>
        {text}
      </p>
    </div>
  )
}

break: 立刻结束流程(打破);

其中case 0/case 6 都会触发同一句输出结果,case4/case5同理;

default: 前面的case未匹配到,则匹配default,输出其结果并break;

注意:

1.如果 default 不是 switch 代码块中最后一个case，请记得用 break 结束默认case;

2.如果未找到匹配的 case，程序将继续使用默认 label.如果未找到默认 label，程序将继续 switch 后的语句;

3.上面例子中 d 的值必须与 case 值 完全匹配 才会触发其下的label, 因为这个语法内部使用了严格比较: "==="  ,只有操作数属于同一类型时，严格比较才能为 true

4.在函数式组件中switch语句需用useEffect包起来,当然,也可以写在return输出部分,不过要用到自调用函数.无论那种方法都不要忘记为函数式组件提供状态用useState