学不懂生命周期函数正常吗?

简介: 学不懂生命周期函数正常吗?

我以前常常觉得自己自学效率非常低,因为总会在一些其他人都意想不到的地方卡住很长时间,比如,在初学 react 时,我学不懂生命周期函数


1.didMount


工作中我的第一个 react 项目,是一个纯 C 端的官网,这是使用 python 服务端渲染方案的项目,因此我只有少量的机会在部分页面尝试使用 react,此时的我严重缺乏实践经验。所以呢,就有很多问题搞不清楚


例如:componentDidMount 应该怎么理解,到底有什么用


那会儿许多文章里介绍说,这个生命周期函数会在组件挂载之后执行


造成我很懵逼的原因是我对生命周期这个概念不理解


为什么呢,因为在我概念里,生命周期是在说一个过程


但是组件挂载之后说的是一个时刻


然后我去查了资料,看看是不是我搞错了,结果查完之后我更懵逼了, 因为很多地方的描述跟我预想差不多


生命周期确实是指一个过程,组件挂载之后是指一个时刻


明显不一样… 这该如何自恰…


然后,我想着是不是这一处的描述不够准确


我又去翻阅了很多技术文章,又与 「组件挂载之后」 这种描述有点差别,比如,有的地方说的是渲染完成之后,这… … 还是在说某一个时刻,然后我想是不是中文翻译都出了问题,又去查阅了英文资料


React 的老官网是这样说的


componentDidMount() is invoked immediately after a component is mounted (inserted into the tree)


React 的新官网是这样说的


If you define the componentDidMount method, React will call it when your component is added (mounted) to the screen.


这两种说法大概意思差不多,也是在说某一个时刻


然后我就想,lifecycle 翻译成生命周期会不会不太精准?


但我也没找到更合适的翻译方式,最后我也没彻底吃透这个概念,这个疑问也就不了了之了


2.willMount


当时还有一个问题我也想不通


React 中有一个生命周期函数叫做 componentWillMount


他的意思是该函数会在组件挂载之前执行


之前?我的疑问是什么呢?假如我在不同的组件定义了 componentWillMount,但是这几个不同的 componentWillMount 函数执行时间是不一样的


有的可能很快就执行完,有的可能要执行很长时间


那组件挂载这个行为,到底什么时候开始执行呢


等 componentWillMount 执行完,还是不等?


对于当时我的我来说,这个问题有多难呢,直到后来,好巧不巧在一次面试中,有个刁钻的面试官他问了我这个问题


然后我就说:这个问题我以前也想了好久,没想通,查了好些资料,求助了好多人也没得到答案,因为组件渲染完整之前这种说法在时刻上还不够具体,我就是特别想知道这个具体的时刻到底是怎么回事。因为 componentlWilMount 是使用者定义的,所以是可以定义一个需要执行很长时间的函数,框架底层也控制不了这个,所以如果前置的逻辑执行的时间太久了,后续的组件挂载这个行为到底会不会等前置的逻辑执行完,还是说,只是给他执行一点时间,超过这个时间就不等了… …


老哥,是这样的,这个问题我确实很想知道答案,研究了好久也没吃透,这个问题我肯定回答不好,你们公司这个 offer 我不要了,你可不可以帮我解答一下这个疑问?


面试官:是要等的…我接着问:那底层逻辑是怎么做到的,react 是怎么知道这个函数已经执行完了


面试官:… …我最终也没得到一个清晰的解释


不过,你说怪不怪,我最后还拿到这个offer,我这个问题想不通正常吗 单选。正常,刚开始我也没想通


不正常,这个问题太简单了。有毒吧你,我本来没问题,但你这么一说,我现在反而想不通了…


3.挂载


然后,还有一个很蠢的问题,我对挂载这个概念不理解


这个概念吧,现在来看是挺简单的,就字面意思,完全不需要进一步解释。但是当时,那是真的不懂

当时心里一直在琢磨… 挂载到底是什么意思?


然后我去找资料,有的地方说,是指组件渲染完成,有的地方说,叫 mounted,加 ed 表示完成时…


现在又有一种新的说法,内容出现在页面上


可是呢,我始终没找到,挂载到底是干了什么事情,加上当时虚拟DOM的概念也炒得比较火热


所以就在想,难道是往虚拟DOM里面加了一个节点,叫做挂载?


可是有的地方又叫做组件渲染完成


如果只是往虚拟DOM里面加了一个节点,那应该还没渲染完成


如果是往DOM里面加了节点叫做挂载完成


但是呢,往 DOM 里面加了节点,也不一定就渲染出内容了呀


比如我调用了 appendChild 加入了节点,但是我也不知道这个节点什么时候渲染完成,因为渲染不是由 JS 做的


所以 这个mounted,到底具体是指哪个时间点呢?加入虚拟DOM?加入真实DOM?还是渲染完成?


然后还有一个问题…React 是如何知道挂载完成的?


因为渲染是由别的线程来做,那么,react 应该没有任何方式知道渲染已经完成了才对?


最后这些疑问还是不了了之了。所以,我这个问题想不通,正常吗?


  1. 正常,我刚开始也没想通
  2. 不正常,这个太简单了
  3. 我觉得这个问题不值得我思考…


4.end


前几天有粉丝向我表达了一个苦恼。因为自己自学效率很低,从而认为自己不适合做前端,想要放弃

于是我回想了一下自己曾经的学习经历,好像我也跟她差不多


值得庆幸的是,我坚持下来了


react class 组件现在已经基本上被淘汰,相关的生命周期函数可以不用再去思考了,不过我的这些问题,对于理解 react 有很大的帮助,切换到 react hooks 的学习,这几个问题也有思考价值

相关文章
|
2月前
|
自然语言处理 JavaScript 开发者
生命周期钩子1
生命周期钩子1
|
2月前
|
JavaScript 开发者
生命周期钩子2
生命周期钩子2
|
2月前
|
小程序 JavaScript 开发者
小程序生命周期
小程序生命周期
23 1
|
9天前
|
缓存 JavaScript API
vue3 生命周期(生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期)
vue3 生命周期(生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期)
12 0
|
2月前
|
存储 安全 IDE
C/C++ 作用域,生命周期,执行线程的概念
C/C++ 作用域,生命周期,执行线程的概念
25 2
|
2月前
|
缓存 JavaScript
onActivated 生命周期的使用和介绍
onActivated 生命周期的使用和介绍
107 3
|
2月前
|
小程序 前端开发 API
小程序的生命周期以及页面生命周期
小程序的生命周期以及页面生命周期
44 0
|
8月前
|
小程序 UED
小程序的生命周期讲解
小程序的生命周期讲解
43 0
|
10月前
IT服务生命周期
IT服务生命周期
187 0
|
小程序 JavaScript 程序员
【小程序】生命周期
【小程序】生命周期
123 0
【小程序】生命周期