javascript - 使用 props drill vs context vs 导入来 react 常量导入

Question

我继承了一些代码，这些代码使用 props drilling 将大量常量(翻译)传递给各种子组件。这些翻译将一个符号映射到本地语言文本，还有一个函数可以进行映射，称为翻译。即如果本地语言是法语，{translate(SYM_NO)} 将返回“NON”。

我觉得 Props 钻孔有点乱，决定使用 React 16.3.1 中新的 Context。这对 JSX 工作正常，但是当我需要转换为 JS 时有点棘手，例如 MS Fabric UI DetailsList 回调，以便回调可以转换各种列数据(由 API 调用返回)。下面是一种将参数(来自 Context)添加到回调的技术，然后可以在回调实现中使用该参数:

onRenderItemColumn={(item, index, column) => this._renderItemColumn(item, index, column, translate)}

在让它工作之后，我发现它实际上是不必要的，因为我可以在我的任何(大部分)组件中导入翻译，并在我的 JSX 或 JS 中的任何地方轻松使用翻译:-

import translate from "../../../config/translate";

所以我现在想知道在几乎所有组件中导入翻译对性能/内存的影响。是对每一次进口都有惩罚，还是只有第一次进 Eloquent 算数，其余的没有影响？

我应该继续大量导入还是恢复到(更棘手的)上下文或其他方法。 ( Prop 钻孔我认为不是一个选项)

Peter(React 新手)

Answer 1

假设您使用基于标准 Webpack 的 React 堆栈，性能方面的开销应该是最小的，因为它们都引用同一个模块，只评估一次。维护明智，根据我的经验，它很快就会成为一种负担。特别是当你考虑到导入是相对于你导入的文件的时候。“这个文件是四层深还是六层深”。让移动文件变得痛苦。并为某些模块添加别名以便您可以使用绝对路径导入它们增加了新开发人员的复杂性。

我认为上下文不是最好的方法，因为您需要将消费者添加到所有需要翻译的部分。

我建议您调查的是高阶组件是否适合您。这样做的好处是不会让您的组件与消费者混淆呈现逻辑，并且可以作为额外功能添加到所有需要以非常透明的方式进行翻译的组件。在伪代码中:export default withTranslations(Component); 您仍然需要导入 withTranslation，您将在其中导入您的配置/翻译模块，但在实现方面它对我来说更有意义。

React 中还有一些用于 i18n 的 NPM 模块，我使用的所有模块也使用高阶组件方法，这让我相信它也可以为您工作。