javascript - Svelte JS:在另一个方法中实现 onDestroy 的目的是什么
问题描述
我正在学习 Svelte JS。在这个REPL中,想知道onDestroy
在组件定义中添加方法的目的是什么Tabs
。我知道这是管理组件被销毁时发生的事情的方法,但我从未见过它在另一个方法中定义。
tab => {
tabs.push(tab);
selectedTab.update(current => current || tab);
onDestroy(() => {
const i = tabs.indexOf(tab);
tabs.splice(i, 1);
selectedTab.update(current => current === tab ? (tabs[i] || tabs[tabs.length - 1]) : current);
});
},
解决方案
生命周期函数有一个简单的规则,例如onDestroy
:它们必须在组件初始化期间调用,即它们必须在组件的<script>
标签中同步调用。
<script>
import { onDestroy } from 'svelte'
onDestroy(..) // ok
{
onDestroy(..) // ok
}
(() => {
onDestroy(..) // ok
})()
const fn = callback => {
onDestroy(callback)
}
fn() // ok
setTimeout(() => {
onDestroy(..) // NOT OK !!!
fn() // NOT OK
})
</script>
重要的是调用的时间,而不是它在代码中的位置。生命周期回调将附加到当前正在初始化的组件,无论调用来自何处。
如果你愿意,你可以放入onDestroy
一个函数,这只是意味着这个函数的用户必须在一个组件的初始化期间调用它,并且当这个组件被销毁时回调将运行。
在您链接的示例中,上下文用作包含onDestroy
. 上下文也必须在组件的初始化阶段同步解决,所以我们很好。组件从上下文中获取函数,它立即调用它,并且该函数可以在组件不知道的情况下对组件注册一些清理。这是很好的封装。
推荐阅读
- r - 如何使用索引获取 R 中的第一列和几行?
- python - Pygame 碰撞不断传送我的玩家如何修复?
- javascript - 如何在某个时间立即停止异步函数?
- javascript - 尝试通过 canvas.toDataURL 压缩 img
- python-3.x - 如何在 Python 中修复这个 geckodriver 错误?
- python - 如何在 PyQt5 的上下文菜单中添加上下文菜单?
- python - 在 Python 中创建直方图
- html - Angular:错误类型错误:无法读取 null 的属性“choice_set”,而数据显示正确
- python - 为什么我编译的 C++ 文件的 .exe 显示通常不会出现的错误?
- ruby-on-rails - 如何使用条带结帐在 Rails 中实施多个计划