🐣
【日報】React実践の教科書 P187〜192
作成日:
2021/12/27
2
今日やったこと
- 「モダンJavaScriptの基本から始める React実践の教科書」 P187〜192
- ContextでのState管理
- ContextのState更新と参照
- 再レンダリングに注意
- ContextでのState管理
学習メモ
isAdminフラグをStateとしてContextに格納し、参照・更新ができるように修正
Contextを使うとどういった時に再レンダリングが起きるか
-
1つのContextオブジェクトの値が何か更新された時は、useContextでそのContextを参照しているコンポーネントはすべて再レンダリングされる
-
以下の記述を例にすると、「あるコンポーネントではsetIsAdmin関数のみ使っている」場合でもisAdminが更新されたタイミングでこのコンポーネントも再レンダリングされてしまう。 そのため、1つのContextに属性の異なるいろんなStateを詰め込むのは避ける
// 管理者フラグ
const [isAdmin, setIsAdmin] = useState(false);
- Providerはネストすることができるので、以下のように複数のProviderでコンポーネントを囲むのも手
return (
<AdminFlagProvider>
<OtherProvider>
<App />
</OtherProvider>
</AdminFlagProvider>
);
所感
クリスマスだからということで
お酒を飲んだり温泉に浸かったりダラダラしていました。
勉強再開するまでの腰が重かったです🦥
前回使い方を学んだContextをおさらいしました。
次回はRedux, Recoil, Apollo Client というライブラリについて調べます。