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

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

Lesson 19 挂载阶段的组件生命周期(二)

这一节我们来讨论一下对于一个组件来说,constructorcomponentWillMountcomponentDidMountcomponentWillUnmount 这几个方法在一个组件的出生到死亡的过程里面起了什么样的作用。

一般来说,所有关于组件自身的状态的初始化工作都会放在 constructor 里面去做。你会发现本书所有组件的 state 的初始化工作都是放在 constructor 里面的。假设我们现在在做一个时钟应用:

在这里插入图片描述

我们会在 constructor 里面初始化 state.date,当然现在页面还是静态的,等下一会让时间动起来。

class Clock extends Component {
constructor () {
super() this.state = {
date: new Date() } } render () {
return (

现在的时间是

{
this.state.date.toLocaleTimeString()}

) }}

一些组件启动的动作,包括像 Ajax 数据的拉取操作、一些定时器的启动等,就可以放在 componentWillMount 里面进行,例如 Ajax:

...  componentWillMount () {
ajax.get('http://json-api.com/user', (userData) => {
this.setState({
userData }) }) }...

当然在我们这个例子里面是定时器的启动,我们给 Clock 启动定时器:

class Clock extends Component {
constructor () {
super() this.state = {
date: new Date() } } componentWillMount () {
this.timer = setInterval(() => {
this.setState({
date: new Date() }) }, 1000) } ...}

我们在 componentWillMount 中用 setInterval 启动了一个定时器:每隔 1 秒更新中的 state.date,这样页面就可以动起来了。我们用一个 Index 把它用起来,并且插入页面:

class Index extends Component {
render () {
return (
) }}ReactDOM.render(
, document.getElementById('root'))

像上一节那样,我们修改这个 Index 让这个时钟可以隐藏或者显示:

class Index extends Component {
constructor () {
super() this.state = {
isShowClock: true } } handleShowOrHide () {
this.setState({
isShowClock: !this.state.isShowClock }) } render () {
return (
{
this.state.isShowClock ?
: null }
) }}

现在页面上有个按钮可以显示或者隐藏时钟。你试一下显示或者隐藏时钟,虽然页面上看起来功能都正常,在控制台你会发现报错了:

在这里插入图片描述

这是因为,当时钟隐藏的时候,我们并没有清除定时器。时钟隐藏的时候,定时器的回调函数还在不停地尝试 setState,由于 setState 只能在已经挂载或者正在挂载的组件上调用,所以 React.js 开始疯狂报错。

多次的隐藏和显示会让 React.js 重新构造和销毁 Clock 组件,每次构造都会重新构建一个定时器。而销毁组件的时候没有清除定时器,所以你看到报错会越来越多。而且因为 JavaScript 的闭包特性,这样会导致严重的内存泄漏。

这时候componentWillUnmount 就可以派上用场了,它的作用就是在组件销毁的时候,做这种清场的工作。例如清除该组件的定时器和其他的数据清理工作。我们给 Clock 添加 componentWillUnmount,在组件销毁的时候清除该组件的定时器:

...  componentWillUnmount () {
clearInterval(this.timer) }...

这时候就没有错误了。

总结

我们一般会把组件的 state 的初始化工作放在 constructor 里面去做;在 componentWillMount 进行组件的启动工作,例如 Ajax 数据拉取、定时器的启动;组件从页面上销毁的时候,有时候需要一些数据的清理,例如定时器的清理,就会放在 componentWillUnmount 里面去做。

说一下本节没有提到的 componentDidMount 。一般来说,有些组件的启动工作是依赖 DOM 的,例如动画的启动,而 componentWillMount 的时候组件还没挂载完成,所以没法进行这些启动工作,这时候就可以把这些操作放在 componentDidMount 当中。componentDidMount 的具体使用我们会在接下来的章节当中结合 DOM 来讲。

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

最初的起点:

上一篇:

下一篇:

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

上一篇:Lesson 20 更新阶段的组件生命周期
下一篇:Lesson 18 挂载阶段的组件生命周期(一)

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月22日 07时24分44秒

关于作者

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

推荐文章

matlab wash矩阵产生,洗衣机净衣效能与衣损程度的关系分析 2021-06-24
php中如何调用sql server,php调用SQL SERVER 2008及以上版本的方法 2021-06-24
python多线程实现kmeans,3种方式实现python多线程并发处理 2019-04-21
matlab 变量不存在,matlab程序运行时提示变量未定义 2019-04-21
php编码函数 base58,1. Base58可逆加密 2019-04-21
oracle 在需要下列之一,Oracle存储过程中PLS-00103:出现符号“/”在需要下列之一时:(... 2019-04-21
oracle10g dblink优化,Oracle10g通过dblink访问数据异常 2019-04-21
linux安装时的iso文件,直接用ISO文件在linux上安装新系统 2019-04-21
linux修改文件权限为所有人都可以访问,Linux 笔记分享八:文件权限的设定 2019-04-21
linux中卸载ambri-servle,Kerberos 命令使用 2019-04-21
linux二进制反编译,Xori:一款来自BlackHat 2018的二进制反汇编和静态分析工具 2019-04-21
linux两台主机添加信任,Linux两台机器间添加信任,实现不用密码问,互传文件... 2019-04-21
linux 自动获取ssl证书,linux生成自验证ssl证书的具体命令和步骤 2019-04-21
linux基础命令20个,20-linux中基础命令 2019-04-21
重置网络配置 android,重置Android移动网络信号? 2019-04-21
java约瑟夫环pta上_cdoj525-猴子选大王 (约瑟夫环) 2019-04-21
java++记录+运行_记录java+testng运行selenium(三)---xml、ini、excel、日志等配置 2019-04-21
mysql居左查询abcd_MySql速查手册 2019-04-21
loadrunner 错误: 无法找到 java.exe_LoadRunner错误及解决方法总结 2019-04-21
Java小魔女芭芭拉_沉迷蘑菇不可自拔,黏土人《小魔女学园》苏西·曼芭芭拉 图赏... 2019-04-21