![[React] useStateとuseEffectってすごく便利じゃん](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1000,h_500/https://otonan-syusyoku.work/wp-content/uploads/2023/08/React.png)
今までjQueryで戦ってきたのですが、とうとう見切りをつけて次のステップに進もうとしているコテツです…
Reactの考え方
React では、DOM 要素を直接操作する代わりに、React の状態管理やレンダリング方法を使用して操作を行うことが推奨されているとのこと。
useState
useState フックは、状態(state)を React コンポーネント内で管理するために使用します。状態は、コンポーネント内でのデータの変更を追跡し、自動的に再レンダリングするために使われます。
差分取って差分の分だけレンダリングするっぽいですね。楽だし早いね。
Reactの基本理念?である状態管理で差分を取るってのがuseStateの肝な気がする。
useEffect
コンポーネントのレンダリング後に実行される処理(データ)を管理するために使用します。
useEffect フックは第1引数に副作用の関数を受け取り、第2引数には、依存する値の配列を指定します。この配列に指定した値が変更された場合に副作用関数が再実行されます。
空の配列を指定することで、初回レンダリング時にのみ副作用関数が実行されることを意味します。
const [csrfToken, setCsrfToken] = useState(null);
useEffect(() => {
// メタタグからトークンを取得
const metaTag = document.querySelector('meta[name="csrf-token"]');
if (metaTag) {
setCsrfToken(metaTag.content);
}
}, []);
なんとなくonloadっぽい。。。
注意点
第二引数に何も指定しない
無限ループ発生します。ローカル端末が燃えます。気をつけましょ。
不知道说啥,开心快乐每一天吧!
Really enjoyed this blog. Really thank y…
Enjoyed every bit of your blog article. …
A round of applause for your blog post. …
I feel that is one of the most important…