Reactのことをざっくりメモ

きっかけ

Reactを書いていて、〇〇とは何か。
など根本的なことを理解していないのではと不安になったのでメモ程度に書いてみました。
ここ違います！などあればコメントお願い致します。

Reactの特徴

まず、javascriptのライブラリである。

• 仮想DOMを利用していること

  • 仮想DOMとは、情報が書き変わってもすぐにブラウザ憑依するのでなく、一旦仮想のDOMにその変化を加えて、差分があった部分のみ変更するこの仕組みのことです。また、仮想DOMから実際のDOMに反映することで処理スピードが速く、比較的高速に切り替えが可能となっています。（ここではあくまでReactにおける仮想DOMについてです。）

• JSXを使用できる

  • JSXとは、javascript XML。スクリプトとDOMを一緒に記述できるもの。（Vueでも使われています。） 　

• コンポーネントベースのUI

  • 他のライブラリでも採用されているものではあります。 コンポーネントはザックリといえば、構成要素のことで、UIを部品に見立てその部品ごとに作成することで管理と再利用性を高めることができます。大規模なシステムであれば恩恵が大きいと感じるかと思います。

　Class component と　Functional　component

この２つの使い分けですが、基本何か理由がなければFunctional　componentを利用することをお勧めします。前まではstateを使用するにはclassのみしか選択肢がなかったですが今はどちらでも使えるので問題ありません。理由はいくつかあります。

• まずReactのお偉いさん方がこちらを使用するように推奨しています。ですが、Class componentがなくなることはないと言っていますので、無理に変更する必要はありません。

• 　Functionalの方が記述量が減りやすい

  • classではconstructorやrender、ライフサイクルメソッド（componentDidMount）を書く必要がなくなります。３つ目のことが大きくこれは可読性にも関わってくると思ってます。classではライフサイクルメソッドがそれぞれあるので、中身の処理が同一でもまとめて書くことができません。ですが、FunctionalではuseEffectの中でまとめることができる優位性があるかと思います。

// class
componentDidMount() {
// マウント時処理
}
componentDidUpdated() {
// 更新時処理
}
componentWillUnmount() {
// アンマウント時処理
}

// functional
useEffect(() => {
  // マウント時処理
  // 更新時処理
  return () => {
    //　アンマウント処理
  };
})

• カスタムフックを利用してstateとロジックを一緒に切り出すことができる

  • 再利用も可能となり、管理が容易になり便利なツールだと思っています。ここではザックリ概要なので、詳しくは別途お調べください。

• Functionalの方が動作が早いと言われている。

useCallback　useMemo　React.memo

こちらの３つの機能を利用するとレンダリングの最適化が容易にできるかと思います。

useCallbackとuseMemoは似ていて、useCallbackは関数に対して利用できるものでuseMemoはそれ以外です。この２つを利用することで無用な関数の実行や変数の計算をスキップできます。これは処理が重い関数や変数に有効です。結果が同じであれば以前の値を使用してくれるので、動作の改善がみられるとはお思います。大規模なものでないと時間が湧かないかもしれませんが。また、React.memoと一緒に利用することで無用再レンダリングの抑止もできます。

処理の重くないものに関しては無理にuseCallbackuseMemoを利用することはしないで良いかと思います。
それぞれ単独で使いことはなく、組み合わせて使うことが多いかと思います。

最後に

閲覧いただきありがとうございました。
これからはもっと細かい部分や、なぜそれを使うのかなど疑問を潰していてければなと思いました。
以上です。