Холст мерцает при реагировании rejenders

Question

У меня проблема с использованием React JS и холста вместе.

все, кажется, работает гладко, но когда метод визуализации вызван из-за изменений в другой части моего мерцания холста приложения. Кажется, что реакция повторно добавляет его в 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+'}/>'; 
}, 

И работает правильно. Но я думаю, что это не чистый способ, и лучше сделать этот тег canvas с помощью responsejs.

Любая идея, как я могу решить проблему? или, по крайней мере, избежать реакции re-rendering этого холста, когда изменился только рисованный кадр.

Answer 1

Я потратил время на наблюдение с учетом вашего совета, и я узнаю, что это мерцание было вызвано тем фактом, что я обращался к элементу холста DOM и изменял canvas.width и canvas.height каждый раз, когда вызывался onComponentDidUpdate.

Мне нужно было изменить это свойство вручную, потому что пока рендеринг я еще не знаю canvas.width. Я заполняю ширину стилей «100%», а после рендеринга я просматриваю «canvas.clientWidth», чтобы извлечь значение в пикселях.

Как описано здесь: https://facebook.github.io/react/tips/dom-event-listeners.html Я приложил событие изменения размера, и теперь я изменяю свойства холста только из моего resizeHandler.

Answer 2

Повторное рендеринг всего дерева не должно вызывать мерцание вашего холста. Но если вы считаете, что повторная реновация вызывает эту проблему, вы можете использовать функцию жизненного цикла shouldComponentUpdate и возвращать false, если вы не хотите обновлять.

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

Так, например:

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

Любой компонент с вышеуказанной функцией, определенной никогда не будет работать более render чем один раз (при компонентном монтаже).

Однако я не смог воспроизвести мерцающую проблему, на которую вы жалуетесь. Возможно, слишком много всего вашего дерева? В этом случае вышеупомянутое будет фиксировать ваш холст, но вы должны посмотреть, сколько раз и как часто вы повторно просматриваете свое дерево и исправляете какие-либо проблемы там.