Javascript HyperHTML—是否可以在不重新呈现整个组件DOM的情况下更新组件状态？

我有下面的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>
        `
    }
}

const{hyper}=hyperHTML；
类searchComponent扩展了hyper.Component{
建造师（数据）{
超级（）；
this.setState（{通知：'}）；
}
onChange（）{
// ...
如果（条件）{
this.setState（（）=>（{notification:'notification text！'}））；
}
// ...
}
异步listTags（）{
//...
//异步内容
//...
}
render（）{
这个是.html`
${{
any:this.listTags（），
占位符：“传入..！”，
}}
${this.state.notification}
`
}
}

您的代码中几乎没有漏洞。 首先，

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>`
  }
}

const{hyper}=hyperHTML；
类SearchComponent扩展了hyper.Component{
onchange（）{
SearchComponent的此实例；//true
}
render（）{返回this.html`
${...}
`
}
}

或者在构造函数中绑定

onChange

方法

您还忘记了在

render（）

中返回这个.html，如果要将组件放置在DOM上，这是必需的

然而，为了快速演示代码，假设这些都是不相关的错误，您需要了解异步世界是异步的

如果您有一个异步操作，您无法判断该操作是否已解决，您只需传递它，这正是您正在做的

您正在更改组件的状态，希望以前的异步操作不会再次触发

但组件如何知道这种状态更改是否会产生不同的布局？TL；DR的答案是不能，稍长一点的答案是，每个更新都有一个异步的、不相关的行为，但您希望异步行为只触发一次，而不是每次更新

可能的解决方案

您可以在

SearchComponent

初始化（

constructor

）期间创建一个子组件作为零件，并对其实例化一次，也可以使用比当前占位符更有意义的占位符

事实上，现在您正在创建像

incoming..这样的输出作为标准HTML没有任何意义

select
可以有
option
标记，将其用作某些文本的通用容器就像滥用其潜力

您需要的是一个类似于
select
上的
disabled=${this.options resolved}
，并将
${this.options}
作为其内容数组

通过这种方式，在解决选项时，您不会有任何更改，并且在解决选项时，会有一个正确的选项列表

您可以在此
中看到一个示例，谢谢您的回答，我的示例代码是一个粗略的抽象。我喜欢你在回答问题时所采用的解释错误的方法！