当reactjs重新渲染时画布闪烁

Question

我在同时使用 React JS 和 canvas 时遇到问题。

一切似乎都工作顺利，但是当由于我的应用程序画布闪烁的其他部分的变化而调用渲染方法时。看起来 React 正在将它重新附加到 DOM 中（也许是因为我在它上面播放动画并且它的绘制帧每次都不同）。

这是我的渲染方法：

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

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

作为临时解决方案，我手动附加画布标签，无需使用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 标签。

知道如何解决这个问题吗？或者至少避免当仅绘制的框架发生变化时，reactjs 重新渲染此画布。

Answer 1

我花了一些时间根据你的建议进行观察，发现这种闪烁是由于我每次调用 onComponentDidUpdate 时访问 canvas DOM 元素并更改 canvas.width 和 canvas.height 造成的。

我需要手动更改此属性，因为在渲染时我还不知道 canvas.width。我用“100%”填充样式宽度，渲染后我查看“canvas.clientWidth”以提取像素值。

如此处所述： https: //facebook.github.io/react/tips/dom-event-listeners.html我附加了调整大小事件，现在我仅从我的 resizeHandler 更改画布属性。