🥧

基礎から学ぶ React/React Hooksの備忘録

2023/01/02に公開

React

tech

概要

JavaScriptの基本

nullとundefinedの違い

null: データ型が決まっているが、値がない
undefined: データ型決まってない、値もない
nullをtypeofで評価するとobjectになるがこれは有名なバグ

typeof null // 'object'
typeof undefined // 'undefined'

引数の分割代入

const user = {
  name: 'hoge',
  message: 'hello'
}

const testFunc = ({message}) => console.log(message);
testFunc(user);  // userオブジェクトのmessageを自動で渡してくれる

falseになるもの(falsy)

0
undefined
null
NaN
""

もとの配列を変更することなくsortする

sortは破壊的メソッドなので、意図しない不具合が発生する可能性に注意
(reserveも同様)

const hoge = ['a', 'b', 'c'];
console.log([...hoge].sort()); // 一度配列をスプレット構文で展開することで別の配列を作ってからソートさせる
console.log(hoge.concat().sort()); // concatは元の配列をコピーする機能があるのでこれでも良い

export default

export defaultの場合は{}でくくる必要がない

export default function App() {
  console.log('App');
}

import App from './default.js' // import { App } from './default.js' ではない

Reactの基礎知識

Reactにおけるコンポーネント

Reactにおけるコンポーネントとは、UIを構成する部品であり、ページを構成するUI要素を再利用できる単位で切り出したJSXを返すJavaScriptの関数

仮想DOMによる高速レンダリング

Reactにおけるレンダリングは、リアルDOMに変更を加える必要があるかどうかを知るためのプロセス
propsとstateを元に変更前後の仮想DOMを構築して差分検出している

ReactはDOMを仮に構築する仕組みを持っている
仮想DOMを構築してからリアルDOMを構築する
仮想DOMは変更前と変更後のものを作って比較する
比較後、差分があったら情報が変化した部分だけをすばやく更新
以下参考記事から抜粋

ReactDOM.render

コンポーネントをDOMに変換して出力してくれるメソッド
HelloコンポーネンをDOMに変換して<div id='root'>にレンダリングする

const Hello = () => {
  return <h1>hello</h1>;
}
ReactDOM.render(<Hello/>, document.getElementById('root'));

JSXとHTMLの違い

JSXでは複数の要素を並列で配置できないので、必ず最上位に1つの要素を配置しなくてはいけない
React.Fragmentを利用することで並列にならべたい子要素をまとめることができる

// これはNG
const App = () => {
  return (
    <h1>hoge</h1>
    <p>fuga</p>
    <p>piyo</p>
  );
}

// これはOK
// React.Fragmentの省略形は<>
const App = () => {
  return (
    <>
      <h1>hoge</h1>
      <p>fuga</p>
      <p>piyo</p>
    </>
  );
}

style属性

style属性をべた書きすることはできるが、非推奨
className属性を使って構造とスタイルを分離するのが良い

const App = () => {
  return <h1 style={{fontSize: '100%'}}>hoge</h1>
}

defaultValue属性

checkボックスやテキストボックスで初期値を指定したい場合に使う
コンポーネントが最初にマウント（UIに出力）されたときに値を設定する
マウント後にdefaultValue属性の値を変更してもDOM内の値は更新されない

const App = () => {
  return <input type='text' defaultValue='hoge'/>
}

props

親コンポーネントから、nameをpropsとして必ず渡す必要がある

const App = () => {
  return <Hello name='hoge'/>
}

const Hello = (props) => {
  return <p>Hello, {props.name}</p>;
}

state

stateはコンポーネントが内部で保持する状態のこと
画面上に表示されるデータやアプリケーションが保持している状態のもの
stateが更新されるとstateを管理しているコンポーネントが再描画される仕組み

Reactの開発を補助するツール

Babel

JSX構文で書かれたコードをJavaScriptに変換するためのもの
（JSXはブラウザでは読み取れない）
また、新しいJavaScriptの構文を古いバージョンのJSで動作するために変換もしてくれる（具体的にはES5のコードの変換）
（別の構文のJavaScriptに変換するツールのことをトランスパイラとよぶ）
ReactはES2015以降で登場した分割代入やスプレッド構文、アロー関数などを取り入れているため

webpack

複数のJavaScriptファイルなどをまとめるツール（モジュールバンドラ）
BableがJSXをJavaScriptにしてくれるけど、まとめる機能がない
webpackは複数のJavaScriptを1つのJavaScriptにまとめてくれる（これによりパフォーマンス向上）

Hooks

useEffect

useEffectはuseEffectに渡された関数の実行タイミングをコンポーネントのマウント、アンマウント後、更新後まで遅らせることができるフック
マウントとアンマウント処理の繰り返し処理のことをライフサイクルという

マウント
- コンポーネントに対応するDOMノードを作成し、既存のDOMツリーに挿入して最終的なUIに出力するプロセス
アンマウント
- DOMノードが既存のDOMツリーから削除されること
更新
- 既存のDOMツリーに存在するDOMノードに変更を加えること
副作用
- Reactの管理外でUI構築以外の処理
  - APIとの非同期通信によるデータ取得
  - 購読の設定

useMemoとuseCallbackの違い

useCallback()は関数自体をメモ化。useMemo()は関数の結果をメモ化。

概要