どちらを使ったらいいのかわからない。
このような疑問に答えます。
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ステップをご覧ください。