自分用のメモです。
本記事ではReactの概念について解説しています。
Reactとは
Reactとはフレームワークではなく、あくまでもUIの作成に特化したJavascriptのライブラリです。
ライブラリは部品で、フレームワークは既に決められたテンプレートと例えることができます。
プログラマはライブラリの機能を呼び出すタイミングと場所を指定できますが、フレームワークはフローの中で、プログラマが介入できる場所がいくつか用意され、フレームワークは必要に応じてそれらを呼び出します。
ライブラリとフレームワークの違いについてはこちらの記事をどうぞ
「ライブラリ」と「フレームワーク」は何が違うのか
Reactではコンポーネントと呼ばれる構成要素を用いて開発します。部分ごとにコンポーネントを分けることで、カスタマイズしやすく変えたい部分だけを変えることができます。
なぜReactを使うのか
- 仮想DOMが高速
Reactには、仮想DOM(Virtual Document Object Model)というレンダリング機構が備わっています。
(DOMとはdocument.getElementById(id);のようにjavascriptから自由に文字色などを操作することができる操作を指す。)
仮装DOMはページの差分検出の比較対象に使われ、従来のDOMと違い、必要な部分しか更新されないため非常に高速に動作します。
- SPA（Single Page Application）が作りやすい
SPAは、ページすべてを毎回読み込む必要がなく、単一のWebページでコンテンツの切り替えを行うことができる。効率的かつ高速で動かすことができる設計構造のことです。
ReactはSPAに必要な高速な動作速度を完全に再現できるので、非常に相性のいいライブラリといえます。
Reactの構成要素
Reactは主にComponent、state、propsの3つで構成されており、データが変更された時に、適切なコンポーネントだけを効率的に更新してレンダリングすることができます。
- Component
コンポーネント単位でUIの部品を作り、コンポーネントを組み合わせてアプリケーションを構築します。
コンポーネントのおかげで、UI を独立した再利用できる部品に分割し、部品それぞれを分離して開発することができます。
コンポーネントは関数と似ており（props）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。
ComponentにはClass ComponentとFunctional Componentの2種類あります。
1.関数(Functional Component)
return (
<div>
<h1>Hello World</h1>
</div>
);
}; ```
2.ClassComponent
```class App extends React.Component {
render() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
}
- state
Componentでは内部で状態(state)を持つことができます。stateはコンポーネント毎に持っており、コンポーネントの状態を管理します。
状態の変化によってstateの値を変えることができます。
- props
親コンポーネントから子コンポーネントへ値を渡し、コンポーネント間でデータの受け渡しができます。(propsは子供が持っており、子から親へは渡せない)
処理の流れ
・コンポーネントにはコンポーネントを利用する側である「親コンポーネント」とコンポーネントを利用される側である「子コンポーネント」に分けられます
・親コンポーネントが子コンポーネントを呼び出すとき、子コンポーネントに値が渡されますが、この時に渡されるのが「props」になります。
・親から渡された値を取り出して画面に描画します。
stateの使い方
・stateを使うことで画面を動的に変更させることができます。
stateを使う際には、初期値を設定して変化させる処理を書いて使います。
stateの値が更新されることで画面を動的に変えることができます。
まとめ
・各コンポーネントはstateを持っており、自身のstateしか更新できない
・stateが更新されると再描画される
・親から子にのみpropsを渡せる
propsとstateの説明はこちらの記事が分かりやすいです
実際にこうしてアウトプットしてみるとReactの概念しか理解できていないと痛感させられますね。。
アウトプット大事です。