引入 React 的正确方式import * as React from 'react'，怎么引入React更加规范，不

背景

常见的两种引入方式：

1. import React from 'react';

2. import * as React from 'react';

这两种写法目前都可以运行，但是出于同一个目的却出现两种写法就容易产生分歧，对于新手来说更是摸不着头脑。我刚开始工作的时候对于第二种写法就是一脸懵逼，不明所以。

从便捷的角度来讲，第一种引入方式无疑是最好的选择，因为更简洁。在引入react包内其它导出项时，体现得更加明显：

import React, { useState } from 'react';

export default function MyComponent() {
    const [foo, setFoo] = useState();
    
    return <>{foo}</>
}

对比第二种写法：

import * as React from 'react';

export default function MyComponent() { 
    const [foo, setFoo] = React.useState();
    
    return <>{foo}</>
}

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

或者单独再导出一遍：

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

无论怎么写，都没有第一种引入方式便捷。

ES 语法里并没有命名空间的语法。第一种引入方式对应的导出方式为：export default，export关键字是作用于当前文件的，export default只是export的一个特例，用于导出一个特殊的名字，并不能用来导出一个命名空间。

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

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

如何导出决定如何导入

【不再推荐】import React from 'react';
【兼容性好】import * as React from 'react';

导入样式同理：

import styles from './index.less';
import * as styles from './index.less';

如果文中有错误或者不足之处，欢迎大家在评论区指正。

你的点赞是对我莫大的鼓励！感谢阅读～