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

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

我以前常常觉得自己自学效率非常低,因为总会在一些其他人都意想不到的地方卡住很长时间,比如,在初学 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 的学习,这几个问题也有思考价值

相关文章
|
安全 前端开发 大数据
分享99个工作总结PPT,总有一款适合您
分享99个工作总结PPT,总有一款适合您
264 0
|
关系型数据库 MySQL 数据库
|
11月前
|
机器学习/深度学习 人工智能 自然语言处理
昇腾AI行业案例(四):基于 Bert 模型实现文本分类
欢迎学习《昇腾行业应用案例》的“基于 Bert 模型实现文本分类”实验。在本实验中,您将学习如何使用利用 NLP (natural language processing) 领域的AI模型来构建一个端到端的文本系统,并使用开源数据集进行效果验证。为此,我们将使用昇腾的AI硬件以及CANN等软件产品。
800 0
|
机器学习/深度学习 人工智能 算法
机器学习基础:使用Python和Scikit-learn入门
【10月更文挑战第12天】本文介绍了如何使用Python和Scikit-learn进行机器学习的基础知识和入门实践。首先概述了机器学习的基本概念,包括监督学习、无监督学习和强化学习。接着详细讲解了Python和Scikit-learn的安装、数据处理、模型训练和评估等步骤,并提供了代码示例。通过本文,读者可以掌握机器学习的基本流程,并为深入学习打下坚实基础。
146 1
|
JavaScript 前端开发 程序员
TypeScript 类型体操,无非是语法过度嵌套而已
TypeScript 类型体操,无非是语法过度嵌套而已
359 0
|
安全 算法 数据可视化
【附下载】如何快速搞定年终汇报PPT?
【附下载】如何快速搞定年终汇报PPT?
|
存储 缓存 前端开发
双向绑定与单向数据流之争,Solid会取代React吗
双向绑定与单向数据流之争,Solid会取代React吗
229 0
|
前端开发
实战:思考如何拆分组件
实战:思考如何拆分组件
192 0
|
前端开发 JavaScript 数据格式
实战!增删改查的不平凡
实战!增删改查的不平凡
171 0
|
Web App开发 前端开发 iOS开发
Element-ui中 表格 (Table)组件中滚动条样式修改
Element-ui中 表格 (Table)组件中滚动条样式修改
1831 0
Element-ui中 表格 (Table)组件中滚动条样式修改