useEffect 与 useEvent 以及 useMount

发布时间 2023-12-20 19:15:30作者: 清尘烟雨

1.useEffect 空数组依赖初始化问题

2.useEvent 钩子

https://zhuanlan.zhihu.com/p/592982479

 

空数组依赖的弊端

1.严格模式下,不是只执行一次,而是两次

2.执行两次的情况,比如在获取auth认证,令牌或者token时,短时间内服务端不支持给两个不同的请求都发放认证,而是两个都报错

3. 空数组依赖的useEffect内,定时器或者处理监听回调的事件代码会获取不到最新的值

 

1.学习提取响应式代码与非响应式代码

2.尽量避免对象与函数成为依赖项

3.空数组依赖项带来的问题与优化方法(文章提到的方法之外,应该还有新的思路,待学习)

 

补充 https://zhuanlan.zhihu.com/p/610805675 使用useRef 解决调用两次的问题

 

二次补充, ahooks中的useMount 钩子

在useEffect 空数组依赖 外面封装一层

const useMounted = () => {
    const [mounted, setMounted] = useState(false);
    useEffect(() => {
        !mounted && setMounted(true);
        return () => setMounted(false);
    }, []);
    return mounted;
}