Salesforce Component Lifecycle Hooks组件生命周期挂钩

前言

Lightning Web组件模型提供的方法使您可以将代码“挂钩”到组件生命周期中的关键事件。

康木昂

这些事件包括组件何时为：

已建立 Created
添加到DOM Added to the DOM
在浏览器中呈现 Rendered in the browser
遇到错误 Encountering errors
已从DOM中删除 Removed from the DOM

使用回调方法响应任何这些生命周期事件。例如，connectedCallback() 将组件插入DOM时将调用。的 offlineedCallback() 从DOM中删除组件时将调用。

在我们用来测试条件渲染的JavaScript文件中，我们使用了 connectedCallback()将组件插入DOM时自动执行代码的方法。代码等待3秒钟，然后设置为 true

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
   
    @track 
    ready = false;
    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

注意

当您在VS Code这样的编辑器中使用此示例时，可能会看到一个棉绒警告“ Restricted async operation...。” setTimeout() 功能。此警告表明您使用的异步操作经常被滥用；它根据时间延迟行为，而不是等待事件。在这种情况下，setTimeout() 适用于演示任意时间延迟，并且警告不应阻止您使用它。

另外，请注意，我们使用了 this关键词。如果您已经编写了JavaScript，则应该熟悉这种用法，并且其行为就像在其他环境中一样。thisJavaScript中的关键字指当前上下文的顶层。在这里，上下文是此类。哪一个ready？这堂课已经准备好了。的connectedCallback() 方法为Apex分配值 ready变量。这是一个很好的例子，说明了Lightning Web组件模型如何使您将JavaScript功能引入开发。您可以找到有关以下内容的链接：this 在资源部分。

好了到这里就先告一段落，下一节我们来学习讨论–组件所处的环境。