当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重新渲染时画布闪烁

回答

相关问题