概要
Reactは、Meta（旧Facebook）が開発したUI構築のためのJavaScriptライブラリです。
特徴
UIを「状態（state）」から宣言的に描画する仕組みです。
DOMを直接いじるのではなく、「状態がこうなら、画面はこうなる」と書くだけで、Reactが自動でDOM差分を更新してくれます。
Reactの重要概念
コンポーネント指向
UIを部品に分ける考え方です。
投稿フォームがあるとしてコンポーネントは以下のように分けられます。
- ページ枠
- 投稿フォーム
- 投稿ボタン
この場合、1つのソースで管理するのではなくそれぞれの部品(コンポーネント)を組み合わせて画面を作ります。
宣言的UI
「どう描画するか」ではなく「どういう状態か」を書きます。
DOM操作は一切書いてはいけません。
仮想DOM
Reactはメモリ上に仮想DOMを持ち、差分だけを実DOMに反映します。
これにより高速な描画が可能となります。
状態管理(state)
UIはstateから作られます。
const [count, setCount] = useState(0)
この場合、stateが変わると自動で再描画してくれます。
Hooks
関数コンポーネントでstateや副作用を扱う仕組みです。
よく使うHooksは以下です。
| Hook | 用途 |
|---|---|
| useState | 状態管理 |
| useEffect | 副作用 |
| useMemo | 計算結果のメモ化 |
| useCallback | 関数のメモ化 |
| useRef | DOM参照・値保持 |
| useContext | グローバルな値共有 |
一方向データフロー
データは親 → 子 にしか流れないため、これにより状態管理が予測可能になります。