Lesson 18 挂载阶段的组件生命周期(一)
发布日期:2022-09-10 02:55:26 浏览次数:3 分类:技术文章

本文共 3212 字,大约阅读时间需要 10 分钟。

Lesson 18 挂载阶段的组件生命周期(一)

我们在中提到,下面的代码:

ReactDOM.render( 
, document.getElementById('root'))

会编译成:

ReactDOM.render(  React.createElement(Header, null),   document.getElementById('root'))

其实我们把 Header 组件传给了 React.createElement 函数,又把函数返回结果传给了 ReactDOM.render。我们可以简单猜想一下它们会干什么事情:

// React.createElement 中实例化一个 Headerconst header = new Header(props, children)// React.createElement 中调用 header.render 方法渲染组件的内容const headerJsxObject = header.render()// ReactDOM 用渲染后的 JavaScript 对象来来构建真正的 DOM 元素const headerDOM = createDOMFromObject(headerJsxObject)// ReactDOM 把 DOM 元素塞到页面上document.getElementById('root').appendChild(headerDOM)

上面过程其实很简单,看代码就能理解。

我们把 React.js 将组件渲染,并且构造 DOM 元素然后塞入页面的过程称为组件的挂载(这个定义请好好记住)。其实 React.js 内部对待每个组件都有这么一个过程,也就是初始化组件 -> 挂载到页面上的过程。所以你可以理解一个组件的方法调用是这么一个过程:

-> constructor()-> render()// 然后构造 DOM 元素插入页面

这当然是很好理解的。React.js 为了让我们能够更好的掌控组件的挂载过程,往上面插入了两个方法:

-> constructor()-> componentWillMount()-> render()// 然后构造 DOM 元素插入页面-> componentDidMount()

componentWillMountcomponentDidMount 都是可以像 render 方法一样自定义在组件的内部。挂载的时候,React.js 会在组件的 render 之前调用 componentWillMount,在 DOM 元素塞入页面以后调用 componentDidMount

我们给 Header 组件加上这两个方法,并且打一些 Log:

class Header extends Component {
constructor () {
super() console.log('construct') } componentWillMount () {
console.log('component will mount') } componentDidMount () {
console.log('component did mount') } render () {
console.log('render') return (

React 小书

) }}

在控制台你可以看到依次输出:

在这里插入图片描述

可以看到,React.js 确实按照我们上面所说的那样调用了定义的两个方法 componentWillMountcomponentDidMount

机灵的同学可以想到,一个组件可以插入页面,当然也可以从页面中删除。

-> constructor()-> componentWillMount()-> render()// 然后构造 DOM 元素插入页面-> componentDidMount()// ...// 从页面中删除

React.js 也控制了这个组件的删除过程。在组件删除之前 React.js 会调用组件定义的 componentWillUnmount

-> constructor()-> componentWillMount()-> render()// 然后构造 DOM 元素插入页面-> componentDidMount()// ...// 即将从页面中删除-> componentWillUnmount()// 从页面中删除

看看什么情况下会把组件从页面中删除,继续使用上面例子的代码,我们再定义一个 Index 组件:

class Index extends Component {
constructor() {
super() this.state = {
isShowHeader: true } } handleShowOrHide () {
this.setState({
isShowHeader: !this.state.isShowHeader }) } render () {
return (
{
this.state.isShowHeader ?
: null}
) }}ReactDOM.render(
, document.getElementById('root'))

Index 组件使用了 Header 组件,并且有一个按钮,可以控制 Header 的显示或者隐藏。下面这行代码:

...a{
this.state.isShowHeader ?
: null}...

相当于 state.isShowHeadertrue 的时候把 Header 插入页面,false 的时候把 Header 从页面上删除。这时候我们给 Header 添加 componentWillUnmount 方法:

...  componentWillUnmount() {
console.log('component will unmount') }...

这时候点击页面上的按钮,你会看到页面的标题隐藏了,并且控制台打印出来下图的最后一行,说明 componentWillUnmount 确实被 React.js 所调用了:

在这里插入图片描述
你可以多次点击按钮,随着按钮的显示和隐藏,上面的内容会按顺序重复地打印出来,可以体会一下这几个方法的调用过程和顺序。

总结

React.js 将组件渲染,并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。这一节我们学习了 React.js 控制组件在页面上挂载和删除过程里面几个方法:

  • componentWillMount:组件挂载开始之前,也就是在组件调用 render 方法之前调用。

  • componentDidMount:组件挂载完成以后,也就是 DOM 元素已经插入页面后调用。

  • componentWillUnmount:组件对应的 DOM 元素从页面中删除之前调用。 但这一节并没有讲这几个方法到底在实际项目当中有什么作用,下一节我们通过例子来讲解一下这几个方法的用途。

当前内容版权归 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请点击 .

最初的起点:

上一篇:

下一篇:

转载地址:https://blog.csdn.net/Mr_zzr/article/details/125783861 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Lesson 19 挂载阶段的组件生命周期(二)
下一篇:Lesson 17 前端应用状态管理 —— 状态提升

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年03月01日 22时03分02秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

creo视图管理器使用方法_学以致用之中望3D—浅谈使用中望3D的初步感受 2019-04-21
周育如的音标口诀大全_花鸟画口诀大全,实用! 2019-04-21
心电图计算心率公式_医学常用的计算公式口诀(内外妇儿),赶快收藏! 2019-04-21
select 移动端 第一个无法选中_Python爬虫微博(移动端)评论 2019-04-21
华为云welink成像是反的_华为发布智能办公神器WeLink,可连接会议室开会,还可一键遥控报销和智能翻译... 2019-04-21
唱好铁血丹心谐音正规_趙贤典:打好“感情牌” 唱好“大合唱” 2019-04-21
aix系统vi修改命令_Linux基础知识必备:利用vi编辑器创建和编辑正文文件 2019-04-21
天涯明月刀开发_玩家被天涯明月刀手游“冷落”?六大门派角色竟不带正眼看人... 2019-04-21
this指向undefined uiapp_一个this都没有,真好 2019-04-21
add p4 多个文件_2-3【微信小程序全栈开发课程】index页面完善--vue文件代码解析... 2019-04-21
5w2h原则指的是什么_什么是5W2H分析法?一首小诗带入进入大门。 2019-04-21
技校毕业是什么学历_中等职业学校是什么_中等职业学校毕业是什么学历 2019-04-21
2压缩备份数据库_MySQL数据备份与恢复(二) xtrabackup工具 2019-04-21
英特尔cpu发布时间表_被嘲讽的英特尔核显,强大能力其实超乎你的想象 2019-04-21
chi2inv函数 matlab_MATLAB概率和统计(2) 2019-04-21
lisp修改上一个图素_在Windows上安装Haskell 2019-04-21
ad19 导出step 没有pcb_几款主流PCB软件哪个最好用,你用过几款? 2019-04-21
json mysql 字段 默认值_Newtonsoft.Json 六个超简单又实用的特性,值得一试 【上篇】... 2019-04-21
ocdma相干非相干_《Acconeer 60GHz脉冲相干雷达芯片:A111》 2019-04-21
修改表格字体颜色_Excel技巧:Excel如何修改字体颜色 2019-04-21