reactjs - 避免在每次渲染 react-modal 时重新创建 body 组件

Question

我正在使用这个库来创建一个模态

我有 3 个组件Table：Modal和List

Tablehas Modal(a custom React Modal), and body of Modalwill be List. 现在的问题是，List有一些改变状态的功能Table，所以当我做一些可以改变状态的事情Table，Table并且Modal在重新渲染时Modal会重新渲染，它会重新创建一个新的List，这会导致丢失所有我正在做的事情List。

这是我的应用程序的简单版本。关联

现在我不想List在每次Modal重新渲染时都重新创建。有什么办法可以存档吗？（在这种情况下，我不想自己创建模态或使用全局状态管理）

import { useEffect, useMemo, useState } from "react";
import ReactModal from "react-modal";

ReactModal.setAppElement("#root");

const List = ({ onClick }) => {
  useEffect(() => {
    console.log("List is mounted");
  }, []);

  return <button onClick={onClick}>Click me!</button>;
};

const Modal = ({ state, body, isOpen }) => {
  useEffect(() => {
    console.log("Modal is re-rendered");
  });

  return (
    <div
      id="react modal wrapper"
      style={{
        display: `${isOpen ? "block" : "none"}`
      }}
    >
      <ReactModal isOpen={isOpen}>
        <div>
          state is {state}
          <br />
          {body}
        </div>
      </ReactModal>
    </div>
  );
};

const Table = ({ state, onClick, isOpen }) => {
  useEffect(() => {
    console.log("Table is re-rendered");
  });

  const memorizedList = useMemo(() => <List onClick={onClick} />, []);

  return (
    <div>
      state: {state}
      <Modal state={state} body={memorizedList} isOpen={isOpen} />
    </div>
  );
};

const App = () => {
  const [state, setState] = useState(1);

  const onClick = () => setState((v) => v + 1);

  return (
    <div>
      <button onClick={onClick}>Change state</button>
      <Table state={state} onClick={onClick} isOpen={state % 2 === 0} />
    </div>
  );
};

export default App;

标签： reactjs