【React】import * as React と import React の違い是什么？

首先

这篇文章是由一个编程初学者根据自己在学习过程中所遇到的疑问进行调查并总结成备忘录。因此，文章的内容可能会存在错误。非常抱歉，如果发现了错误，请不要客气地指正，将不胜感激。

导入 * as React 和导入 React的区别是什么？

在使用React引入组件时，常见的有以下两种写法。

import * as React from 'react';

import React from 'react';

import React from ‘react’;

import * as React from ‘react’;是将React中所有导出的内容都导入并存储到名为React的变量中的声明。

可以如下重述：

// named export
export const test = "Hoge";

// default import
const Default = "Fuga";

export default Default;

import * as Sample from './Sample';

console.log(Sample); 
/*
  {
    test: "Hoge",
    default: "Default"
  }
*/

使用React从’react’库中引入。

将所有以”react”导出的东西都导入并存储在变量”React”中，这是用于React的写法。具体如下：

// named export
export const test = "Hoge";

// default import
const Default = "Fuga";

export default Default;

// default import
import Sample from './Sample';

console.log(Sample); 
/*
  {
    test: "Hoge",
    default: "Default"
  }
*/

总结

使用バンドラー时可能会导致构建文件变得过大，为了避免构建文件过大，请尽可能使用默认导入或命名导入。
需要注意的是，默认导入允许每个人自己决定名称，因此最好使用命名导出和命名导入。