防止在包装器组件中启动 useState 的同级组件的重新渲染

Question

我对 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 本身的情况下将信息从 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>
  );
}

组件A

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 的同级组件的重新渲染

Prevent rerender of sibling component which initiates a useState in wrapper component

rerender

reactjs

react-hooks