当前位置：首页 > news >正文

Hooks 使用规则

news 2025/7/24 2:40:31

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

查看全文

http://www.lryc.cn/news/523624.html