如何优化具有相同属性值的同一元素的多个实例的渲染

如何解决如何优化具有相同属性值的同一元素的多个实例的渲染

我有一个基于 lit-element 的组件，它正在呈现一个包含大约 200 个条目的组合框。模板的渲染大约需要 0.20 秒。

html`
    <select>
        ${this.list.map((o) => html`
            <option id="${index}"
                    @click="${this.handleClick}">${o}</option>`
        )}
    </select>`

我多次渲染同一个组件，属性列表的值相同。每次渲染需要 0.20 秒，如果我渲染组件的 10 个实例，这会很长。有什么办法可以优化这个，特别是当知道生成的模板对于组件的每个实例都是相同的时？

解决方法

您可以使用中间变量

html`
<select>
    ${this.options}
</select>`

有这样的功能

    this.options = this.list.map(
        (o) => html`
            <option id="${index}" @click="${this.handleClick}">${o}</option>`
    );