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

或者您绑定(bind) onChange构造函数中的方法。

你也忘了return this.html里面render() ，如果您想将组件放在 DOM 上，这是必需的。

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

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

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

但是组件如何知道这种状态变化是否会产生不同的布局？ TL;DR 的答案是它不能，稍微长一点的是你有一个异步的、不相关的行为，附加到每个更新，但你希望该异步行为只被触发一次，而不是每次更新。

可能的解决方案

您可以创建一个子组件，然后在 SearchComponent 期间将其实例化一次。初始化 ( constructor) 或简单地使用比当前占位符更有意义的占位符。

确实，现在您正在创建类似 <select>incoming..!</select> 的输出这作为标准 HTML 毫无意义。

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

你想要的是类似 disabled=${this.optionsResolved} 的东西在 select 上, 和 ${this.options}作为其内容的数组。

通过这种方式，您在解析选项时不会有任何更改，一旦发生这种情况，就会有一个正确的选项列表。

你可以在这个 Code Pen 中看到一个例子