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弃用或者直接删除，否则对既有系统影响还是过大。篇中有错误地方欢迎指出，有不懂欢迎留言，有不同看法的小伙伴欢迎讨论。