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

zero.zhang發表於2023-02-06

本篇參考：

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棄用或者直接刪除，否則對既有系統影響還是過大。篇中有錯誤地方歡迎指出，有不懂歡迎留言，有不同看法的小夥伴歡迎討論。

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

相關文章