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