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

最新推荐文章于 2024-07-10 17:34:59 发布

shaotianyou.ddd

最新推荐文章于 2024-07-10 17:34:59 发布

阅读量3.7k

点赞数 1

分类专栏： LWC 文章标签： salesforce LWC 父子组件 LWC生命周期 lightning

本文链接：https://blog.csdn.net/qq_38261445/article/details/104074114

版权

LWC 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Lightning Web Component的生命周期

1、什么是父子组件
- 概述
2、LWC组件的生命周期概述
3、代码示例
- sonLifeCycle
- parentLifeCycle
4、LWC内置方法的使用场景

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窗口，你会看见：
在这里插入图片描述
因为show为false，子组件不会被显示，自然也不会调用子组件的任何方法。但是我们可以看出显示父组件的constructor，再是connectedCallback，再是renderedCallback。
这时我们可以认为：
在组件被渲染到页面上之前，构造方法一定会最先被执行，毕竟构造函数里一般都是对变量的赋值以及初始化等操作；
当组件刚刚被连接要进行渲染的时候，会调用connectedCallback方法，但是因为组件没有被渲染完成所以得不到当前组件的一些信息；
最后当组件被渲染完的时候调用renderedCallback，此时再去获取组件信息的时候便是成功的

当你点击checkBox的时候，你会发现
在这里插入图片描述
你可能会问为什么父组件的renderedCallback被执行了，两次？？
第一次：在该示例中，当你点击checkBox的时候，show的值被改变，你相当于以及改变了父组件的内容，所以父组件需要被额外渲染，因此renderedCallback就是每次组件被修改后都会被执行
第二次：就像两张图显示的，子组件被显示出来，和之前说得是一个道理，因为对于父组件来说相当于内容被修改了。。。
（可以自己试试在父组件的constructor里将show的值改为true，你就会看见整个父子组件渲染的流程）