Hooks 使用规则

Hooks 使用规则

命名规则

Hook 必须 useXxx 格式来命名。

PS：这种命名规则也很易读，简单粗暴

调用位置

Hook 或自定义 Hook ，只能在两个地方被调用

• 组件内部
• 其他 Hook 内部

组件外部，或一个普通函数中，不能调用 Hook

顺序一致

Hook 在每次渲染时都按照相同的顺序被调用。

• Hook 必须是组件“第一层代码”
• Hook 不可放在 if 等条件语句中 （ 或者前面有 return ，也算是条件 ）
• Hook 不可放在 for 等循环语句中

代码演示

闭包陷阱

当异步函数中获取 state 时，可能不是最新的 state 值。

解决方案：替换为 useRef —— 但 ref 变化不会触发 rerender ，所以得结合 state 一起

代码参考 src/pages/ClosureTrap.tsx

import React, { FC, useState, useRef, useEffect } from 'react'

const Demo: FC = () => {
  const [count, setCount] = useState(0)
  const countRef = useRef(0)
  useEffect(() => {
    countRef.current = count
  }, [count])

  function add() {
    setCount(count + 1)
  }

  function alertFn() {
    setTimeout(() => {
      //   alert(count) // count 值类型
      alert(countRef.current) // ref 引用类型
    }, 3000)
  }

  return (
    <>
      <p>闭包陷阱</p>
      <div>
        <span>{count}</span>
        <button onClick={add}>add</button>
        <button onClick={alertFn}>alert</button>
      </div>
    </>
  )
}

export default Demo