React Native

【React Native】classとfunction、どちらを使うのか

投稿日:2020年9月26日 更新日:

classとfunctionの違いを知りたい。
どちらを使ったらいいのかわからない。

このような疑問に答えます。

React Nativeには、classとfunctionがあり、どちらを中心に使えばいいか迷うかと思います。

結論から言うと、React Native v0.59以降を使ってるなら、基本的にfunctionを使用することをオススメします。

では、その理由を解説していきます。

この記事の内容

<スポンサーリンク>

classとfunctionの違い(v0.59以前)

class(クラスコンポーネント)は状態(state)を持つことができます。
状態を変化させることで、柔軟な描画を可能とさせます。

その一方で、v0.59以前のfunction(関数コンポーネント)は、状態(state)を持ちません。
渡された値に従って特定の固定要素を描画します。

v0.59以前までは、classの方が制御が効き柔軟性があるので、classの使用が推奨されていました。

そして、固定の要素に限り、functionが使われていました。

 

しかし、classにも、いくつかの問題がありました。

  • コードが長くなりやすい
  • 処理コードが散らばりやすく、追うのが大変
  •  

    そこで、React Native v0.59から導入されたのがHooks機能です。

    Hooksの導入によって起きた変化(v0.59以降)

    HooksはReact v16.8、React Native v0.59から導入された、stateなどのReactの機能をクラスコンポーネント以外で使えるようにする機能です。

    これより、classを使わずにfunctionのみでReact Nativeを利用できるようになりました。

     

    classとfunctionどちらを使うのか

    基本、functionを使うのがオススメです。

    Hooksの導入により、functionでも状態を持つことができるようになりました。

    また、functionを使用することで、classが抱えていたコードが長くなる問題や、可読性の問題が改善されます。

    もちろん、パッケージのclassを継承したい場合など、classを用いなければならない場合もあります。

    しかし、これらは稀なケースになります。

    基本的にfunctionを用いて、クラスを使わずにコードを書けます。

    なので、classよりもfunctionを使用するのがオススメです。

    <スポンサーリンク>

    まとめ

    Hooksの導入により、classでできたことの大部分がfunctionでできるようになりました。

    ですので、基本的にfunctionを使うのがいいと思います。

     

    ネット上には、まだclassで記述されてる資料が多く存在します。

    classをfunctionにしたい場合はReact Nativeでclassをfunctionに変換する10ステップをご覧ください。

    広告

    <スポンサーリンク>

    広告

    <スポンサーリンク>

    -React Native
    -

    執筆者:

    関連記事

    React NativeとTypeScriptの開発におすすめな本

    React NativeとTypeScriptのおすすめな本を知りたい。 このような疑問に答えます。 React NativeとTypeScriptの日本語の情報はまだ少なく、中々見つかりません。 そ…

    もっと見る

    React Nativeのおすすめの勉強法と進め方【環境構築から学習まで】

    React Nativeの学習方法が知りたい。 このような疑問に答えます。 私がReact Nativeを習得した経験を踏まえた上で、React Nativeのおすすめの学習方法をまとめました。 ※こ…

    もっと見る

    React Nativeの環境構築の手順【MacOS版/M1対応】

    MacOSでReact Nativeの開発環境を構築する方法を知りたい。 iOS、Android、それぞれの開発に必要なツールが知りたい。 このような疑問に答えます。 この記事では、MacOSでRea…

    もっと見る

    React Nativeの環境構築の手順【Windows版】

    WindowsでReact Nativeの開発環境を構築する方法を知りたい。 このような疑問に答えます。 React Nativeの環境構築の方法にはRect Native Cliを使用する方法とEx…

    もっと見る

    React NativeプロジェクトにTypeScriptを導入する手順

    React NativeプロジェクトをTypeScriptで作成したい。 プロジェクトをTypeScriptに変更したい。 このような疑問に答えます。 TypeScriptはJavaScriptから派…

    もっと見る


    comment

    メールアドレスが公開されることはありません。

    プロフィール

    プロフィール

    海外経験14年の帰国子女。
    未経験からエンジニアに転職。
    開発を中心にPLとして活動中。

    詳しいプロフィールはこちらから。

    広告

    <スポンサーリンク>