React の概念
コンポーネントが管理するデータは 2 種類
props : 親コンポーネントから子のコンポーネントに渡される属性値
code:props の渡し方
// 子コンポーネント
const PropsSample = (props) => {
return <p>Hello, {props.name}!</p>;
};
// 使う側
const App = () => {
return <PropsSample name="React" />;
};
state : コンポーネントが内部で保持する状態
state が更新されると、コンポーネントが再描画される
関数コンポーネントでは、useState フックを利用する
code:state
const StateSample = (props) => {
// 状態の値と、状態を変化させる関数を useState フックで取得する
return <p>{count}</p>;
};
レンダリング
現在の props と state をもとに、仮想 DOM を構築して差分を検出し、実際の DOM に変更を加える必要があるかを知るプロセス 行われるタイミング : 初回、コンポーネントの状態が変化したとき、親コンポーネントのレンダリング時、カスタムフックからコンポーネントが受け取っている値が変化したとき
再描画 : レンダリングの結果、変更差分が見つかった場合にリアル DOM をブラウザに反映 React の Context 機能 : 親から props を渡されていなくても、Context に収容されているデータにアクセスできる
関連