React hooks

useEffect

1. 每当状态改变时，都要重新执行 useEffect 的逻辑：

  useEffect(() => {
    switchCount += 1
  })

注意不带第二个数组参数

2. 即使每次状态都改变，也只执行第一次 useEffect 的逻辑：

useEffect(() => {
  switchCount += 1
}, [])

注意空数组

3. 根据某个状态是否变化来决定要不要重新执行：

const [value, setValue] = useState<string>('I never change')
useEffect(() => {
  switchCount += 1
}, [value])

同watch 注意数组里 监听哪几个 加哪几个

4. 组件卸载时处理一些内存问题，比如清除定时器、清除事件监听：

useEffect(() => {
  const handler = () => {
    document.title = Math.random().toString()
  }

  window.addEventListener('resize', handler)

  return () => {
    // 外面加的内存，在这里移除
    window.removeEventListener('resize', handler)
  }
}, [])

组件卸载时，会执行 return

useRef

1. timeout 里 要最新的，其实没最新，可用 useRef 来处理

const [count, setCount] = useState<number>(0)

  const handleCount = () => {
    setTimeout(() => {
      alert('current count: ' + count)
    }, 3000);
  }

2. 变更 .current 属性不会引发组件重新渲染，根据这个特性可以获取状态的前一个值

3. 操作 Dom 节点，类似 createRef()：

useMemo

1. 假设有大量方法，并且只想在其参数更改时运行它们，而不是每次组件更新时都运行它们，那就可以使用 useMemo 来进行性能优化

function changeTime(time: number): string {
    console.log('changeTime excuted...')
    return new Date(time).toISOString()
  }

  const newTime: string = useMemo(() => {
    return changeTime(time)
  }, [time])

  return (
    <div>
      <p>Time is: { newTime }</p>
      <p>Random is: { children }</p>
    </div>
  )

useCallback

同 useMemo
区别是 useMemo 返回的是函数运行的结果， useCallback 返回的是函数。

const getNewTime = useCallback(() => {
    return changeTime(time)
  }, [time])

  return (
    <div>
      <p>Time is: { getNewTime() }</p>
      <p>Random is: { children }</p>
    </div>
  )

useReducer

解决使用太多的 useState
... ...

React的useContext的使用

Typescript+React hooks
https://juejin.cn/post/6844904085024407566