导入 react 的正确方法

目前我们常见的有两种引入 react 的方法

import React from 'react';
// vs
import * as React from 'react';

这两种写法目前都可以运行，但是同一个目的出现两种写法就容易产生分歧，本文主要阐述这两种写法的不同并给出我建议的写法。

 

便捷性

从便捷性角度来讲，无疑第一种方式要少打好多字符。另外如果我们要引用 react 包内的其它导出项时，第一种方式的有点更明显：

import React, { useState } from 'react';

export default function MyComponent() {
  const [foo, setFoo] = useState();

  return <div>{foo}</div>;
}

对比后一种写法：

import * as React from 'react';

export default function MyComponent() {
  const [foo, setFoo] = React.useState();

  return <div>{foo}</div>;
}

这里只能通过 React 命名空间来引用内部导出项。

或者也可以单独再导出一遍内部项：

import * as React from 'react';
import { useState } from 'react';

无论怎么写，都很难达到第一种写法的便捷性。

 

语法和语义

ES 语法里并没有命名空间的语法，export 关键字是作用于当前文件的，因此只有文件是在 ES Module 语义下的命名空间。

export default 只是 export 的一个特例，用于导出一个特殊的名字，并不能用来导出一个命名空间.有人还是习惯于用一个对象来模拟一个命名空间：

export default {foo, bar};

这种写法并不符合 ES Module 的方式，构建工具是无法进行静态分析，也无法进行 Tree Shaking。

更多关于 export default 的解释可以参考 《export default 真的有害吗？》。

从语义的角度来讲，第一种写法就是错误的，React 仅仅是作为一个命名空间存在的，我们并不会像使用一个值一样来使用 React。从 React 16.13.0 开始，React 的导出方式也已经更正为 export {xxx, ...} 的形式了(commit)。

之所以第一种导入方式还可以使用，是因为目前 React 的构建产物是 Commonjs 规范的，webpack 等构建工具做了兼容。

 

自动导入

相对于语义的正确性，我觉得这一点便捷性是应该牺牲一下的，但是有没有在不牺牲语义的情况下获得便捷的方法？下面我们来聊聊自动导入。

正常情况，我们不需要使用 import * as 语法来导入一个包，但是 JSX 文件的编译需要 React 命名空间。既然 JSX 是语法层面的扩展，那么把这个命名空间的导入也放到语法层面去解决也是理所当然的。总结

如何导出决定如何导入。

 

按顺序简要列一下可选的导入方案：

1. 【最佳方案】自动导入
2. 【兼容性好】import * as React from 'react';
3. 【不再推荐】import React from 'react';