Предотвратить повторную визуализацию <canvas>при изменении состояния? - PullRequest
Новая
       5

Предотвратить повторную визуализацию <canvas>при изменении состояния?

0 голосов
/ 06 января 2020

Я использую хуки, с React 16.9.

У меня есть компонент, который визуализирует элемент HTML canvas. Проблема в том, что у меня есть обработчики событий, которые изменяют состояние компонента, что, в свою очередь, повторно отображает мой элемент canvas и стирает чертеж, который я сделал. Если бы я использовал компоненты класса, я мог бы добавить shouldComponentUpdate() {return false;}, но я не уверен в эквиваленте для ловушек. 

const Canvas = () => {

const [hover, setHover] = useState(false);
const myRef = useRef();

useEffect(() => {

  // perform a one-time drawing on the canvas element that should be retained throughout state changes

  myRef.current.addEventListener('onmouseover', () => setHover(true));
  myRef.current.addEventListener('onmouseout', () => setHover(false));

}, [])

return (
  {hover && <p>Hovering</p>}
  <canvas ref = {myRef}>
);

}

1 Ответ

1 голос
/ 06 января 2020

У вас неточное понимание концепции состояния, в 99,99% случаев она используется для обновления компонента. Если вам не нужно обновлять компонент, вы можете использовать ref.

Также вы можете поместить холст в отдельный компонент и добавить обратные вызовы к событиям при наведении. Не забудьте обернуть дочерний компонент canvas в функцию memo, предотвращающую повторную визуализацию.

...