防止<canvas>重新渲染状态变化？

Question

我在 React 16.9 中使用钩子。

我有一个呈现 HTML 画布元素的组件。 问题是我有改变组件状态的事件处理程序，它反过来重新渲染我的画布元素并擦除我完成的绘图。 如果我使用的是类组件，我也许可以添加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}>
);

}

Answer 1

您对状态概念的理解不准确，在 99.99% 的情况下，它用于保持组件更新。 如果不需要更新组件，可以使用ref。

您也可以将画布放入单独的组件中，并为悬停事件添加回调。 不要忘记将画布的子组件包装在备忘录功能中，以防止重新渲染。

Answer 2

听起来这个反应功能组件需要表现得像一个 React.PureComponent 尝试将整个反应功能组件包装在 react.memo(function) 中。

const Canvas = React.memo(() => {

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}>
);

})