本日はuseEffectが出てきたので、Reactの公式サイトの”Using the Effect Hook”というページで学習しました。⇒参照記事 4.Using the Effect Hook (reactjs.org公式)
「useEffect Hookとは、componentDidMountとcomponentDidUpdateとcomponentWillUnmountが一緒になったものだと考えると良い」とのこと。
useEffectを使うことによって、「Reactに対して、レンダーのあとcomponentが何かをする必要があると伝える」。とにかく、最初のレンダーや全てのアップデートが先に行われるとのことでした。
上記公式サイトではclassを使った場合とuseState, useEffect Hooksを使った場合のコードの例が掲載されているのですが、何度もthis.stateやthis.propsを繰り返さなくて良いという点でもコードが短くシンプルになっていると感じました。
useStateとuseEffectを使ったコードの例です。(上記公式サイトより)
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
You clicked {count} times
);
}
HooksはReactの新しい機能なので、まだまだHooksを使わない講座も多いのですが、現在の講座でuseState、useEffectを学ぶチャンスがあって良かったです。
現在使用している教材と学習時間:本日の学習時間2.0時間
Udemy:MERN Stack Front To Back: Full Stack React, Redux & Node.js by Brad Traversy
★Section8:React User Authentication
-Lec41 Load User & Set Auth Token (axios, useEffect Hook) (ここまで完了)
進捗状況:57%
学習時間2.0時間
~本日は休みにしている教材~
Udemy:The Complete Web Developer: Zero to Mastery by Andrei Neagoie
進捗状況: 92%
★参考にした本★
「React.js & Next.js超入門」掌田津耶乃 (秀和システム)
Section4-1: Reduxを使ってみよう
★参照記事★
Quiita参照記事⇒[axios] axios の導入と簡単な使い方
Reactjs公式サイト⇒ 4.Using the Effect Hook (reactjs.org公式)