1import React from "react";
2
3class NormalComponent extends React.Component {
4  /*
5   * コンストラクタ
6   */
7  constructor() {
8    super();
9
10    /**
11     * 画面の状態を初期化
12     */
13    this.state = {
14      count: 0,
15    };
16  }
17
18  /**
19   * コンポーネントマウント後処理
20   */
21  componentDidMount = () => {
22    console.log("[NormalComponent] componentDidMount");
23  };
24
25  /**
26   * コンポーネント更新時処理
27   */
28  componentDidUpdate = () => {
29    console.log("[NormalComponent] componentDidUpdate");
30  };
31
32  /**
33   * コンポーネントアンマウント前処理
34   */
35  componentWillUnmount = () => {
36    console.log("[NormalComponent] componentWillUnmount");
37  };
38
39  render = () => {
40    const { count } = this.state;
41    return (
42      <>
43        <p>{`This Component is NormalComponent (${count.toString()})`}</p>
44        <button
45          onClick={() => {
46            // ボタンを押下したタイミングでthis.setStateを使いstateを加算する
47            this.setState({ count: count + 1 });
48          }}
49        >
50          Count Up
51        </button>
52      </>
53    );
54  };
55}
56
57export default NormalComponent;

1import React, { useEffect, useState } from "react";
2
3const HooksComponent = () => {
4  // マウントされたかどうかをisMountedで管理
5  const [isMounted, setIsMounted] = useState(false);
6  const [count, setCount] = useState(0);
7
8  // 第二引数に空の配列を設定することでマウント・アンマウント時のみ起動する
9  useEffect(() => {
10    // returnで関数を返却することで、
11    // useEffectの状態監視が終了した(=アンマウントされた)タイミングで起動する
12    return () => {
13      console.log("[HooksComponent] useEffect willUnmount");
14    };
15  }, []);
16
17  // 第二引数にcountを含めた配列を設定することで、countの変更を監視する
18  useEffect(() => {
19    // isMountedの状態によりクラスコンポーネントでの
20    // componentDidMountとcomponentDidUpdateを判別する
21    if (isMounted) {
22      console.log("[HooksComponent] useEffect disUpdate");
23    } else {
24      console.log("[HooksComponent] useEffect didMount");
25      setIsMounted(true);
26    }
27  }, [count]);
28
29  return (
30    <>
31      <p>{`This Component is HooksComponent (${count.toString()})`}</p>
32      <button
33        onClick={() => {
34          // ボタンを押下したタイミングでsetCountを使いcountを加算する
35          setCount(count + 1);
36        }}
37      >
38        Count Up
39      </button>
40    </>
41  );
42};
43
44export default HooksComponent;

1import React from "react";
2import NormalComponent from "./NormalComponent";
3import HooksComponent from "./HooksComponent";
4
5export default class ComponentManager extends React.Component {
6  constructor() {
7    super();
8
9    this.state = {
10      showComponent: true,
11    };
12  }
13
14  render = () => {
15    const { showComponent } = this.state;
16    return (
17      <div>
18        <button
19          onClick={() => this.setState({ showComponent: !showComponent })}
20        >
21          {`Show/Hide Component`}
22        </button>
23        {showComponent ? (
24          <div>
25            <NormalComponent />
26            <HooksComponent />
27          </div>
28        ) : null}
29      </div>
30    );
31  };
32}