理解 import React from 'react' 与 import * as React from 'react' 的区别

2023-12-15 16:48:08

理解 React 导入语法的细微差别：React vs ReactFull

React 导入的两种途径

在 React 框架中，导入模块有两种常见方法：import React from 'react' 和 import * as React from 'react'。乍看之下，这两个语法似乎相同，但它们在 JavaScript 代码的编译和处理方式上存在着微妙差异。了解这些差异对于编写高效且可维护的代码至关重要。

单一导出 vs 全部导出

import React from 'react'：

此语法从 react 模块导入一个特定的导出，即 React，并将其分配给一个本地变量。也就是说，它只获取模块公开的特定名称，如 React。

编译时，此语句会生成类似于以下的 ES5 代码：

var React = require('react');

它将 react 模块作为 CommonJS 模块加载，并创建一个名为 React 的本地变量来引用该模块。

import * as React from 'react'：

另一方面，此语法从 react 模块导入 所有导出 ，并将其分配给一个本地对象（React）。这意味着它会获取模块公开的所有命名导出，以及任何默认导出（如果存在）。

编译时，此语句将生成类似于以下的 ES5 代码：

var React = require('react');

它也会将 react 模块作为 CommonJS 模块加载，但这次它将整个模块分配给 React 对象，而不是单个导出。

何时使用哪种语法

选择哪种语法取决于你的具体用例。以下是一些指导原则：

使用 import React from 'react'： 如果你只使用 react 模块的特定导出，那么使用 import React from 'react' 是一种更明确、更具选择性的方法。它让你只导入需要的部分，从而减少代码大小和提高性能。
使用 import * as React from 'react'： 如果你需要使用 react 模块的多个导出，那么使用 import * as React from 'react' 可以让你避免在代码中多次导入，从而简化代码。

性能影响

在大多数情况下，使用哪种语法对性能的影响可以忽略不计。然而，在某些情况下，import * as React from 'react' 可能会比 import React from 'react' 稍微慢一些。这是因为 import * as React from 'react' 会导入模块的所有导出，即使你最终只使用其中一些。这会增加代码大小，并可能导致编译和运行时速度略有下降。

代码示例

为了说明这两个语法之间的实际差异，我们创建一个简单的测试代码：

// index.tsx
import React from 'react';
import * as ReactFull from 'react';

console.log(React === ReactFull); // false

在这段代码中，我们使用 import React from 'react' 导入 React 模块的特定导出，并使用 import * as ReactFull from 'react' 导入所有导出。然后，我们比较 React 和 ReactFull 是否相等，并打印结果到控制台。

编译并运行此代码后，你会看到控制台打印 false。这表明 React 和 ReactFull 不是同一个对象。这是因为 import React from 'react' 仅导入了特定的导出，而 import * as ReactFull from 'react' 导入了所有导出，包括一些内部导出。