Salesforce LWC:通过父子组件了解LWC生命周期和LWC内置方法的使用场景

Lightning Web Component的生命周期

1、什么是父子组件

概述

父子组件也可以叫做compose component,即组合组件,说得直白一点就是多个LWC进行组合,拼凑,最后形成一个大的完整的组件。这样做的原因是在实际开发中一个组件的功能会在很多组件中出现,通过组件间组合的方式可以使代码的重复率不那么高;并且也易于以后的扩展。当你在一个大的组件中需要你个额外的小功能的时候,只需要写对应功能的组件并添加进去,而不会影响原来的组件的代码和逻辑。
Owner:当前是哪个template哪个就是Owner,Owner可以

  • Set public properties on composed components(调用子组件的时候给子组件设置属性(attribute),这个属性对应着就是子组件的public propery)
  • Call methods on composed components(即可以调用子组件里面的方法)
  • Listen for any events fired by the composed components(可以监听任何由子组件触发的事件)

Container:放在owner中,又包含其他组件

  • 只能读包含的component中的public变量,不能编辑
  • 可以调用包含的component中的方法
  • 可以监听到bubble类型的对应的所包含的component事件。(事件可以分为bubble/capture)
    针对Owner和Container提到的一些知识点不本篇文章中涉及,可以先有个印象,之后会在下一篇文章中及时更新!

2、LWC组件的生命周期概述

1、如果是父子关系,先执行父组件的constructor()方法:

  • constructor()里第一句必须是super() ,并且不带参数,声明以后便可以使用this关键字
  • constructor不要去查询元素等,因为此时组件还没有被渲染出来,如果有需要,可以在connectedCallback()里面写
  • 也不要使用被**@api**声明的变量,因为组件还没有被创建

2、先查看public变量是否有等待被更新的,如果有,先更新public变量的值

3、parent组件渲染完后,会立即执行connectedCallback方法,这个方法里执行的时候可以查元素等值,只要元素被重新渲染或者说被重新插入的时候,就会被调用多次

4、connectedCallback执行完后,parent组件渲染完成

5、再执行子组件的constructor

6、更新需要被更新的public的值

7、子组件被插入DOM节点,随即调用connectedCallback方法

8、子组件渲染完成,调用子组件的renderedCallback方法

9、当父子component都渲染完后,父组件调用父组件的renderedCallback()方法

3、代码示例

sonLifeCycle

sonLifeCycle.html

<template>
    <lightning-input
        label="Description"
        type="text"
    ></lightning-input>
</template>

sonLifeCycle.js

import { LightningElement } from 'lwc';

export default class SonLifeCycle extends LightningElement {
    
    constructor(){
        super();
        console.log('son constructor');
    }

    connectedCallback(){
        console.log('son has been insert into Dom');
    }

    renderedCallback(){
        console.log('son has been rendered');
    }

    disconnectedCallback(){
        console.log('son has been disconnected');
    }
}

parentLifeCycle

ParentLifeCycle.html

<template>
    <lightning-input 
        label='Show?'
        onclick={handleButtonClick}
        type='checkbox'
    ></lightning-input>
    
    <template if:true={show}>
        <c-son-life-cycle></c-son-life-cycle>
    </template>
</template>

ParentLifeCycle.js

import { LightningElement, api } from 'lwc';

export default class ParentLifeCycle extends LightningElement {
    
    @api
    show;

    constructor(){
        super();
        this.show = false;//子组件不会被显示,即刚开始并不会有子组件中任何函数的信息
        console.log('parent constructor');
    }

    handleButtonClick(event){
        this.show = event.target.checked;
    }

    connectedCallback(){
        console.log('the parentClass from connectedCallback => ' + this.template.querySelector('lightning-input'));
        console.log('parent has been insert into Dom');
    }

    renderedCallback(){
        console.log('the parentClass from renderedCallback => ' + this.template.querySelector('lightning-input'));
        console.log('parent has been rendered');
    }

    disconnectedCallback(){
        console.log('parent has been disconnected');
    }
}

再把这两个LWC部署上去的时候,打开console窗口,你会看见:
Salesforce LWC:通过父子组件了解LWC生命周期和LWC内置方法的使用场景
因为show为false,子组件不会被显示,自然也不会调用子组件的任何方法。但是我们可以看出显示父组件的constructor,再是connectedCallback,再是renderedCallback。
这时我们可以认为:
在组件被渲染到页面上之前,构造方法一定会最先被执行,毕竟构造函数里一般都是对变量的赋值以及初始化等操作;
当组件刚刚被连接要进行渲染的时候,会调用connectedCallback方法,但是因为组件没有被渲染完成所以得不到当前组件的一些信息;
最后当组件被渲染完的时候调用renderedCallback,此时再去获取组件信息的时候便是成功的

当你点击checkBox的时候,你会发现
Salesforce LWC:通过父子组件了解LWC生命周期和LWC内置方法的使用场景
你可能会问为什么父组件的renderedCallback被执行了,两次??
第一次:在该示例中,当你点击checkBox的时候,show的值被改变,你相当于以及改变了父组件的内容,所以父组件需要被额外渲染,因此renderedCallback就是每次组件被修改后都会被执行
第二次:就像两张图显示的,子组件被显示出来,和之前说得是一个道理,因为对于父组件来说相当于内容被修改了。。。
(可以自己试试在父组件的constructor里将show的值改为true,你就会看见整个父子组件渲染的流程)

当你再次点击checkBox的时候,你会看见
Salesforce LWC:通过父子组件了解LWC生命周期和LWC内置方法的使用场景
这里renderedCallback为什么会被执行两次的原因和之前是一样的,
但是多了一个子组件的disconnectedCallback,即表示子组件被删除或者说从页面上消失后就会执行该方法

4、LWC内置方法的使用场景

总结:

constructor

和java中类的构造器相似,用于初始化等,但不要做去查询组件元素上的值等操作,因为此时组件还没有被渲染完成

connectedCallback

当组件被连接到页面是就会调用,暂时还是不能获取当前组件的信息,但是你可以去获取一个propery(成员变量),或者获取当前页面的url值等操作(后面我会有一个获取当前url,如果不符合条件然后跳转到其他页面的例子)

renderedCallback

当前组件被渲染完成,包括里面的子组件哟,当前组件的renderedCallback是最后执行的哈(回过去看例子),所以你现在可以放肆的获取元素包括子元素等操作

disconnectedCallback

当组件被删除或者消失的时候会被调用

例子很简单,目的不是为了写出多么复杂的功能,而是通过了解这些方法的使用场景会让你在后面的工作中避免入坑,当你不清楚方法的特性的时候,你不一定会知道到底是代码逻辑的错误还是组件本身特性的问题

PS:如有叙述不清或者错误的地方,恳请指正,留言交流,谢谢啦

Salesforce LWC:通过父子组件了解LWC生命周期和LWC内置方法的使用场景Salesforce LWC:通过父子组件了解LWC生命周期和LWC内置方法的使用场景 shaotianyou.ddd 发布了93 篇原创文章 · 获赞 26 · 访问量 3万+ 私信 关注
上一篇:简易版的 Spring 之如何实现 Constructor 注入


下一篇:简易版的 Spring 之如何实现 Constructor 注入