Запретить повторную визуализацию компонента-брата, который инициирует использование useState в компоненте-оболочке - PullRequest
Новая
       40

Запретить повторную визуализацию компонента-брата, который инициирует использование useState в компоненте-оболочке

0 голосов
/ 06 апреля 2020

Я не очень опытен в React, но у меня очень простая установка. 

export default function App() {
  const [title, setTitle] = useState("still-empty");

  const myFunction = title => {
    setTitle(title);
  };

  return (
    <div className="App">
      <ComponentA myFunction={myFunction} />
      <br />
      <br />
      <ComponentB title={title} />
    </div>
  );
}



const ComponentA = ({ myFunction }) => {
  console.log("Rendering Component A");

  return (
    <div onClick={() => myFunction(Math.random() * 1000)}> Component A </div>
  );
};

export default ComponentA;


const ComponentB = ({ title }) => {
  return <div> Title : {title}</div>;
};

export default ComponentB;

Вот песочница, чтобы проверить это: https://codesandbox.io/s/musing-cookies-g7szr

Обратите внимание, что если вы нажмете «ComponentA», этот точный ComponentA будет перерисован (вы можете увидеть это в консоли), хотя никакие реквизиты для этого компонента не изменились. Это упрощенный пример моего реального варианта использования. В моем реальном случае использования, ComponentA - это карта, на которой будет сброшено множество вещей (масштабирование, центр). Я хочу предотвратить эти сбросы, а также 1 секунду, необходимую для перерисовки. Для этого я представляю этот упрощенный пример.

Итак, как я могу передать информацию от ComponentA в ComponentB, без повторного отображения самого ComponentA? Спасибо за помощь здесь.

1 Ответ

1 голос
/ 07 апреля 2020

используйте useCallback в Parent, чтобы функция не создавалась снова и снова, а только при начальном рендеринге. React.memo * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 100}. 

import React, { memo } from "react";

const ComponentA = ({ myFunction }) => {
  console.log("Rendering Component A");

  return (
    <div onClick={() => myFunction(Math.random() * 1000)}> Component A </div>
  );
};

export default memo(ComponentA);

Рабочая демонстрация здесь: https://codesandbox.io/s/affectionate-boyd-v7g2t?file= / src / App. js

...