使用useEffect常见问题!
如何用useEffect
模拟componentDidMount
生命周期?
虽然可以使用 useEffect(fn, [])
,但它们并不完全相等。和 componentDidMount
不一样,useEffect
会捕获 props
和state
。所以即便在回调函数里,你拿到的还是初始的 props
和 state
。如果你想得到“最新”的值,你可以使用 ref
。不过,通常会有更简单的实现方式,所以你并不一定要用 ref
。
如何正确地在useEffect
里请求数据?[]
又是什么?
下片篇文章介绍了如何在useEffect里做数据请求。[]
表示 effect
没有使用任何React数据流里的值,因此该 effect
仅被调用一次是安全的。[]
同样也是一类常见问题的来源,即使你以为没使用数据流里的值,但其实使用了。你需要学习一些策略(主要是useReducer
和 useCallback
)来移除这些 effect
依赖。
我应该把函数当做effect
的依赖吗?
一般建议把不依赖 props
和 state
的函数提到你的组件外面,并且把那些仅被 effect
使用的函数放到 effect
里面。如果这样做了以后,你的 effect
还是需要用到组件内的函数(包括通过props
传进来的函数),可以在定义它们的地方用useCallback
包一层。为什么要这样做呢?因为这些函数可以访问到props
和state
,因此它们会参与到数据流中。
为什么有时候会出现无限重复请求的问题?
这个通常发生于你在 effect
里做数据请求并且没有设置 effect
依赖参数的情况。没有设置依赖,effect
会在每次渲染后执行一次,然后在 effect
中更新了状态引起渲染并再次触发 effect
。无限循环的发生也可能是因为你设置的依赖总是会改变。你可以通过一个一个移除的方式排查出哪个依赖导致了问题。但是,移除你使用的依赖(或者盲目地使用[]
)通常是一种错误的解决方式。你应该做的是解决问题的根源。举个例子,函数可能会导致这个问题,你可以把它们放到effect
里,或者提到组件外面,或者用 useCallback
包一层。useMemo
可以做类似的事情以避免重复生成对象。
为什么有时候在effect
里拿到的是旧的state
或prop
呢?
Effect拿到的总是定义它的那次渲染中的props
和state
。这能够避免一些bugs,但在一些场景中又会有些讨人嫌。对于这些场景,你可以明确地使用可变的ref
保存一些值。如果你觉得在渲染中拿到了一些旧的props
和state
,且不是你想要的,你很可能遗漏了一些依赖。
使用useEffect常见问题!相关推荐
- 【React】883- React hooks 之 useEffect 学习指南
摘要 如果你不想阅读整篇文章,可以快速浏览这份摘要.要是某些部分不容易理解,你可以往下滚动寻找相关的内容去阅读. 如果你打算阅读整篇文章,你完全可以跳过这部分.我会在文章末尾带上摘要的链接. ???? ...
- llvm常见问题 (FAQ)
llvm常见问题 (FAQ) License 可以修改 LLVM 源代码并重新分发修改后的源代码吗? 可以修改 LLVM 源代码并重新分发基于二进制文件或其它工具,而无需重新分发源代码吗? 源代码 L ...
- 深度学习常见问题解析
深度学习常见问题解析 计算机视觉与自动驾驶 今天 一.为什么深层神经网络难以训练? 1.梯度消失.梯度消失是指通过隐藏层从后向前看,梯度会变得越来越小,说明前面层的学习会显著慢于后面层的学习,所以学习 ...
- 感受hook里useEffect的执行顺序,hook倒计时
本文基于之前创建的react-app脚手架文件 App.tsx import React from 'react'function App() {const [count, setCount] = R ...
- oracle数据库性能awr,常见问题:如何使用AWR报告来诊断数据库性能问题
常见问题:如何使用AWR报告来诊断数据库性能问题 (Doc ID 1523048.1) Last updated on FEBRUARY 03, 2019 适用于: Oracle Database - ...
- React useState,useEffect ,Hook是什么?什么是副作用?
初步接触 React 中的同学可能会对 useState,useEffect ,Hook,副作用 这些命名比较陌生,一起来了解一下. Hook是什么? Hook 是钩子,我理解他是一个概念,在不使用c ...
- JAVA 多用户商城系统b2b2c-Spring Cloud常见问题与总结(一)
在使用Spring Cloud的过程中,难免会遇到一些问题.所以对Spring Cloud的常用问题做一些总结.需要JAVA Spring Cloud大型企业分布式微服务云构建的B2B2C电子商务平台 ...
- 视频直播常见问题与解决办法汇总【系列二—直播截图】
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 使用场景 用户常需要对视频直播的内容进行分析.例如,需要对直播中的某一帧的内容作为封面图片或者对于直播内容进行鉴黄以查 ...
- 小编说之“常见问题答疑”
2019独角兽企业重金招聘Python工程师标准>>> 关于前嗅Forespider爬虫的常见问题答疑 奋战在一线为客户答疑的狗蛋儿给小编提供了很多客户经常会问到的问题的素材,小编帮 ...
最新文章
- 做销售如何跟单,逼单!共20招!(转)
- 现代软件工程 第十章 【典型用户和场景】 练习与讨论
- 基于GUI的mcc编译和dll生成
- 转:Zookeeper快速入门
- oracle移动表所在的表空间,ORACLE移动表空间(原)
- java怎么播放不了声音,java – 为什么这段代码不播放声音文件
- Nginx面试题(总结最全面的面试题!!!)
- (十一)可编辑表格EditorGridPanel
- 编程珠玑 啊哈 算法
- 直播预告丨技术干货:易鲸捷HTAP融合型分布式数据库连接服务层介绍
- Python+Kivy(App开发)从入门到实践
- 计算机内存怎样清理,怎么样清理电脑内存 电脑清理内存方法【图文】
- 微信公众平台开发入门教程[2020版]
- 【SQL注入】CTF练习题WriteUp——“百度杯”CTF比赛 九月场SQL
- 【微信小程序】选择器组件picker
- Java实现蓝桥杯VIP 算法训练 sign函数
- Cobot与Jenkins集成
- Mac OS中Git版本更新(亲测有效)
- ZZULIOJ:1099: 角谷猜想(多实例测试)
- 2022年计算机视觉产业链全景图谱,一文读懂计算机视觉产业链全局