Lightning Web Component的生命周期

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

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，你就会看见整个父子组件渲染的流程）

当你再次点击checkBox的时候，你会看见

这里renderedCallback为什么会被执行两次的原因和之前是一样的，
但是多了一个子组件的disconnectedCallback，即表示子组件被删除或者说从页面上消失后就会执行该方法

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

总结：

constructor

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

connectedCallback

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

renderedCallback

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

disconnectedCallback

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

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

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

• 点赞
• 收藏
• 分享
• • 文章举报

shaotianyou.ddd 发布了93 篇原创文章 · 获赞 26 · 访问量 3万+ 私信 关注

标签：内置,console,渲染,connectedCallback,Salesforce,renderedCallback,constructor,组件,LWC
来源： https://blog.csdn.net/qq_38261445/article/details/104074114