React千级列表下SubComponent传prop与内部导入的性能差异

数千条数据量级下，两种方案不存在可感知的明显性能差异，原因如下：

• ES模块的导入是静态单例模式，无论你在多少个RowComponent内部重复导入SubComponent，打包时只会保留一份组件代码，运行时也只会初始化一次组件定义，不会出现重复加载组件定义的额外开销。
• 两种方案的渲染开销本质完全一致：都是为每一行数据创建一个SubComponent的实例，差异仅在于前者多了一层prop传递的极微开销，这部分开销在React的整体渲染链路中占比可以忽略，哪怕是上万条数据也不会带来可感知的性能差距。

你倾向的RowComponent内部导入方案是更合理的常规选择：

• 符合单一职责原则，RowComponent内部的依赖不需要上层ArrayComponent感知，减少了跨层传递不必要的props，也能简化你提到的其他相关逻辑，可维护性更高。
• 只有当你存在动态替换行内组件的需求（比如不同行要渲染不同变体的SubComponent、测试场景下要注入Mock组件）时，才需要选择顶层导入后通过prop传递的依赖注入方案。

内容的提问来源于stack exchange，提问作者Katzhuu