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


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 相关文章推荐
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js中的this关键字详解
Sep 25 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
JS如何实现手机端输入验证码效果
May 13 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正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php实现求相对时间函数
2015/06/15 PHP
浅谈PHP封装CURL
2019/03/06 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python 装饰器使用详解
2017/07/29 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python新手学习使用库
2020/06/11 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
2014年幼儿园元旦活动方案
2014/02/13 职场文书
酒后驾车标语
2014/06/30 职场文书
化工专业求职信
2014/07/01 职场文书
企业法人授权委托书
2014/09/25 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android