Question

我对React不太有经验，但是我有一个非常简单的设置。

size=mp.getSize();

这里是一个用来测试此内容的沙箱： https://codesandbox.io/s/musing-cookies-g7szr

请注意，如果您单击“ ComponentA”，则该组件A会重新呈现（您可以在控制台中看到它），尽管该组件上的道具没有更改。这是我实际用例的简化示例。在我的实际用例中，ComponentA是一张地图，其中有很多东西（缩放，居中）将被重置。我要防止这些重置以及重新渲染所花费的1秒。因此，我给出了这个简化的示例。

那么，如何在不重新呈现ComponentA本身的情况下将信息从ComponentA传递到ComponentB？感谢您的帮助。

Answer 1

在Parent中使用useCallback，以使函数不会一次又一次地创建，而仅在初始渲染时创建。使用React.memo，以便在不更改道具的情况下也不会重新渲染组件。

应用

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

  const myFunction = useCallback(title => {
    setTitle(title);
  }, []);

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

ComponentA

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

防止重新呈现在包装器组件中启动useState的兄弟组件

1 个答案: