Stencil JS - Обновление состояния, вызывающее повторную визуализацию всего компонента - PullRequest
Новая
       96

Stencil JS - Обновление состояния, вызывающее повторную визуализацию всего компонента

0 голосов
/ 14 июля 2020

В Stencil JS я пытаюсь повторно визуализировать только обновленное значение состояния. Но каждый раз, когда значение обновляется, весь компонент подвергается повторной визуализации. Есть ли какое-то решение, чтобы избежать этого?

Ниже приведен код: 

@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 Ответ

2 голосов
/ 14 июля 2020

Это назначение свойства, украшенного состоянием, которое при изменении его значения выполняет повторную визуализацию компонента. См. https://stenciljs.com/docs/state:

Любые изменения свойства @State() приведут к повторному вызову функции рендеринга компонентов.

I ' Я не уверен на 100%, чего вы пытаетесь достичь, но если вы беспокоитесь, что все элементы внутри вашего компонента будут перерисованы браузером, то это не совсем так. Среда выполнения Stencil использует виртуальную модель DOM, т. Е. При повторной визуализации компонента он сравнивает предыдущий и новый узлы DOM и генерирует различие, и только элементы с отличиями будут изменены в реальном DOM.

...