Reactをimportする際の記述方法について

Question

Reactをimportする際の記述方法として，以下の二種類のやり方を見つけました．

• import React from 'react'
• import * as React from 'react'

これらの記述の違いは，実際に何がimportされるのかにも違いを与えるのでしょうか？
また，どのような場面においてはどちらを使った方が良い，などがあれば教えていただきたいです．

Comments

[maisumakun]

使う環境はどのようなものでしょうか？

[hoshi-takanori]

import 文の細かい仕様については以下のページが参考になるかと。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

React に関して言えば、
import React from 'react';
または
import React, { useState } from 'react';
のような書き方が一般的かと思います。

Answer 1

今後ReactではES moduleにおいてdefault export/importを使うことは非推奨となるようです．
(参考: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports
https://github.com/facebook/react/pull/18102 )

よって，その慣習に従う場合は
import React from 'react'
ではなく
import * as React from 'react'
と書くことになるということです．

Comments

[hoshi-takanori]

まちがって低評価ボタンを押してしまいました。余計な通知が飛んでいたらごめんなさい。

その記事 (日本語版もありました) ですが、import * as React from 'react' を推奨するというより、今後は import React from 'react' そのものが不要になるってことのようですね。また、今まで import React from 'react' として React.useState などと書くこともありましたが、今後は import { useState } from 'react' のように書くことが推奨されるようです。
https://ja.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
https://zenn.dev/ria/articles/82d3b2285684aef97f0b

[panamax]

補足して説明していただきありがとうございます :)