javascript - 在 Preact 中渲染 HTMLImageElement dom 节点

Question

(注意:我问的是 Preact，而不是 React，后者有使用 Reacts DomElement 包装组件的解决方案)。

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

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

<img src={img.src} />

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

有更好(更快)的解决方案吗？

Answer 1

看来react-dom-element-wrapper组件很容易移植到 preact，主要区别在于在 preact 中，props.children 始终是一个 Array.

看看这个组件是否可以渲染您的图像:

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