导入 react 的正确方法

谁践踏了优雅 2022-11-04 11:18 302阅读 0赞

目前我们常见的有两种引入 `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 真的有害吗？》][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';`

[Tree Shaking]: https://link.zhihu.com/?target=https%3A//rollupjs.org/repl/%3Fversion%3D2.26.11%26shareable%3DJTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMiUyRiolMjBUUkVFLVNIQUtJTkclMjAqJTJGJTVDbmltcG9ydCUyMColMjBhcyUyMG0xJTIwZnJvbSUyMCcuJTJGbWF0aHMuanMnJTNCJTVDbmltcG9ydCUyMG0yJTIwZnJvbSUyMCcuJTJGbWF0aHMtZGVmYXVsdC5qcyclM0IlNUNuJTVDbmNvbnNvbGUubG9nKCUyMG0xLmN1YmUoJTIwNSUyMCklMkMlMjBtMi5jdWJlMiglMjA1JTIwKSUyMCklM0IlMjAlMkYlMkYlMjAxMjUlMjIlMkMlMjJpc0VudHJ5JTIyJTNBdHJ1ZSU3RCUyQyU3QiUyMm5hbWUlMjIlM0ElMjJtYXRocy5qcyUyMiUyQyUyMmNvZGUlMjIlM0ElMjIlMkYlMkYlMjBtYXRocy5qcyU1Q24lNUNuJTJGJTJGJTIwVGhpcyUyMGZ1bmN0aW9uJTIwaXNuJ3QlMjB1c2VkJTIwYW55d2hlcmUlMkMlMjBzbyU1Q24lMkYlMkYlMjBSb2xsdXAlMjBleGNsdWRlcyUyMGl0JTIwZnJvbSUyMHRoZSUyMGJ1bmRsZS4uLiU1Q25leHBvcnQlMjBmdW5jdGlvbiUyMHNxdWFyZSUyMCglMjB4JTIwKSUyMCU3QiU1Q24lNUN0cmV0dXJuJTIweCUyMColMjB4JTNCJTVDbiU3RCU1Q24lNUNuJTJGJTJGJTIwVGhpcyUyMGZ1bmN0aW9uJTIwZ2V0cyUyMGluY2x1ZGVkJTVDbmV4cG9ydCUyMGZ1bmN0aW9uJTIwY3ViZSUyMCglMjB4JTIwKSUyMCU3QiU1Q24lNUN0JTJGJTJGJTIwcmV3cml0ZSUyMHRoaXMlMjBhcyUyMCU2MHNxdWFyZSglMjB4JTIwKSUyMColMjB4JTYwJTVDbiU1Q3QlMkYlMkYlMjBhbmQlMjBzZWUlMjB3aGF0JTIwaGFwcGVucyElNUNuJTVDdHJldHVybiUyMHglMjAqJTIweCUyMColMjB4JTNCJTVDbiU3RCUyMiUyQyUyMmlzRW50cnklMjIlM0FmYWxzZSU3RCUyQyU3QiUyMm5hbWUlMjIlM0ElMjJtYXRocy1kZWZhdWx0LmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMiUyRiUyRiUyMG1hdGhzLWRlZmF1bHQuanMlNUNuJTVDbiUyRiUyRiUyMFRoaXMlMjBmdW5jdGlvbiUyMGlzbid0JTIwdXNlZCUyMGFueXdoZXJlJTJDJTIwc28lNUNuJTJGJTJGJTIwUm9sbHVwJTIwZXhjbHVkZXMlMjBpdCUyMGZyb20lMjB0aGUlMjBidW5kbGUuLi4lNUNuZXhwb3J0JTIwZnVuY3Rpb24lMjBzcXVhcmUyJTIwKCUyMHglMjApJTIwJTdCJTVDbiU1Q3RyZXR1cm4lMjB4JTIwKiUyMHglM0IlNUNuJTdEJTVDbiU1Q24lMkYlMkYlMjBUaGlzJTIwZnVuY3Rpb24lMjBnZXRzJTIwaW5jbHVkZWQlNUNuZXhwb3J0JTIwZnVuY3Rpb24lMjBjdWJlMiUyMCglMjB4JTIwKSUyMCU3QiU1Q24lNUN0JTJGJTJGJTIwcmV3cml0ZSUyMHRoaXMlMjBhcyUyMCU2MHNxdWFyZSglMjB4JTIwKSUyMColMjB4JTYwJTVDbiU1Q3QlMkYlMkYlMjBhbmQlMjBzZWUlMjB3aGF0JTIwaGFwcGVucyElNUNuJTVDdHJldHVybiUyMHglMjAqJTIweCUyMColMjB4JTNCJTVDbiU3RCU1Q24lNUNuZXhwb3J0JTIwZGVmYXVsdCUyMCU3QnNxdWFyZTIlMkMlMjBjdWJlMiU3RCUzQiUyMiU3RCU1RCUyQyUyMm9wdGlvbnMlMjIlM0ElN0IlMjJmb3JtYXQlMjIlM0ElMjJlcyUyMiUyQyUyMm5hbWUlMjIlM0ElMjJteUJ1bmRsZSUyMiUyQyUyMmFtZCUyMiUzQSU3QiUyMmlkJTIyJTNBJTIyJTIyJTdEJTJDJTIyZ2xvYmFscyUyMiUzQSU3QiU3RCU3RCUyQyUyMmV4YW1wbGUlMjIlM0FudWxsJTdE
[export default]: https://zhuanlan.zhihu.com/p/176963424
[commit]: https://link.zhihu.com/?target=https%3A//github.com/facebook/react/commit/60016c448bb7d19fc989acd05dda5aca2e124381%23diff-a9c08afc9ba1304a73e4235b3016b97c