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


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 相关文章推荐
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
AngularJS实现表单验证
Jan 28 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
详解Angular 4.x Injector
May 04 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
Javascript Select操作大集合
2009/05/26 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
基于vue实现分页效果
2017/11/06 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
python操作excel让工作自动化
2019/08/09 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python连接mongodb集群方法详解
2020/02/13 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
Java的五个基础面试题
2016/02/26 面试题
上课说话检讨书大全
2014/01/22 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技