微信小程序组件生命周期的踩坑记录


Posted in Javascript onMarch 03, 2021

组件生命周期,通常是我们业务逻辑开始的地方。

如果业务场景比较复杂,组件生命周期有不符合预期的表现时,

可能会导致一些诡异的业务bug,它们极难复现和修复。

组件 attached 生命周期执行次数

按照通常的理解,除moved/show/hide等生命周期可能多次执行外,

严格意义上与组件加载相关的生命周期,如:created、attached、ready等,每个组件实例应该只执行一次。但是事实真的如此吗?

背景

这个问题的发现,源于我们在小程序的报错日志中,

收到大量类似Cannot redefine property: isComponent的报错。

微信小程序组件生命周期的踩坑记录

原因分析

通过变量名可以追溯到我们在代码中的定义方式为:

Component({
 lifetimes: {
 attached() {
 Object.defineProperty(this, 'isComponent', {
 enumerable: true,
 get() { return true },
 });
 },
 },
});

很容易理解,这种错误的起因在于试图给对象重新定义一个不可配置的属性,

具体可以查看MDN上的说明。

可是这个定义是写在attached生命周期当中的,难道说,组件的attached生命周期被触发了两次?

天呐,这怎么可能?

是的,就是这么神奇!

场景还原

该问题并不容易复现,但是通过不断删繁就简、抽丝剥茧,最终还是找到了问题的根源:

在页面onLoad之前,通过setData改变状态触发子组件渲染,该子组件的attached生命周期会被触发两次。

微信小程序组件生命周期的踩坑记录

可以通过以下代码复现该场景,或者直接访问小程序代码片段。

页面

// page.js
Page({
 data: {
 showChild2: false,
 },
 onChild1Attached() {
 this.setData({ showChild2: true });
 },
});
<!-- page.wxml -->
<child1 bind:attached="onChild1Attached"></child1>
<child2 wx:if="{{ showChild2 }}"></child2>

子组件1

与页面一同渲染,并在attached的时候,通过triggerEvent,通知页面更新状态并渲染子组件2。

// child1.js
Component({
 lifetimes: {
 attached() {
 this.triggerEvent('attached');
 },
 },
});
<!-- child1.wxml -->
<view>child1</view>

子组件2

执行了两次attached生命周期,导致报错。

// child2.js
Component({
 lifetimes: {
 attached() {
 Object.defineProperty(this, 'isComponent', {
 enumerable: true,
 get() { return true },
 });
 },
 },
});
<!-- child2.wxml -->
<view>child2</view>

组件 ready 生命周期的执行时机

小程序官方文档没有明确给出组件生命周期的执行顺序,不过通过打印日志我们可以很容易地发现:

  • 在加载阶段,会依次执行:created -> attached -> ready
  • 在卸载阶段,会依次执行:detached

所以,看起来这个顺序貌似应该是:created -> attached -> ready -> detached。

但是实际情况果真如此吗?

背景

有段时间,客服经常反馈,我们的小程序存在串数据的现象。

例如:A商家的直播展示了B商家的商品。

原因分析

串数据发生在多个场景,考虑到数据是通过消息推送到小程序端上的,最终怀疑问题出在WebSocket通信上。

在小程序端,我们封装了一个WebSocket通信组件,核心逻辑如下:

// socket.js
Component({
 lifetimes: {
 ready() {
 this.getSocketConfig().then(config => {
 this.ws = wx.connectSocket(config);
 this.ws.onMessage(msg => {
 const data = JSON.parse(msg.data);
 this.onReceiveMessage(data);
 });
 });
 },
 detached() {
 this.ws && this.ws.close({});
 },
 },
 methods: {
 getSocketConfig() {
 // 从服务器请求 socket 连接配置
 return new Promise(() => {});
 },
 onReceiveMessage(data) {
 event.emit('message', data);
 },
 },
});

简单说,就是在组件ready时,初始化一个WebSocket连接并监听消息推送,然后在detached阶段关闭连接。

看起来并没有什么问题,那么就只能从结果倒推可能不符合常理的情况了。

数据串了 -> WebSocket 消息串了 -> WebSocket 没有正常关闭 -> close有问题/detached未执行/ready在detached之后执行

场景还原

此处的实际业务逻辑较为复杂,因此只能通过简化的代码来验证。

通过不断试验,最终发现:

组件的 ready 与 detached 执行顺序并没有明确的先后关系。

微信小程序组件生命周期的踩坑记录

可以通过以下代码复现该场景,或者直接访问小程序代码片段。

页面

// page.js
Page({
 data: {
 showChild: true,
 },
 onLoad() {
 this.setData({ showChild: false });
 },
});
<!-- page.wxml -->
<child wx:if="{{ showChild }}" />

组件

组件未ready的时候销毁组件,会先同步执行detached,然后异步执行ready。

// child.js
Component({
 lifetimes: {
 created() {
 console.log('created');
 },
 attached() {
 console.log('attached');
 },
 ready() {
 console.log('ready');
 },
 detached() {
 console.log('detached');
 }
 },
});

拓展

即便是将初始化的工作从ready前置到attached阶段,只要有异步操作,仍然可能存在detached先于异步回调执行的情况。

因此,请不要完全信任在组件detached阶段的销毁操作。

总结

到此这篇关于微信小程序组件生命周期踩坑的文章就介绍到这了,更多相关小程序组件生命周期内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
JavaScript 乱码问题
Aug 06 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
js获取浏览器的各种属性
Apr 27 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
React组件之间的通信的实例代码
Jun 27 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 #Vue.js
基于JavaScript实现简单的轮播图
Mar 03 #Javascript
js面向对象方式实现拖拽效果
Mar 03 #Javascript
Vue多选列表组件深入详解
Mar 02 #Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 #Vue.js
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 #Javascript
You might like
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
在PHP中使用模板的方法
2008/05/24 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php分页查询的简单实现代码
2017/03/14 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
js实现上传图片之上传前预览图片
2013/03/25 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
Python实现购物程序思路及代码
2017/07/24 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python for和else语句趣谈
2019/07/02 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
劳资协议书范本
2014/04/23 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
期末复习计划
2015/01/19 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
python基础之类属性和实例属性
2021/10/24 Python
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers