Babel，Webpack，ES6，React：导入模块然后将导入的模块作为prop传递给child

Question

如果我要在父组件中导入lodash util库（或任何库），然后将导入的变量作为prop传递给我知道将使用相同库的子组件，这是否会带来任何好处性能或构建时间等？

我不会想象我必须为子组件中的lodash util库创建一个import语句，因为它作为prop存在但是在性能方面还有其他好处吗？

这是编写反应组件的常见模式还是可以完成但不一定应该完成的事情？

Answer 1

如果您正在使用Webpack，性能不会提高，它会将所有内容放入同一个文件中（如果您正在创建多个块，则将多个文件放在一起），并优化依赖项包含，这样您就不必自己动手了。如果您所说的任何内容可能会有更差的性能，因为您将整个库添加为子组件的道具。

Answer 2

将依赖项作为prop传递基本上是依赖注入。 DI将具有所有优点和缺点。

可能的DI优势之一是可测试性。在React生态系统中，通常只针对ES模块使用Jest模块进行模拟处理。

另一个好处是可扩展性。这对DI容器最有效。 React中的DI容器在this article或this one that uses Angular DI中进行了解释。

对于像Lodash这样预计不会被交换的库，这可以被认为是反模式。 ES模块应该用于此目的。