从 useEffect 清除函数效果中想到的一个疑问

来源:3-10 自定义 Hook - 重构 MouseTracker

Neolu4ever

2022-11-15

我突然有一个疑问:不添加useEffect的第二个参数时,每次页面重新渲染都会执行 effect 的 return 语句。说明函数组件在 state 更新引起的页面渲染过程,其实是经历了卸载 - 重新挂载这个流程对吗?因为函数组件好像有运行完就销毁的特性,因此这么解释也合理。

我的第二个问题是基于上述疑问的假设回答成立的前提:如果函数组件运行完就销毁,其实页面重新渲染就等于把函数组件重新运行了一遍,但是useState 却有办法保留 state 的值留待之后继续使用。这样是不是意味着,我们赋予useState 的初始值只有在函数组件第一次被调用时才取得到呢?

总的来说我对函数组件“渲染”和“挂载”之间的区别不是很清楚,网上找了一下也没有看到说得比较到位的。

开发中也踩过坑;把子组件自己的 useState 默认值作为控件的 value 进行显示。在父组件state更新后,重新循环渲染子组件时出现了子组件控件的值依然保留更新前的状态的 bug(我以为会重新还原为默认值但是并没有。)

希望可以等到老师相关的解释,谢谢~

写回答

1回答

张轩

2022-11-16

同学你好

第一个问题你的理解是正确的,其实我更喜欢只用 render 这个词来表示,因为使用函数式组件以后,只需要有这一个概念就好了,render - after render (effect 在这里执行,如果有清除,就先清除在执行)

第二个问题 你的理解是正确的 state 是神奇的变量,它执行这一次的时候,保留的是上一次函数对应的值。

所以不需要纠结,渲染和挂载,就用 render 这一个词就好了。

0
1
Neolu4ever
非常感谢!
2022-11-18
共1条回复

React18+TS高仿AntD从零到一打造组件库

设计,开发,测试,发布再到 CI/CD,从0到1造轮子

2123 学习 · 959 问题

查看课程