这篇文章的目的是什么？

• Reactの理解とアウトプット、振り返り用

 

• Reactでよく使われている基本的な技術を言語化できるようする

 

exportについて

有两种export，分别是”default”和”named”。

default export：export default

named export：export const

根据export的写法，import时的指定方式会发生变化，由于对此不太理解，所以我稍微做了一些调查。

关于差异

import時に、{}がつくかつかないか

默認導出的記錄方法

import React from "react";

const Component1 = () => {
  return 
     <div>
       default export用コンポーネント１です
     </div>
};

export default Component1;

//import コンポーネント名(自由) from 'ファイルパス'
import Component2 from "./components/Component2";

名為 “記載方法” 的出口

import React from "react";

export const Component2 = () => {
  return 
     <div>
        named export用コンポーネント２です
     </div>
};

//import { 関数名(固定) } from 'ファイルパス'
import { Component2 } from "./components/Component2";

总结

• import時には、{}がつくかつかないかの違いがある

 

• export default したものを import するときには {} を使わない

 

1ファイル1コンポーネントであれば、 export default を使う方がいいけど基本namedほうが良さそう