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


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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
web前端开发也需要日志
Dec 09 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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类Class的概念
2012/06/14 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
10条php编程小技巧
2015/07/07 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
JS前端笔试题分析
2016/12/19 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
微信小程序 共用变量值的实现
2017/07/12 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
python实现xlsx文件分析详解
2018/01/02 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
JAVA和C++的区别
2013/10/06 面试题
学期自我鉴定
2013/11/04 职场文书
元旦联欢会主持词
2014/03/26 职场文书
销售团队获奖感言
2014/08/14 职场文书
活动总结范文
2014/08/30 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
小学数学教学随笔
2015/08/14 职场文书
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python