javascript - 在 Preact 中渲染一个 HTMLImageElement dom 节点

Question

（注意：我问的是Preact，而不是React，它有使用 ReactsDomElement包装器组件的解决方案）。

我有一个HTMLImageElement，它是使用var img = document.createElement('img'). 如何使用 Preact 渲染这个手动创建的 DOM 元素？

以下 JSX 片段可以工作，但对于移动设备上的较大图像非常慢：

<img src={img.src} />

我认为它很慢，因为图像实例是在内存中复制的，而不是使用现有的 DOM 节点和图像缓冲区。

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

Answer 1

似乎该react-dom-element-wrapper组件很容易移植到，preact主要区别在于 in将始终是.preactprops.childrenArray

看看这个组件是否可以渲染你的图像：

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

示例用法：http: //jsfiddle.net/epc3skk3/6/

Answer 2

也许它可能会奏效。快速简单地渲染 html 元素https://www.npmjs.com/package/preact-append-child