Question

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

一切似乎都顺利进行，但是当我的app画布闪烁的其他部分发生变化时调用了render方法。似乎反应是将它重新附加到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标签会更好。

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

Answer 1

重新渲染整个树不应该导致画布闪烁。但是，如果您认为重新呈现导致此问题，则可以使用shouldComponentUpdate生命周期函数，并在您不想更新时返回false。

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

例如：

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

定义了上述功能的任何组件都不会多次运行render（在组件安装时）。

然而，我无法复制你抱怨的闪烁问题。您的整个树是否经常渲染？在这种情况下，上面将修复你的画布，但你应该看看你重新渲染整个树的次数和频率，并修复那里的任何问题。

Answer 2

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

我需要手动更改此属性，因为在渲染时我还不知道canvas.width。我用＆＃34; 100％＆＃34;填充样式宽度。在渲染之后我会看到＆＃34; canvas.clientWidth＆＃34;以像素为单位提取值。

如下所述：https://facebook.github.io/react/tips/dom-event-listeners.html我附加了resize事件，现在我只是从resizeHandler更改画布属性。

反应重新渲染时画布闪烁

2 个答案: