javascript - 防止 在状态更改时重新渲染？

Question

我正在使用钩子(Hook)，React 16.9。

我有一个呈现 HTML Canvas 元素的组件。问题是我有改变组件状态的事件处理程序，这反过来又重新渲染我的 Canvas 元素并删除我所做的绘图。如果我使用类组件，我也许可以添加 shouldComponentUpdate() {return false;}，但我不确定钩子(Hook)的等效项。

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。

您还可以将 Canvas 放入单独的组件中，并添加对悬停事件的回调。不要忘记将 Canvas 的子组件包装在备忘录函数中，以防止重新渲染。