Program React web

【React】クラスコンポーネントと関数コンポーネントの違い（一部）

2022年2月16日

こんにちは。

今回の記事では、React×JavaScript(TypeScript)を一年近く勉強・実務で使用しているエンジニア一年目である僕の勉強忘備録的な記事になります。

今後Reactを勉強される方の知恵に少しでもなればうれしいです。

また、著者であるわたくしも勉強中なため、間違っている部分や詳しく解説できていない部分もあるとは思いますので、鵜呑みにせずググッてくださいね。

そして、コメントなどで技術についてご教示いただければ幸いです。

クラスコンポーネントより、関数コンポーネント

2022年現在、公式のドキュメントなどを読む限り、クラスコンポーネントが使われていることが多いので、勉強を始めたばかりの方はクラスコンポーネントを使われているのではないかと思います。

クラスコンポーネントは学習しやすく、イメージがわきやすいのですが、大きなアプリケーションになればなるほど、関数コンポーネントを使うほうが良いとされています。

クラスコンポーネントを関数コンポーネントに書き換える方法

まずは、クラスコンポーネントの場合。

export default class App extends React.Component{
　　render() {
    　　return (
      　　<div>
        　　<h1>Hello World</h1>
      　　</div>
    　　);
  　}
}

こちらを、関数コンポーネントで書き換えるとこうなります。

export const App = () => {     
　　return (       
　　　　<div>         
　　　　　　<h1>Hello World</h1>
　　　　</div>     
　　);    
}

そして、関数コンポーネントではこのようにアロー関数の形で書くのが良いとされています。

コンポーネントが大きくなっても同じように書き換えることができる(はずです)。

また、export についても、少し書き方が変わっていますが、これはexport default const というのが技術的にできないためです。

ですが、コンポーネントの下部で、別の行を使ってexport defaultをすることはできます。

しかし、exportについては、「export default」はあまり使わないほうがいいというのもあります。

export と export defaultの違いについては、次の項目で説明します。

export と export defaultの違い

export const App と書いた場合、importする側の記述は、以下のようになります。

import { App } from "./○○○○";

export default App と記述した場合は、importする側の記述は、以下のようになります。

import App from "./○○○○";

正直、あまり変わらないですよね。

しかし、先ほども書いた通り、export defaultを多用するのはあまり良くないようです。

(編集中)

-Program, React, web