ReactJS性能：通过道具传递大量数据是否可以？

Question

我正在实施多语种应用。 为了使选择的语言可以进行同构渲染，我需要通过props将数据直接传递给组件。 我有两个选择：

1 只通过区域设置（en或ru等...）通过道具和每个组件中的导入语言文件。结果如下：lang[this.props.locale].A_SPECIFIC_VARIABLE_NAME

2 仅在根组件中导入语言文件，也在那里定义语言环境并通过props将整个语言文件传递给每个组件。结果将是：
this.props.lang.A_SPECIFIC_VARIABLE_NAME

我更喜欢第二种选择，但我担心性能。语言文件不是很大（每种语言约50kb），但无论如何这都是很多。

Answer 1

通过道具传递所有数据是可以的。通过props传递数据的方式与将数据作为输入参数传递给某个函数的方式相同。这意味着如果您传递一个对象，数组或函数，它将作为参考传递。

您的对象lang看起来像一个常规对象，因此传递它将作为参考。这完全没问题。不用担心表现。

Answer 2

在javascript中，对象通过引用传递，原始值通过值传递（字符串，数字，布尔值，符号，空值，未定义）。这意味着对于每个函数调用，都会在内存中分配单独的位置以存储作为参数传递的原始值。

  

通常，这应该不是问题，除非这些功能停留在   并发存储更长的时间（可能会发生   通过关闭）。

在这种情况下，可能会导致额外的内存消耗。但是，除非您正在谈论大量的函数调用，否则通常不会显着增加内存消耗。

其他注意事项

但是，出于其他原因，您可能会考虑减少传递给函数或组件的参数（在本例中为prop）的数量。例如，有关函数采用的参数数量的一般规则在此处适用。通常需要5个以上的道具，这表明您应该执行以下操作之一以保持代码的简洁和可维护性：

将复杂性封装到子组件中

标识实现特定细节的组件部分。例如，您可以创建一个单独的组件，而不是传递多个原始值来使用某些用户信息，而是通过使用上下文或使用容器组件（当使用redux时），将包含所有原始值的对象传递给它。

  

通常建议仅对可以在您的应用程序中全局应用的静态数据使用上下文。

将对象作为道具而不是原始值传递

当将多个值作为道具传递给作为一个解剖结构一部分的组件时，可以将它们作为一个对象一起传递。例如在用户列表中： props userName和userEmail将减少为props user ，并使用具有所有用户属性的对象。

  

现在，这些属性不会本地复制到每个组件中。使用props.user.name将直接引用内存中的原始地址。

使用上下文而不是在组件树中传递道具

在将道具传递给子组件而不在组件本身中使用它们时，可以使用上下文使道具在子组件中可用。

  

但是，您应该记住，过多使用上下文会导致   您的代码更难阅读。

通常最好使用容器组件来获取数据，对其进行格式化并将其传递给实际的（表示性的）组件。