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/

Answer 2

也许可以。如此快速，简单地呈现html元素https://www.npmjs.com/package/preact-append-child

在Preact

2 个答案: