Гэтсби: щелчок элемента привязки в пути приводит к повторной визуализации

Question

Я установил минимальную страницу Gatsby для проверки при повторном рендеринге Gatsby и обнаружил, что простой щелчок по обычной якорной ссылке в маршруте вызывает повторный рендеринг.

Почему это? Есть ли способ предотвратить это?

Вот пример страницы:

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

Answer 1

React много визуализирует.Поскольку вся страница обернута в Reach Router, и вы используете функциональный компонент, не связанный с заметками, я не удивлюсь, что вы получили консольное сообщение.У меня сложилось впечатление, что вы пытались избежать перезагрузки страницы, а не рендеринга 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.