【React】React ことはじめ (ただの学習ログ)

きっかけ

• 過去にAngular, Vue.jsを使用した開発は行ったことはあるが、Reactはなかったため。

学習の進め方

• ちょうど基礎から学ぶ React/React Hooksの発売日だったため、準拠しながら進めていきたい。
• 記事の記載に間違いがある場合、マサカリをお願いします…

学習内容

Reactとは?

• UIを構築するためのJavascriptライブラリ
  • Vue.js,Angularはフレームワーク(いづれも公式サイトにフレームワークの記載あり)
• Reactの特徴
  • コンポーネント指向
    • ソフトウェア開発をコンポーネントに分けて進める考え方。コンポーネント=画面構成要素(ボタン、入力フォーム...etc)
    • Vue.js, Angularでもコンポーネント指向を採用
  • 仮想DOMによる高速レンダリング
    • 変更前後の仮想DOMを比較し、変更差分のみリアルDOMに反映することでページ表示の高速化を実現
    • こちらもVue.js, Angularでも採用されている

Reactの使い方

• CDNを利用し、HTMLファイルでReactを使用
  • Webサイトが重くなるため、デモなどで使用し、本番環境には適さない
• CodeSandboxなどのオンラインエディタでReactを使用
• ローカルでNode.jsなどをインストールし環境構築後、Reactを使用(Create-React-Appなど)

補助ツール

ReactではWebpackでファイルをまとめる過程でBabelにて過去バージョンのJavaScriptに変換される

• Babel
  • JavaScriptを他の構文のJavaScriptに変換するトランスパイラ
  • 基本的にJSXなどの新しい構文を過去のバージョンに変換する
• Webpack
  • 複数のファイルを纏めるモジュールバンドラ
  • パフォーマンス向上に寄与

React Hooksとは

• もともと関数コンポーネントではStateなどのReactの機能を使用できなかったが各種フック関数で使用できるようになった
• フックはReactの機能に接続するための関数コンポーネントで使用できる関数

各種フック

• useState
  • 状態を管理するフック
  • const [状態変数, 状態を変更するための関数] = useState(状態の初期値)
• useEffect
  • 渡された関数の実行タイミングをコンポーネントのマウント後、アンマウント後、または更新後まで遅らせる(制御できる)フック
  • useEffect(関数名, [依存する変数の配列])
  • 配列が空配列だと初回レンダリングのみ実行
  • 変数の配列があるとその変数に変化があると実行
• useContext
  • ツリー内のいずれの階層からContextに格納されているデータにアクセスできる
  • contextオブジェクト、Providerコンポーネント、Comsumerコンポーネントが必要
• useCallback, useMemo
  • メモ化: 初回のみ実行、記録 ⇒同じ値の2回目は保持された計算結果を使用
  • パフォーマンス向上に寄与
  • useCallbackは関数自体のメモ化 ⇔ useMemoは実行結果をメモ化、保持