react hooks 监测浏览器窗口大小

state 和 props 变化，导致组件函数重新执行，重新渲染页面。

import { useCallback, useEffect, useState } from "react"

function getSize() {
  const width = window.innerWidth
  if (width > 1000) {
    return 'large'
  } else {
    return 'small'
  }
}

function useSize() {
  // useState 可以传一个方法执行
  const [size, setSize] = useState(getSize())
  const handler = useCallback(() => {
    setSize(getSize())
    // react 的状态更新是异步的，这里打印的值可能跟页面显示的不同
    // 打印size可以放在 useEffect 中
    console.log(size);
  }, [getSize])
  console.log(33);
  useEffect(()=> {
    // 窗口 resize 事件
    window.onresize = handler
    // 销毁 resize 绑定的方法
    return ()=> {
      console.log(111);
      window.removeEventListener('resize', handler)
    }
  }, [])
  return size
}

const CompA = function () {
  const [count, setCount] = useState(0)
  const [varB, setVarB] = useState(0)
  // excute on every render
  useEffect(()=> {
    console.log('a');
  })

  // excute once
  useEffect(() => {
    console.log('b');
  }, [])

  return (
    <>
    <button onClick={()=> setCount(count + 1)}>increase</button>
    </>
  )
}

const Demo = function() {

  // const [size, setSize] = useState('small')
  const size = useSize()

  return (
    <>
      {size}
      <CompA></CompA>
    </>
  )
}
export default Demo