はじめに

Reactを勉強しているとき、分からなかったことがいくつかありました。この文書では、その中でも「function App()とclass App extends Componentの違い」について調べたことをまとめました。初学者の文書ですので内容に誤りがあるかもしれません。ですから、ご参考程度にお読みください。

もし、あなたが私と同じように雑多な情報しか得られなくて困っているなら、Reactの公式ドキュメントを読むことを強くお勧めします。正しい情報がすごく分かりやすくまとめられています。不幸なことに、私が受講したオンラインコースではそのような案内がありませんでした。正直、この公式ドキュメントの存在を知っていれば受講しなかったと思います。

Reactの公式ドキュメント
https://ja.reactjs.org/docs/hello-world.html

結論

どちらも意味は同じです。

function App()と書くと、ReactではAppが関数コンポーネント(functional component)として扱われます。Javascriptでは関数も1つのオブジェクトですが、関数コンポーネントは、React要素を返すオブジェクトです。引数としてpropsを受け取ります。propsはプロパティ(properties)の省略形で、JSXに書かれている属性情報などを親のコンポートネントから子のコンポーネントに渡すために使われます。propsはimmutable(イミュータブル, 不変)なオブジェクトですので、その中身を後から変更することはできません。

class App extends Componentと書くと、ReactではAppがクラスコンポーネント(class component)として扱われます。Javascriptではクラスも1つのオブジェクトですが、クラスコンポーネントもReact要素を返すオブジェクトです。propsはthis.propsで参照することができます。

機能的な違いもなくなったようです。

時間経過やユーザ操作などによって内部状態(state)が変化したとき、その状態変化によって出力を変更したければ、クラスコンポーネントを使うように案内されていたことがありました。しかし、2019年2月16日にReact16.8が公開されてからは、関数コンポーネントを使ってもReact Hooksという仕組みを用いて状態変化による出力変更を実装できるようになりました。よって、今では機能的な違いがなくなったように見えます。

どちらを使っても大丈夫ですが、関数コンポーネントの方がシンプルです。

公式サイトに、今後もクラスコンポーネントをなくす予定はないと書いてありますので、クラスコンポーネントを使い続けても問題はないでしょう。

React からクラス型コンポーネントを削除する予定はありません。

フックの導入 (「互換性のない変更はありません」の節)
https://ja.reactjs.org/docs/hooks-intro.html

しかし、新規プロジェクトでわざわざクラスコンポーネントを使う必要はありません。関数コンポーネントの方がシンプルに書けるからです。コンストラクタを書いたりstateに毎回thisを付けてthis.stateにしたりとクラスコンポーネントは面倒なことが多いのですが、関数コンポーネントを使えばよりシンプルに書けます。クラスコンポーネントは古いプロジェクトで使わざるを得ないときに、必要に応じて勉強するのが良いようです。

もっと深く理解したい人へ

関数コンポーネント、クラスコンポーネント、props
https://ja.reactjs.org/docs/components-and-props.html

時計を毎秒更新する方法（クラスコンポーネントとstateを使う方法）
https://ja.reactjs.org/docs/state-and-lifecycle.html

ボタンでカウンターの値を増やす方法（関数コンポーネントとHookを使う方法）
https://ja.reactjs.org/docs/hooks-overview.html