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

【问题标题】：StencilJS - Updating the state causing whole component to re-renderStencilJS - 更新导致整个组件重新渲染的状态
【发布时间】：2020-11-03 10:10:36
【问题描述】：

在 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>
      );
    }

【问题讨论】：

标签： components state stenciljs rerender

【解决方案1】：

状态修饰属性的目的是，当它的值改变时，组件会重新渲染。见https://stenciljs.com/docs/state：

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

我不能 100% 确定您想要实现什么，但如果您担心组件中的所有元素都会被浏览器重新绘制，那么情况并非如此。 Stencil 的运行时使用虚拟 DOM，即。 e.当组件重新渲染时，它会比较前一个和新的 DOM 节点并生成一个 diff，只有有差异的元素才会在真实的 DOM 中被修改。

【讨论】：