Javascript 在Preact中呈现HTMLImageElement dom节点

（注意：我问的是Preact，而不是React，因为有使用Reacts

doElement

包装组件的解决方案）

我有一个

HTMLImageElement

，它是使用

var img=document.createElement（'img'）

创建的。如何使用Preact呈现这个手动创建的DOM元素

以下JSX代码段可以工作，但对于移动设备上的较大图像来说速度非常慢：

<img src={img.src} />

我假设它是如此缓慢，因为映像实例是在内存中复制的，而不是使用现有的DOM节点和映像缓冲区

有更好（更快）的解决方案吗？

似乎该组件很容易移植到

preact

，主要区别在于

preact

，

道具中。子组件始终是一个
数组

查看此组件是否可以渲染图像：

// Based on https://github.com/antialias/react-dom-element-wrapper/blob/master/index.js
class DomWrapper extends Component {
    update = () => {
        let fragment = document.createDocumentFragment();
        this.props.children.forEach((child) => fragment.appendChild(child))
        this.el.innerHTML = '';
        this.el.appendChild(fragment);
    }

    componentDidMount() { this.update(); }

    componentDidUpdate() { this.update(); }

    render() {
        return <div ref={(el) => this.el = el} />
    }
}

//基于https://github.com/antialias/react-dom-element-wrapper/blob/master/index.js
类包装器扩展组件{
更新=（）=>{
让fragment=document.createDocumentFragment（）；
this.props.children.forEach（（child）=>fragment.appendChild（child））
this.el.innerHTML=''；
这个.el.appendChild（片段）；
}
componentDidMount（）{this.update（）；}
componentDidUpdate（）{this.update（）；}
render（）{
返回this.el=el}/>
}
}

示例用法：
似乎该组件很容易移植到
preact
，主要区别在于在
preact
中，
道具。子组件始终是一个
数组

查看此组件是否可以渲染图像：

// Based on https://github.com/antialias/react-dom-element-wrapper/blob/master/index.js
class DomWrapper extends Component {
    update = () => {
        let fragment = document.createDocumentFragment();
        this.props.children.forEach((child) => fragment.appendChild(child))
        this.el.innerHTML = '';
        this.el.appendChild(fragment);
    }

    componentDidMount() { this.update(); }

    componentDidUpdate() { this.update(); }

    render() {
        return <div ref={(el) => this.el = el} />
    }
}

//基于https://github.com/antialias/react-dom-element-wrapper/blob/master/index.js
类包装器扩展组件{
更新=（）=>{
让fragment=document.createDocumentFragment（）；
this.props.children.forEach（（child）=>fragment.appendChild（child））
this.el.innerHTML=''；
这个.el.appendChild（片段）；
}
componentDidMount（）{this.update（）；}
componentDidUpdate（）{this.update（）；}
render（）{
返回this.el=el}/>
}
}

用法示例：
也许它可以工作。快速而简单地呈现html元素
也许可以。这样做可以快速而简单地呈现html元素