渲染HTMLImageElement DOM節點Preact

Question

（注意：我問Preact，不陣營對其中有使用反應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/