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窗口，你会看见：
因为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:如有叙述不清或者错误的地方，恳请指正，留言交流，谢谢啦