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
    -

    執筆者:

    関連記事

    ESLintとPrettierの導入【React Native & TypeScript】

    React NativeとTypeScriptで開発する場合の便利なツールを知りたい。 ESLintやPrettierをプロジェクトやVSCodeに導入する方法が知りたい。 このような疑問に答えます。…

    もっと見る

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

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

    もっと見る

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

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

    もっと見る

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

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

    もっと見る

    React Nativeでclassをfunctionに変換する10ステップ

    React Native のclassをfunctionに変換したい。 このような疑問に答えます。 React Nativeでモバイルアプリ開発をするとき、functionで作りたくても、多くの資料は…

    もっと見る


    comment

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    プロフィール

    プロフィール

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

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

    広告

    <スポンサーリンク>