基礎から学ぶ React/React Hooksの備忘録
概要
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との非同期通信によるデータ取得
- 購読の設定
- Reactの管理外でUI構築以外の処理
useMemoとuseCallbackの違い
useCallback()は関数自体をメモ化。useMemo()は関数の結果をメモ化。
Discussion