You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React类组件中console.log(this)引发应用冻结问题求助

React类组件中构造函数可正常console.log(this),其他生命周期却不行的原因

嘿,我来帮你搞清楚这个问题~ 你遇到的这个情况,大概率是直接打印组件实例this时触发了循环引用的深度遍历,导致浏览器卡死/应用无法启动,而打印this.interval不会有这个问题,具体原因我给你拆解下:

  • 循环引用导致的控制台遍历崩溃
    React的组件实例this内部包含了大量关联对象:比如this.props可能关联着父组件的相关内容,this.state和组件实例本身互相引用,还有React内部维护的DOM节点引用、生命周期钩子集合等等。当你在componentDidMount里直接执行console.log(this)时,浏览器的开发者工具会尝试深度遍历这个对象的所有属性来展示完整结构,而循环引用的存在会让这个遍历陷入无限循环,最终导致栈溢出或者页面卡死,看起来就像“应用无法启动”。

    this.interval只是一个普通的数字类型(定时器的唯一ID),控制台打印它不需要遍历复杂对象,所以完全可以正常输出。

  • 构造函数里打印this为什么没事?
    在构造函数执行阶段,React组件实例还没有完全初始化完成:很多内部属性(比如和DOM相关的引用、父组件传递的完整props关联)还没被挂载到实例上,这时候的this结构相对简单,没有形成复杂的循环引用,所以控制台可以正常遍历打印,不会触发崩溃。

验证小技巧

你可以试试在componentDidMount里打印this的某个简单属性,比如console.log(this.state.count),肯定是正常的;或者用console.dir(this, { depth: 0 })来限制遍历深度,这样也能避免循环引用导致的崩溃,看到this的顶层结构。

顺便提下你代码里的小问题

  • 构造函数里this.state={ count:0, }的末尾逗号虽然在ES6+环境下没问题,但有些旧版JS环境可能报错,建议去掉;
  • componentWillUnmount里的代码没写完,记得补全clearInterval(this.interval),不然组件卸载后定时器还在运行,会导致内存泄漏哦。

内容的提问来源于stack exchange,提问作者DCR

火山引擎 最新活动