假设我有三个组件：
<Genre /><Book /><DeleteModal />一个流派有多本书，我使用 .map 来迭代每本书
<Book />当显示模态框时，每本书都可以删除。
我能想到有两种选择可以解决这个问题。
导入一次DeleteModal，并为每个元素提供一个prop 处理模态框的关闭/打开。
或者在Book组件中导入DeleteModal。
我最好将
DeleteModal<Book />这是我正在创建的第一个“真正的”个人应用程序，我想尝试采用最佳实践。
是的，在加载代码时，导入会为每个呈现的组件增加一点额外的成本，但由于此代码只是一个函数（如果使用类组件，则可以是函数组件或构造函数），因此成本是最小，如下所示只要不渲染模态（导入的只是对函数的引用，而不是组件本身的复杂性）。
但是，如果您的模式类似于
<Modal visible={isVisible} ... />BookBooks{isVisible && <Modal ... />}，您将不会遇到这些问题，因为组件是有条件渲染的。
最好的模式是在父级中只有一个可以通过状态呈现的模态，或者更好的是，通过全局状态强制管理模态（如来自 Mantine UI 库的模式），因为模态可以通常被视为应用程序中的单例（您几乎永远不会同时渲染多个模式）。另一种方法可以是使用native modals，但它可能不适合您的用例。最后一种方法是信任大型库，例如 Radix 的对话框
尽管如此，您从中获得的性能提升很可能可以忽略不计。请小心 useEffect 中缺少依赖项、记住大型计算和这些类型的优化，它们更有可能破坏您的代码。您很可能会在项目后期担心这些微观优化。快乐编码！