静态网站建设中源码网站基础功能

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