组件生命周期，通常是我们业务逻辑开始的地方。
如果业务场景比较复杂，组件生命周期有不符合预期的表现时，
可能会导致一些诡异的业务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阶段的销毁操作。
总结
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。