防止<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 功能组件需要表现得像 React.PureComponent 尝试将整个 react 功能组件包装在 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}>
);
})