奥运网站模板,wordpress author=1,佛山专业做网站,长沙营销型网站Hooks 使用规则
命名规则
Hook 必须 useXxx 格式来命名。
PS#xff1a;这种命名规则也很易读#xff0c;简单粗暴
调用位置
Hook 或自定义 Hook #xff0c;只能在两个地方被调用
组件内部其他 Hook 内部
组件外部#xff0c;或一个普通函数中#xff0c;不能调用…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 reactconst 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闭包陷阱/pdivspan{count}/spanbutton onClick{add}add/buttonbutton onClick{alertFn}alert/button/div/)
}export default Demo
