Stemciljs学习之组件生命周期

蔚落 2024-03-17 18:26 3阅读 0赞

组件有许多生命周期方法，可用于了解组件何时“将”和“执行”加载、更新和呈现。可以将这些方法添加到组件中，以便在正确的时间挂接到操作中。

在组件类中实现以下方法之一，Stencil 将以正确的顺序自动调用它们：

### 单组件的生命周期 ###

import { Component, Host, h, Prop, Watch } from '@stencil/core';
    
    @Component({
      tag: 'web-text',
      styleUrl: 'web-text.css',
      shadow: true,
    })
    export class WebText {
      @Prop() text: string;
    
      @Watch('text')
      handlerTextWatcher(val: string, oldVal: string) {
        console.log('新值：', val, '，旧值：', oldVal);
        console.log('生命周期：watch');
      }
    
      connectedCallback() {
        console.log('生命周期：connectedCallback');
      }
    
      componentWillLoad() {
        console.log('生命周期：componentWillLoad');
      }
    
      componentWillRender() {
        console.log('生命周期：componentWillRender');
      }
    
      render() {
        console.log('生命周期：render');
        return <Host>{this.text}</Host>;
      }
    
      componentDidRender() {
        console.log('生命周期：componentDidRender');
      }
    
      componentDidLoad() {
        console.log('生命周期：componentDidLoad');
      }
    
      componentShouldUpdate() {
        console.log('生命周期：componentShouldUpdate');
      }
    
      componentWillUpdate() {
        console.log('生命周期：componentWillUpdate');
      }
    
      componentDidUpdate() {
        console.log('生命周期：componentDidUpdate');
      }
    
      disconnectedCallback() {
        console.log('生命周期：disconnectedCallback');
      }
    }

未更改Prop text时console输入的结果

![26b6b292e39128011310061e66d0e323.png][]

更改Prop text后console输出的结果

![d6501dee86299387f78d14bf4020e5aa.png][]

具体的生命图示如下（源自官方网站）

![0f16d639294094c5235a693f9d4915a7.png][]

更多生命周期相关的细节请参考[官方网站][Link 1]

> 如果要更改`Prop`和`State`的值，建议在componentWill开头的生命周期中去更改，因为带will的生命周期会在组件渲染前执行，在did生命周期内区修改`Prop`和`State`的值，有可能会造成死循环；如果必须在did生命周期内区修改`Prop`和`State`的值，请一定要做好前置判断

### 嵌套组件的生命周期 ###

<component-a> 
        <component-b> 
            <component-c></component-c> 
        </component-b> 
    </component-a>

1.  `component-a` \- `componentWillLoad()`
2.  `component-b` \- `componentWillLoad()`
3.  `component-c` \- `componentWillLoad()`
4.  `component-c` \- `componentDidLoad()`
5.  `component-b` \- `componentDidLoad()`
6.  `component-a` \- `componentDidLoad()`

[26b6b292e39128011310061e66d0e323.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/1c43cf49d37a4908967566e68eea67f5.png
[d6501dee86299387f78d14bf4020e5aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/3cbdcc7bce374f49a19ddcd1ffe9ed8a.png
[0f16d639294094c5235a693f9d4915a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/2b33e5fefb584f7fbf2b1e9a87e7236d.png
[Link 1]: https://stenciljs.com/docs/component-lifecycle