反应传递数组子组件作为道具或将其导入每个数组项

Question

我有一个组件 (ArrayComponent)，它呈现数据行数组 (RowComponents)，将行包裹在 子组件。无论是在顶级组件 (ArrayComponent) 上导入该 impo 并将其作为 props 传递给 RowComponent 组件，还是在每个 RowComponent 上导入该 SubComponent，是否存在任何显着的性能差异？该数组中可能有数千个项目。

这里是非常simplified example的两种方式。

在 RowComponent 中导入它会简化一些其他事情（此处未显示），我更愿意使用它。

Answer 1

假设您使用 webpack 或类似的捆绑器（create-react-app 为您提供开箱即用的 webpack），您的代码将被捆绑到单个 .js 文件中，并且导入语句不再相关。

如果是这种情况，将子组件作为 prop 传递只会增加复杂性而没有任何好处。

Answer 2

这是道具钻孔的好例子。合理的解决方案是使用您自己的自定义挂钩。如下图;

const useMyArrayHook = () => {
 const myArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
 return myArray;
}

现在，与其将此数组传递到多个组件和子组件中，您可以在要使用它的目标组件中使用，在您的例子中是 RowComponentWithImport.js 和 RowComponentWithoutImport.js 组件。

反应传递数组子组件作为道具或将其导入每个数组项

React passing array subcomponent as a prop or importing it in each array item

import

reactjs

react-props