なぜクラスコンポーネントより関数コンポーネントが推奨されるのか？
コンポーネントに関する記事を幾つか読んでいく中で、最近の記事になるほど関数コンポーネントがより推奨されていると感じました。これはなんで？と思って書いた記事です。
コンポーネントの表現方法
まず、コンポーネントとはUIから独立した再利用することのできる部品のことを指します。
Reactにおいてコンポーネントを表現する方法は２つあります。
- 関数コンポーネント
- クラスコンポーネント
関数コンポーネント
関数コンポーネントはJSの標準的な関数と同じように記述できます。
function Greeting(props) {
return <h1>Hi, {props.name}</h1>;
}
上記のコンポーネントではpropsを受け取りReactの要素を返しています。
クラスコンポーネント
クラスコンポーネントではES6のクラスを利用して記述します。
class Greeting extends React.Component {
render() {
return <h1>Hi, {this.props.name}</h1>;
}
}
クラスにReact.componentを加えることでReactの要素を返しています。
何が違う？
一番の違いは、コードの長さだと思います。
クラスコンポーネントの場合、React.componentでクラスを拡張する必要があることに加えて、returnの前にrenderまで記述する必要があります。
その一方で、関数コンポーネントはpropsを引数にしてやれば勝手にReactの要素を返してくれます。このことから、関数コンポーネントの方がより少ないコード量で実装できます。
以前はクラスコンポーネント推しだった？
それではなぜ関数コンポーネントは元々あまり推されていなかったのか？
理由はクラスコンポーネントでしか使用することのできない機能があったからみたいです。
その機能とは、
- State
- Lifecycle Hooks
の事です。
State(ステート)
State とは、コンポーネントのレンダリングを操作するオブジェクトの事です。
以前の関数コンポーネントはステートレスコンポーネント(Stateless Component)と呼ばれ、State に合わせて要素をレンダーすることができませんでした。
現在はHooks(React 16.8 で追加された新機能)により、関数コンポーネントでもステートを利用することができるように。
Lifecycle (ライフサイクル)
Lifecycle とは、Mounting(マウント)、Updating(更新)、Unmounting(アンマウント)の一連の流れの事です。
- Mounting(マウント):コンポーネントをレンダーする
- Updating(更新):コンポーネントのStateを更新する
- Unmounting(アンマウント):コンポーネントのレンダーが切れる
以前はクラスコンポーネントでしかこのライフサイクルの操作をすることができませんでした。
現在はState同様、関数コンポーネントでもライフサイクルを簡単に設定できます。
Summary
結論としては、Reactのバージョンアップで関数コンポーネントに Hooks という便利機能が追加されたことでクラスコンポーネントの出る幕が無くなったという事でした。
今後はスッキリとした気持ちで関数コンポーネントを使えそう。
Reference
Discussion