Salesforce LWC學習(四十一) If:true 即將棄用?

 本篇參考:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_directives
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_conditional

基於條件的組件渲染在我們實際項目中100%的使用,所以做過 lwc的項目的人,對 if:true/ if:false的使用瞭如指掌。先以一個demo看一下 lwc中的 基於條件渲染的 if:true / if:false的使用

Demo.html

<template>
    <template if:true={testVariable}>
        show true
    </template>
    <template if:false={testVariable}>
        show false
    </template>
</template>

Demo.js

import { LightningElement, track, wire } from 'lwc';

export default class demo extends LightningElement {
    get testVariable() {
        console.log('execute this');
        return true;
    }
}

當系統解析 if:true / if:false時,會調用這個變量的get方法,並且不管 if:true還是 if:false,都會執行,所以上述的demo中,console的內容爲執行兩次。

lwc在Spring23的開發文檔中,聲明使用 lwc:if / lwc:elseif / lwc:else來替換以前的 if:true / if:false. 原話內容爲

這裏說幾點 lwc:if 和 if:true的區別:

1. lwc:if 如果搭配 lwc:elseif以及lwc:else情況下,變量只會調用一次,然而 if:true/if:false每次都需要調用變量 get方法;
2. Lwc:if可以用於好多的元素上,比如 template / div / 自定義lwc組件等,if:true僅能用於 template上;
3. Lwc:if支持 lwc:elseif這種多層級判定,if:true / if:false只支持兩層;
4. 不能在lwc:elseif或lwc:else之前添加文本或其他元素, if:true 和 if:false是允許的。
注:目前 lwc:if只能用於sandbox,現在是 sandbox preview階段,後續正式release以後,dev開發環境才允許使用。

我們以一個例子更好的瞭解 lwc:if

demo.html:demo中使用 lwc:if / elseif作爲一個demo,我們可以看到組件中使用的是 h1而不是template,因爲 lwc:if支持在這些html標籤中使用。

<template>
    <h1 lwc:if={renderedWrapper.section1}>
        show section1
    </h1>
    <h1 lwc:elseif={renderedWrapper.section2}>
        show section2
    </h1>
    <h1 lwc:elseif={renderedWrapper.section3}>
        show section3
    </h1>
    <h1 lwc:elseif={renderedWrapper.section4}>
        show section4
    </h1>

    <lightning-button-group>
        <lightning-button label="Show section1" value="section1" onclick={handleButtonEvent}></lightning-button>
        <lightning-button label="Show section2" value="section2" onclick={handleButtonEvent}></lightning-button>
        <lightning-button label="Show section3" value="section3" onclick={handleButtonEvent}></lightning-button>
        <lightning-button label="Show section4" value="section4" onclick={handleButtonEvent}></lightning-button>
    </lightning-button-group>
</template>

demo.js

import { LightningElement, track, wire } from 'lwc';

export default class demo extends LightningElement {
    @track renderedWrapper = {
        section1 : false,
        section2 : false,
        section3 : false,
        section4 : false
    };

    handleButtonEvent(event) {
        if(event.target.value === 'section1') {
            this.renderedWrapper.section1 = true;
            this.renderedWrapper.section2 = false;
            this.renderedWrapper.section3 = false;
            this.renderedWrapper.section4 = false;
        } else if(event.target.value === 'section2') {
            this.renderedWrapper.section1 = false;
            this.renderedWrapper.section2 = true;
            this.renderedWrapper.section3 = false;
            this.renderedWrapper.section4 = false;
        } else if(event.target.value === 'section3') {
            this.renderedWrapper.section1 = false;
            this.renderedWrapper.section2 = false;
            this.renderedWrapper.section3 = true;
            this.renderedWrapper.section4 = false;
        } else if(event.target.value === 'section4') {
            this.renderedWrapper.section1 = false;
            this.renderedWrapper.section2 = false;
            this.renderedWrapper.section3 = false;
            this.renderedWrapper.section4 = true;
        }
    }
}

儘管官方說有可能刪除,我不建議直接廢除,因爲 lwc:if儘管優化了速度,直接替換還是有一些侷限性。我們看下述的例子

Demo.html:上述demo中,if:true 和 if:false中間有一個文本內容,實際項目中也有機率存在某些組件內容。

<template>
    <template if:true={testVariable}>
        show true
    </template>
    <br/>
    test show other information
    <br/>
    <template if:false={testVariable}>
        show false
    </template>
</template>

下述的demo,如果按照官方的建議,就很麻煩,無法直接將 if:true和 if:false 替換成 lwc:if以及lwc:else,以下是錯誤案例

<template>
    <template lwc:if={testVariable}>
        show true
    </template>
    <br/>
    test show other information
    <br/>
    <template lwc:else>
        show false
    </template>
</template>

上述代碼是錯誤案例,部署是會報錯:'lwc:else' directive must be used immediately after an element with 'lwc:if' or 'lwc:elseif'

我也提了一個post關於不建議後續棄用或者刪除 if:true的功能,因爲針對已有項目的替換還會涉及到regression test或者UT test,上述場景也有改動風險,而且也增加了項目中不必要的開發測試成本。大家如果贊同,歡迎like頂一下。 https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000NG0rMSAT

總結:雖然 lwc:if增加了很多的靈活性,但是不建議官方直接將 if:true棄用或者直接刪除,否則對既有系統影響還是過大。篇中有錯誤地方歡迎指出,有不懂歡迎留言,有不同看法的小夥伴歡迎討論。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章