當reactjs重新渲染時畫布閃爍

我有一個使用React JS和畫布在一起的問題。當reactjs重新渲染時畫布閃爍

一切似乎順利工作，但渲染時方法被調用由於我的應用程序的畫布閃爍的另一部分的變化。看起來反應是將它重新添加到DOM中（也許是因爲我正在播放動畫，並且它的繪製幀每次都不相同）。

這是我的渲染方法：

render: function() { 
var canvasStyle = { 
    width: this.props.width 
}; 

return (
    <canvas id="interactiveCanvas" style={canvasStyle}/> 
); 
}

隨着時間的解決方案我手動添加我的canvas標籤，無reactjs：

render: function() { 
var canvasStyle = { 
    width: this.props.width 
}; 
return (
    <div id="interactivediv3D"> 

    </div> 
); 
}

然後：

componentDidMount: function() { 
var canvasStyle = { 
    width: this.props.width 
}; 

var el = document.getElementById('interactivediv3D'); 

el.innerHTML = el.innerHTML + 
    '<canvas id="interactive3D" style={'+canvasStyle+'}/>'; 
},

它作品正確。但我認爲這不是一個乾淨的方法，最好使用reactjs來渲染這個canvas標籤。

任何想法，我該如何解決問題？或者至少避免只在繪製的框架改變時重新渲染這個畫布。

來源

2015-03-31 DavidDev

還有其他內容導致您正在描述的重新渲染。我創建了這個簡單的jsFiddle（http://jsfiddle.net/wiredprairie/amq1t7jc/），它創建一個畫布，然後每隔16ms覆蓋畫布。它不閃爍，因爲畫布不被重新創建。 – WiredPrairie 2015-03-31 18:46:21

我花了很長時間觀察您的建議，並發現這種閃爍是由於我每次訪問畫布DOM元素以及每次調用onComponentDidUpdate時更改canvas.width和canvas.height。

我需要手動更改此屬性，因爲在渲染時我不知道canvas.width。我用「100％」填充樣式寬度，渲染後我查看「canvas.clientWidth」以提取像素值。

按如下說明：https://facebook.github.io/react/tips/dom-event-listeners.html我連着調整事件，現在我只能從我的resizeHandler改變畫布屬性。

來源

2015-04-07 10:42:31 DavidDev

重新渲染整個樹不應導致畫布閃爍。但是如果您認爲重新渲染導致此問題，則可以使用shouldComponentUpdate生命週期函數，並在不想更新時返回false。

https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

因此，例如：

shouldComponentUpdate: function(nextProps, nextState) { 
    return false; 
}

具有限定永遠不會運行超過一次render多個上述功能的任何組件（在部件安裝）。

但是我一直無法複製你抱怨的閃爍問題。也許你整個樹的渲染過於頻繁？在這種情況下，上述內容將修復您的畫布，但您應該看看您重新渲染整個樹的次數和頻率以及解決其中的任何問題的頻率。

來源

2015-03-31 22:08:48

當reactjs重新渲染時畫布閃爍

回答

相關問題