Question

在StencilJS中，我试图仅重新呈现状态的更新值。但是每次值更新时，整个组件都会重新呈现。有什么解决办法可以避免这种情况？

下面是代码：

@State() visible = true 

handleRetryClick = () => {
  this.visible = false;
};

render() {
      return (
        <div class={this.visible ? "modal-wrapper" : "modal-close"}>
          <div class="modal">
            <div class="modal-container">
              <div class="title">{this.status}</div>
              <div class="button-container">
                <button class="retry" onClick={this.handleRetryClick}>{this.modalButtonLabel}</button>
              </div>
            </div>
          </div>
        </div>
      );
    }

Answer 1

状态修饰属性的目的是在其值更改时重新呈现组件。参见https://stenciljs.com/docs/state：

对@State()属性的任何更改都将导致再次调用组件渲染函数。

我不确定您要达到的目标是100％，但是如果您担心组件中的所有元素都会被浏览器重新绘制，则情况并非如此。模具的运行时使用虚拟DOM，即。 e。重新渲染组件时，它会比较先前和新的DOM节点并生成差异，并且只有具有差异的元素才会在实际DOM中被修改。

StencilJS-更新导致整个组件重新渲染的状态

1 个答案: