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