StencilJS

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:

Any changes to a @State() property will cause the components render function to be called again.

我不是 100% 确定您要实现的目标，但如果您担心组件内的所有元素都会被浏览器重新绘制，那么事实并非如此。 Stencil 的运行时使用虚拟 DOM，i。 e.当组件重新渲染时，它会比较之前的和新的 DOM 节点并产生差异，只有有差异的元素才会在真正的 DOM.

中被修改

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

StencilJS - Updating the state causing whole component to re-render

components

state

rerender