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

Posted 2023-02-22

【中文标题】StencilJS - 更新导致整个组件重新渲染的状态

【英文标题】：StencilJS - Updating the state causing whole component to re-render

【发布时间】：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>
      );
    

【参考方案1】：

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

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

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