HyperHTML - 전체 구성 요소 DOM을 다시 렌더링하지 않고도 구성 요소 상태를 업데이트 할 수 있습니까?

Question

다음과 같은 hyperHTML 구성 요소가 있습니다. 의도 한대로 모든 것이 작동하지만 유일한 문제는 모든 구성 요소 DOM이 모든 this.setState() 호출에서 렌더링된다는 것입니다.

내 질문 :

전체 구성 요소의 DOM 렌더링 다시없이 DOM의 알림 문자열을 업데이트 할 수있는 방법이 있습니까?

const { hyper } = hyperHTML; 

class searchComponent extends hyper.Component { 
    constructor(data) { 
     super(); 
     this.setState({ notification: '' }); 
    } 
    onChange() { 
     // ... 
     if (condition) { 
      this.setState(() => ({ notification: 'notification text!' })); 
     } 
     // ... 
    } 
    async listTags() { 
     //... 
     // async content 
     //... 
    } 
    render() { 
     this.html ` 
     <div id="search_container"> 
      <select name="tags" id="tags_search" class='form-control m0' multiple="multiple" onChange=${this.onChange}> 
      ${{ 
       any: this.listTags(), 
       placeholder: 'incoming..!', 
      }} 
      </select> 
      <div class="search_notification"> 
       <!-- I want to re render only this part of the DOM --> 
       ${this.state.notification} 
      </div> 
     </div> 
     ` 
    } 
} 

Answer 1

코드에 몇 가지 문제점이 있습니다. 시작하려면 onChange이 예상대로 작동하지 않습니다. 컨텍스트를 그대로 잃어 버리는 것입니다. 당신도 바로 onchange HTML 이벤트를 사용, 당신은 방법 onchange를 호출하면 이벤트 리스너 단순히 this 사용

const { hyper } = hyperHTML; 

class SearchComponent extends hyper.Component { 
    onchange() { 
    this instaneof SearchComponent; // true 
    } 
    render() { return this.html` 
    <div id="search_container"> 
     <select onchange=${this}> 
     ${...} 
     </select> 
    </div>` 
    } 
} 

또는 생성자 내에서 onChange 방법을 결합한다.

return this.htmlrender()도 잊어 버렸습니다. 이는 DOM에 구성 요소를 배치하려는 경우에 필요합니다.

그러나 이러한 데모 코드가 빠른 데모 코드로는 부적합한 오류라고 가정하면 비동기 세계는 비동기임을 이해해야합니다.

비동기 작업이있는 경우 해결되었는지 여부를 알 수있는 방법이 없으며 전달하기 만하면됩니다.

이전에 비동기 작업이 다시 트리거되지 않을 것으로 예상되는 구성 요소의 상태가 변경됩니다.

그러나 상태 변경으로 인해 다른 레이아웃이 생성된다는 것을 구성 요소는 어떻게 알 수 있습니까? TL; DR 답은 조금 더 긴 것은 비동기 적이며 관련이없는 비헤이비어가 각 업데이트에 첨부되어 있지만 비동기 비헤이비어가 업데이트 당 하나만 실행되기를 원한다는 것입니다.

가능한 솔루션

당신은 하위 구성 요소를 일부를 생성하고 SearchComponent 초기화 (constructor) 또는 단순히 현재보다 더 많은 의미가 자리 표시자를 사용하는 동안 한 번 인스턴스화 할 수 있습니다.

실제로 지금은 <select>incoming..!</select>과 같은 출력을 만들어 표준 HTML로는 적합하지 않습니다.

select은 option 태그를 가질 수 있습니다. 일부 텍스트의 일반 컨테이너로 사용하면 잠재 성을 남용하는 것과 같습니다.

select에 disabled=${this.optionsResolved}, 내용물 배열에 ${this.options}과 같은 내용이 필요합니다.

이렇게하면 옵션을 해결하는 동안 아무런 변화가 없으며 그런 일이 발생하면 적절한 옵션 목록이 표시됩니다.

당신은 당신의 대답이 Code Pen