如何防止组件重新渲染？（与 MWE）答案

【问题标题】：How to prevent component from re-rendering? (with MWE)如何防止组件重新渲染？（与 MWE）
【发布时间】：2021-05-24 02:52:23
【问题描述】：

当组件的道具未更改时，如何防止组件重新渲染？

Code sandbox link/minimal working example。将光标移到 Canvas 上，可以看到控制台记录了许多 "Canvas re-rendered" 消息。

在顶层，我将const 函数作为处理程序传递给Canvas。 onMouseMoveHandler 更新App 的状态，以便它可以更新Details 组件：

<div className="App">
  <Canvas onMouseMoveHandler={onMouseMoveHandler} />
  <Details passedProp={getValue} />
</div>

我需要它以便 Canvas 不会重新渲染，因为 HTML canvas 元素内部有用户绘制的线条。我该怎么做？

我原以为使用React.memo 会使它像一个纯组件一样，因此不会重新渲染。

我是 React 的初学者，如果我没有想到正确的代码结构，请告诉我如何解决。

【问题讨论】：

标签： javascript reactjs canvas react-hooks components

【解决方案1】：

你需要使用callBack hook，因为每次改变组件App的状态，你都重新定义了函数 onMouseMoveHandler 所以 value 改变了，props onMouseMoveHandler 改变了，所以组件 Canvas 需要重新渲染。

您可以在此处查看修改： https://codesandbox.io/s/determined-water-72uq4?file=/src/App.js:362-380

【讨论】：

【解决方案2】：

在您的 App.js 中，每次您调用 setValue 时，您的 App 组件都会重新渲染并创建一个新的 onMouseMoveHandler 函数。您的Canvas 组件使用React.memo，但由于每次重新渲染onMouseMoveHandler 都会获得一个新的引用，它也会重新渲染。为了防止你必须用useCallback 包裹你的onMouseMoveHandler。 useCallback 将返回回调的记忆版本，仅当其中一个依赖项发生更改时才会更改。 .

示例如下：

const onMouseMoveHandler = useCallback(() => {
   setValue(Math.random());
}, []);

【讨论】：

【解决方案3】：

如果您将 onMouseMoveHandler 包装在 useCallback 中，应该可以解决问题。问题是当状态改变时，你的 App 组件会重新渲染，onMouseMoveHandler 函数会得到一个新的引用。并且看到它有一个新的引用，这将导致Canvas 也重新渲染，因为它认为这是一个道具更改。使用 useCallback 钩子可以保证函数引用在渲染之间保持不变。

【讨论】：