Salesforce学习 Lwc（十一）【renderedCallback】

原创

repick

修改于 2021-01-04 17:58:38

1.4K0

修改于 2021-01-04 17:58:38

文章被收录于专栏：Salesforce

今天讲解一下【renderedcallback()】在Lightning Web Component中的用法，大家可能对【connectedCallback()】方法非常熟悉，我们做初期数据加载时候经常会用到，那么这两个方法的执行顺序又是如何呢，下边写一个简单的例子，带我们能够更深入的了解一下。

renderedCallbackTest.html

<template>
    <lightning-input label="Name" onchange = {handleChange}> </lightning-input>
    {greeting}
</template>

renderedCallbackTest.js

import { LightningElement } from 'lwc';
export default class RenderedCallbackTest extends LightningElement {
    greeting;
    renderedCallback(){
        console.log('renderd Callback');
    }
    handleChange(event){
        this.greeting = event.target.value;
    }
    connectedCallback() {
        console.log('connected Callback');
    }
}

效果展示：

1.把这个Component拖到一个详细page上

2.按【F12】打开ConsoleLog，结果是按照【connectedCallback()】→【renderedcallback()】顺序执行的。

3.Name入力框输入【test】

4.看下边结果每当输入框中输入一个字符【renderedcallback()】都会被调用一次。

总结：【connectedCallback()】被用做Component的初期方法，加载初期数据时候执行一次，【renderedcallback()】方法是每当Component被渲染时都会被执行一次。如果有需求输入框输入数据时只想执行一次的情况下，可以写Flag进行适当控制。

修改后代码：

import { LightningElement } from 'lwc';
export default class RenderedCallbackTest extends LightningElement {
    greeting;
    hasRendered = true;
    renderedCallback(){
        if (this.hasRendered) {
            this.greeting = 'set by renderedCallback';
            console.log('greeting ' + this.greeting);
            this.hasRendered = false;
        }
    }
    handleChange(event){
        this.greeting = event.target.value;
    }
    connectedCallback() {
        console.log('connected Callback');
    }
}

效果展示：