在props中传递数据是否会复制该数据？

Question

我正在React中构建一个仪表板，目前我正在构建一个小按钮组件，允许用户将图表中的数据作为CSV文件下载。像这样的东西：

// Dashboardrender(){
  const data=makeLargeDataset(); // make an array with 1m rows
  return (
    <DownloadCSV data={data} />
  );}// Download ButtononClick(){
  if (this.props.data){
    convertAndDownload(this.props.data);
  }}

传递给按钮的道具时，这会复制1M行吗？如果我必须通过几层传递道具，它会不断重复？有没有更聪明的方法来传递道具 - 或者通常使用大型变量和数组 - 所以它不是浪费或低效？

Answer 1

不，它没有。从高阶组件传递到子组件的任何道具总是引用相同的道具。它被称为单一真理来源。您可以更改HO组件和React中的一个数据点，因为名称告知只对更改做出反应，而不是其他任何内容。保存这些大数据集的一种简单方法是使用类似于Redux保持数据安全的存储，但更聪明的方法是根据您的需要创建API或微服务并调用它而不是在上面加载一百万行。浏览器。

Answer 2

您没有传递数据副本，您正在传递引用。您可以考虑以某种方式对数据进行分页，以便处理较小的数组。