Question

我设置了一个最小的盖茨比页面来测试盖茨比何时重新渲染，我发现仅单击常规的路中（哈希）锚链接会导致重新渲染。

那是为什么？有什么办法可以防止它？

这是一个示例页面：

const SomePage = props => {
  console.log('RE-RENDERING PAGE');
  return (
    <>
      <a href="#foo">Link that should not fire re-render</a>;
    </>
  );
};

Answer 1

反应使很多东西重新呈现。由于整个页面都包裹在“到达路由器”中，并且您使用的是非记忆功能组件，因此，您收到控制台消息时不会感到丝毫惊讶。我给您的印象是您试图避免重新加载页面，而不是基于prop-change的React渲染。

如果您想防止重新渲染，可以使用React.memo：

const SomePage = React.memo(() => <Link to="#foo">Text</Link>)

Answer 2

import { Link } from "gatsby"

const SomePage = props => {
  return (
    <Link to="#foo">Link that should not fire re-render</Link>;
  );
};

<Link>将使用适当的href呈现完全可访问的锚标记。

Gatsby：单击路线中的锚元素将导致重新渲染

2 个答案: